mat-multi-sort v0.0.2

NgxMultiSortTable

This is the implementation for a multiple sortable table based on the Angluar Material Design. The focus is on server-side loaded and sorted data. Next to that the libarry provides some unsefull classes to reduce the duplicated code when useing the material paginator. The code is based on Francisco Arantes Rodrigues repository repo, so thanks for your great work.

The provied example is based on Angular 8 and Angular Material 8, I have not tested previous versions.

Client side multi sorting is not implementes yet, it might follow in the future or feel free to make a pull request.

Demo

To run the demo: 1. clone the repository 2. cd ngx-multi-sort-table 3. npm install 4. ng build multi-sort-table 5. ng serve

Screenvideo

Documentation

TableData

The TabelData an an usefull class, which handels a lot of work for your app, such as page events (next, previous, sizeChange) and sorting event. Next to that it keeps the current state of the table, again sorting and pagnation.

Properties

Methods

MatMultiSortHeaderComponent

This component manages the sorting of the table. To use the multisort add matMultiSort to your table and pass the mat-multi-sort-header="<your-column-id>" to the <th mat-header-cell>.

MatMultiSortTableSettingsComponent

This component display some settings for your table. The user can select the columns he wants to see in his table, next to that he can change the order of the columns.

Example code for the template

<div class="mat-elevation-z8">
  <mat-multi-sort-table-settings [columns]="table.columns" (activeColumnsChange)="table.setDisplayedColumns($event)"></mat-multi-sort-table-settings>
  <table mat-table [dataSource]="table.dataSource" matMultiSort  (matSortChange)="table.onSortEvent()">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-multi-sort-header="id"> ID </th>
      <td mat-cell *matCellDef="let row"> {{row.id}} </td>
    </ng-container>

    <ng-container matColumnDef="progress">
      <th mat-header-cell *matHeaderCellDef mat-multi-sort-header="progress"> Progress </th>
      <td mat-cell *matCellDef="let row"> {{row.progress}} % </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-multi-sort-header="name"> Name </th>
      <td mat-cell *matCellDef="let row"> {{row.name}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="table.displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: table.displayedColumns;"></tr>
  </table>
  <mat-paginator [pageSize]="table.pageSize" [pageIndex]="table.pageIndex" [pageSizeOptions]="table.pageSizeOptions"
    [length]="table.totalElements ? table.totalElements : 0" (page)="table.onPagnationEvent($event)">
  </mat-paginator>
</div>

Example code for the component.ts

  displayedColumns = ['id', 'name', 'progress'];

  table: TableData<UserData>;
  @ViewChild(MatMultiSort, { static: false }) sort: MatMultiSort;

  constructor(
    private dummyService: DummyService
  ) {
    this.table = new TableData<UserData>(
      [
        { id: 'id', name: 'ID' },
        { id: 'name', name: 'Name' },
        { id: 'progress', name: 'Progess' }
      ], 100
    );

  }

  ngOnInit() {
    this.table.sortObservable.subscribe(() => { this.getData(); });
    this.table.nextObservable.subscribe(() => { this.getData(); });
    this.table.previousObservable.subscribe(() => { this.getData(); });
    this.table.sizeObservable.subscribe(() => { this.getData(); });

    setTimeout(() => {
      this.table.dataSource = new MatMultiSortTableDataSource(this.sort);
      this.getData();
    }, 0);
  }

  getData() {
    const res = this.dummyService.list(this.table.sortParams, this.table.sortDirs, this.table.pageIndex, this.table.pageSize);
    this.table.totalElements = res.totalElements;
    this.table.pageIndex = res.page;
    this.table.pageSize = res.pagesize;
    this.table.dataSource.setTableData(res.users);
  }