Angular Material is a high-quality UI component framework for Angular. For example, its Table component has a lot of features including sorting and filtering data. However, this component also has some limitations (as well as solutions for those limitations).

Some of the limitations are:

  • Filtering of data is done on all raw data, including data that is not shown in the visible columns;
  • It may require some boilerplate code to use sorting ( MatSort ) or to react to filter changes;
  • For sorting, it does not support nested properties out-of-the-box.

Hello @dirkluijk/ngx-generic-material-tables!

I created a small library that adds additional features to your Angular Material tables.

  • Sorting based on column names, with nested property support using dot notation;
  • Filtering based on column names, with nested property support using dot notation;
  • Sorts string values case-insensitive;
  • Filter only on displayed columns;
  • Persisted sorting using SessionStorage;
  • Reactive data source for RxJS Observables.

How?

The library extends the MatTableDataSource  and uses smarter sortingDataAccessor  and filterPredicate  functions.

There is also a ReactiveGenericTableDataSource  which reduces the amount of boilerplate even more, especially when you already work with RxJS streams.

Head over to @dirkluijk/ngx-generic-material-tables to use it. Happy coding!