Angular data table with sorting pagination and filtering

Using Angular material data table with sorting pagination and filtering

Introduction :

In this article, we must be learn about to build step by step process an data table with sorting pagination and filtering using the mat-table component from the Angular Material library.

1. Create a new Angular project:
> ng new angular-data-table

2. Install Angular Material:
>ng add @angular/material
 
3. Importing material Modules :

> In your app.module.ts file, we must import the required modules:

import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
@NgModule({
  imports: [
    
    MatTableModule,
    MatPaginatorModule,
    MatSortModule
  ]
})
export class AppModule {}

4.Creating Component :

> ng generate component data-table

5.Create Interface the data structure:

> ng g  interface PeriodicElement

export interface PeriodicElement {
  EmpPost: string;
  EmpName: string;
  EmpWeight: number;
  EmpSymbol: string;
}

6. Define the data:

const ELEMENT_DATA: PeriodicElement[ ] = [
  {

EmpPost: senior, 

EmpName: 'Mr.Angular', 

EmpWeight: 83, 

EmpSymbol: '@A'

},
 
];


7. Go to DataTable.Component.html:

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    <td mat-footer-cell *matFooterCellDef> Total </td>
  </ng-container>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    <td mat-footer-cell *matFooterCellDef> Total </td>
  </ng-container>
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    <td mat-footer-cell *matFooterCellDef> Total </td>
  </ng-container>
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
    <td mat-footer-cell *matFooterCellDef> Total </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>

Implementing Sorting and Pagination | pagination and filtering,

 8.Go to DataTable.Component.ts:

import { MatTableDataSource } from '@angular/material/table';
@Component({ })

export class DataTableComponent {
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

  displayedColumns: string[ ] = ['EmpPost', 'EmpName', 'EmpWeight', 'EmpSymbol' ];

}

9. Then Add a MatSort and MatPaginator DataTable.Component.html :

<table mat-table [dataSource]="dataSource" matSort>
  </table>
<mat-paginator [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons [pageSize]="5"></mat-paginator>

10. Assign MatSort and MatPaginator to the dataSource in the component:

DataTable.Component.ts

@ViewChild(MatSort) sort: MatSort | undefined;
@ViewChild(MatPaginator) paginator: MatPaginator | undefined;
ngOnInit() {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;
}

11. Then we must Implementing Filtering :

DataTable.Component.html

<input type="text" matInput (keyup)="applyFilter($event.target.value)">
12.Create a filter function .ts file:
DataTable.Component.ts
applyFilter(event: Event) {
  const filterValue = (event.target as HTMLInputElement).value;
  this.dataSource.filter = filterValue.trim().toLowerCase();
}
Then we can Run your project > ng serve command 

Conclusion  :

 
In this article, we follow all the steps to learn successfully create an Angular data table with essential features like sorting, pagination, and filtering. 
we all can customize this further to suit your specific requirements, data table with sorting pagination and filtering such as sorting, pagination, and filtering creates a powerful and user-friendly data table.

FAQ.

1.How to apply pagination on a table in Angular?

Ans- we design pagination on a table in Angular, you can use the MatPaginator component from Angular Material:

Import first MatPaginatorModule in your app.module.ts.

Create a MatPaginator instance in your component's template.

Assign the MatPaginator to the dataSource.paginator property in your component's code.

Configure pagination options like pageSizeOptions and pageSize.

By following these steps to effectively implement pagination for your Angular data table, improving user experience for large datasets.

2.How to display table data in Angular?

Ans-

When we display table data in Angular, we must use the mat-table component from Angular Material. Define your data structure, create a MatTableDataSource, and assign it to the dataSource property of the mat-table. Specify columns using matColumnDef and render data using matCellDef. You can also customize the table's appearance and behavior using Angular Material's styling options.

3.How to display array data in table in Angular?

Ans-

Displaying Array Data in a Table in Angular

->Create a MatTableDataSource: Instantiate a MatTableDataSource and assign your array to it.

->Define Columns: Use matColumnDef and matHeaderCellDef to define table columns.

->Render Data: Use matCellDef to render data from your array in each cell.

->Bind Data Source: Assign the MatTableDataSource to the dataSource property of the mat-table element.

->Display Table: The table will automatically render the data based on the defined columns and data source.

READ MORE.

1.Angular standalone component

2.Angular Animations: Stunning UI Effects

3.Angular Lazy Loading