NgxMultiSortTable

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

Warning:

• Older versions might have known security issues. So keep up-to-date!
• Older versions of this library lack some features.

Demo

Visit the GitHub pages demo or clone and run it locally.

To run the demo:

1. clone the repository
2. npm install
3. ng build mat-multi-sort

Changelog

See the GitHub release notes.

Documentation

TableData

The TableData a useful class, which handles a lot of work for your app, such as page events (next, previous, sizeChange) and sorting events. Next to that, it keeps the current state of the table, again sorting and pagination.

Properties

Methods

MatMultiSortHeaderComponent

This component manages the sorting of the table. To use the multi-sort add matMultiSort to your table and pass the mat-multi-sort-header="" to the ``.

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. Additionally, the component shows the current chosen sorting columns as chips above the table. The user can easyly change the sorting order by drag and drop the chips and also change the sorting direction of each column.

MatMultiSortTableDataSource

This is the datasource of the MultiSortTable, it works like the MatTableDataSource´.

Example code for the template

  <button>
    Spalten bearbeiten &nbsp;
    menu
  </button>
   
  
    {{columnName}}
    {{direction === 'asc' ? 'arrow_upward' : 'arrow_downward'}}
  


      
      
      
      <table>

    
    <tbody><tr><th> {{column.name}} </th>
      <td> {{row[column.id]}} </td>
    

    
    <th> ID </th>
      <td> {{row.id}} </td>
    

    <th> Progress </th>
      <td> {{row.progress}} % </td>
    

    <th> Name </th>
      <td> {{row.name}} </td>
    

  </tr><tr></tr>
  <tr>
  </tr>
</tbody></table>

Example code for the component.ts

export class AppComponent implements OnInit {
  CLIENT_SIDE = true;

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

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

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

    setTimeout(() => {
      this.initData();
    }, 0);
  }

  initData() {
    this.table.dataSource = new MatMultiSortTableDataSource(this.sort, this.CLIENT_SIDE);
    if (this.CLIENT_SIDE) {
      this.getOfflineData();
    } else {
      this.table.pageSize = 10;
      this.getData();
    }
  }

  getData() {
    if (!this.CLIENT_SIDE) {
      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.data = res.users;
    }
  }

  getOfflineData() {
    const res = this.dummyService.list([], [], 0, 25);
    this.table.totalElements = 25;
    this.table.pageIndex = res.page;
    this.table.pageSize = res.pagesize;
    this.table.data = res.users;
  }
}

Contributing

How should I write my commits?

Release Please assume you are using Conventional Commit messages.

The most important prefixes you should have in mind are:

• fix: which represents bug fixes, and correlates to a SemVer patch.
• feat: which represents a new feature, and correlates to a SemVer minor.
• feat!:, or fix!:, refactor!:, etc., which represent a breaking change (indicated by the !) and will result in a SemVer major.