This tutorial is about angular 5 data table.Here, we will be creating a single page angular application from CLI command and then integrate material with it and create a sample data table using
mat-table directive.The data table will support pagination, sorting, filtering and row selection provided by
matSort in MatPaginatorModule and MatSortModule
1. Install angular CLI using NPM -
npm install -g @angular/cli
2. Create a new angular 5 project -
ng new angular5-data-table
3. Enter inside the newly created project -
4. Serve the application -
This application is now available on localhost:4200.
Following is the final project structure. To make this project simple and concentrate only on data table, we will be implementing the data table in
In my last article, we discussed extensively about integrating material with angular. We will be using the same configuration here.In this configuration we have defined a custom module - CustomMaterialModule which has all the material module imported and exported and this module is imported into main module - app.module.ts. Following is our MaterialModule that we will be using in this application.
We have MatTableModule that imports angular materila features to create table. This brings multiple directives such as MatTable, matCellDef, MatHeaderCellDef, MatColumnDef and many more that is reqired to create data table.
Now let us create a material table with the use of mat-table, matColumnDef, matHeaderCellDef, matCellDef and matRowDef.app.component.html
mat-table - Provides a Material Design styled data-table and it represents the table skeleton.
matColumnDef - Uniquely identifies a column and contains header and row cell definition.
matHeaderCellDef - Represents the name of the header.It will be displayed in the header of corresponding column.
matCellDef - Contains actual value that will be rendered inside a cell.
matRowDef - Represents each row for a given number of columns. The column order of the table depends upon the order mentioned in the displayedColumns not the matColumnDef
We have skeleton of the data table defined, now we have to provide data to it and the data is provided with the help of datasource and the name of the datasource we have already provided in [datasource] in mat-table.Now we will push data to the datasource in
app.component.tsFollowing is the implementation.
Now the data table implementation is done and it will look like below once the angular app is deployed.
To enable pagination, angular provides mat-paginator directive that accepts required parameter to perform pagination.This directive should be placed after the mat-table directive.But before using this directive, we need to import MatPaginatorModule in the our
material.module.ts.Following is an example.
Here, the length is the total no. of rows, pageSize is the no. of rows displayed in a single table view(default is 50) and pageSizeOptions enables the switching between the no. of rows displayed in a single table view.
Also, we need to configure the paginator in our .ts file to automatically listen for page changes made by the user after the page view is initiated.
Now, check the effect of paginator in the browser.At first, only 3 rows will be displayed and paginations to view other pages.
Angular material provides matSort directive for sorting purpose and we require to add mat-sort-header to each column header cell that we want to sort and matSort in the mat-table directive.Following is an example to sort table with firstName. Make sure to add MatSortModule in our
And similar to paination, following changes are required in out .ts file
Now, we can see the option in our data table to sort based on first name.
For filtering material does not provide any specific directive similar to sorting and pagination but we can achieve filtering by defining our custom method for it.We can have a similar implementation like below which can be called from .html on keyup event.
Following is the screenshot of filtered result.
Sometimes we require to get the selected row to perform further operation on the selected row, for example deleting the selected row. To do so we can register click event on the table row and handle the event in our .ts file. Following configuration will raise the click event and call rowClicked() on a row click.
And in the .ts file the click event is handled as below:
This is all with data table in angular 5 material. In the next tutorial we will take a look into loading data in the data table from database.If you have anything that you want to add or share then please share it below in the comment section
1. Rxjs Tutorial
2. Building Angular Application
3. Angular Material Dialog
4. Angular Material App
5. Typescript Tutorial
6. Install Nginx Php Mac
7. Nodejs Basic Tutorial
Contact us: email@example.com