Posts

Angular Material Drag/Drop Table

Image
 Angular Material Drag/Drop Table In this post, we are going to go through the complete example of how to implement Drag/Drop rows in Angular Material Table. This is a step-by-step tutorial where you are going to learn how to add the Drag/Drop feature in the Angular Material Table. At the end of the document, you can find the YouTube video that contains the live working session on implementing drag-drop functionality on the angular material table. Prerequisites To begin with, you need to have a basic knowledge of Angular Framework, Angular Material with NodeJs, Angular CLI, and Visual Studio Code(VSC) installed in your system. Creating New Project In order to start with, create a new Angular project in the VSC editor by typing in the below command in the terminal. ng new angular-drag-drop-table After successfully creating the project open the project in VSC by clicking on File => Open Folder => angular-drag-drop-table   (find the path wherever you have created the proje...
Post a Comment
Read more

Mat-Table, HTML Table, AND/OR Logic Filter, Angular Table Filter

Image
  AND/OR Logic Table Filter This blog will give the complete details on using AoL filter which is created for filtering data based on multiple conditions. AND/OR Logic Table Filter is a modernised version of the HTML Table Filter generator javascript plugin. This library adds to any HTML table a "filter by column", "filter by value", "filter by date" feature that enables users to filter and limit the data displayed within the long table.  This filter doesn't display table, it will only gives a button or icon based on your requirement and it is user friendly. The add on feature in this package is you can filter value by date range and the complete filter is designed in such a way that it adopts CSS styles provided in configuration. Filter For You can use aot-filter to filter complete table data by column value, Filter will display each column header followed by value, by date range. Getting started Using the aol-filter with Bootstrap Table You can cre...
Post a Comment
Read more