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!
