Understanding and Implementing DataTable in Angular using Angular Material.
First, we will create a simple Data Table using Angular Material then we add filtering, sorting, pagination step by step. so let’s get started :)
Now we will see all the directives and most importantly datasource.
<ng-container> provides an invisible grouping mechanism. It groups header-cell and regular-cell and tells angular which value to output in which column.
matColumnDef should match column names which we will specify in .ts file in displayedColumns array which you can see in the bottom of the above code snippet, with displayedColumns array we can easily reorder, include/exclude the columns in a table dynamically.
The code syntax in line 29 is a bit weird but it takes rows and columns. that’s it.
Now coming back to dataSource:
The simplest way to provide data to your table is by passing a data array.
For most real-world applications, providing the table a DataSource instance will be the best way to manage data. The DataSource is meant to serve a place to encapsulate any sorting, filtering, pagination, and data retrieval logic specific to the application.
A DataSource is simply a base class that has two functions: connect and disconnect. The connect function will be called by the table to receive a stream that emits the data array that should be rendered. The table will call disconnect when the table is destroyed, which may be the right time to clean up any subscriptions that may have been registered during the connect process.
this.dataSource.data stores an array over which table will make a loop and thus render all. this.training.getExercises() return an array.
#Sorting
Now let’s add Sorting to our Table using MatSortModule
first, add an import for MatSortModule in app.module.ts or material.module.ts if(created)
Then add matSort and mat-sort-header to only headers which you want to sort
and In .ts file
In ngAfterViewInit because it gets called after ngOnInit and by that our data should be initialized.
#Filtering
First of all, we need to add an input field so that the user can enter the value with which the user wants to filter rows.
By default, Angular material filtering mechanism concatenates all row values to a single string and transforms this string to lowercase. If you don’t want this behavior, you can define your own filtering logic by setting filterPredicate.
The filterPredicate property takes a function as a value which in turn takes two arguments: The data object (representing the data of one row) and the filtering string. You can then return true in the function if you find that it should match.
#Pagination
Pagination is an independent component provided by material but we can still use it with the table component . Setting it up is very similar to Sorting.
We are accessing local reference by using @ViewChild and then linking it with the datasource in line 30.
Please let me if you have any doubts. Happy learning :)
