https://github.com/dirkluijk/ngx-generic-material-tables
Utils for generic Angular Material tables
https://github.com/dirkluijk/ngx-generic-material-tables
Last synced: over 1 year ago
JSON representation
Utils for generic Angular Material tables
- Host: GitHub
- URL: https://github.com/dirkluijk/ngx-generic-material-tables
- Owner: dirkluijk
- Created: 2019-08-16T13:16:26.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T08:47:06.000Z (over 3 years ago)
- Last Synced: 2023-08-03T08:00:03.596Z (almost 3 years ago)
- Language: TypeScript
- Size: 6.49 MB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Generic Angular Material Tables 🚀
> Sorting and filtering utils to create generic Angular Material tables
[](https://www.npmjs.com/package/@dirkluijk/ngx-generic-material-tables)
[](https://www.npmjs.com/package/@dirkluijk/ngx-generic-material-tables)
[](https://travis-ci.org/dirkluijk/ngx-generic-material-tables)
[](#contributors-)
## Overview
### What? 🤔
A small set of utils to make [Angular Material Tables](https://material.angular.io/components/table) more generic.
* 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 (case-insensitive and trimming the filter string)
* Persisted sorting using SessionStorage
* Reactive data source for RxJS Observables
* Reloading functionality (for reactive data sources)
### Why? 🤷♂️
When using Angular Material Table, you may need more advanced sorting and filtering behaviour. That's why you usually end up with a lot of boilerplate code.
This library provides some utils to use consistent sorting and filtering behaviour for all your tables.
## Installation 🌩
##### npm
```
npm install @dirkluijk/ngx-generic-material-tables --save-dev
```
##### yarn
```
yarn add @dirkluijk/ngx-generic-material-tables --dev
```
## Usage 🕹
### GenericTableDataSource
The `GenericTableDataSource` allows you to use "dot notation" for your columns and benefit from the following features:
* Only filter on the displayed columns (which you need to pass to it), using the dot notation
* Use the sortable columns based on the values accessed using the dot notation
```typescript
import { Component } from '@angular/core';
import { GenericTableDataSource } from '@dirkluijk/ngx-generic-material-tables'
@Component({
template: `
Name
{{ row.name }}
Foo Bar
{{ row.foo.bar }}
>
`
})
export class MyComponent {
public displayedColumns = ['name', 'foo.bar'];
public genericDataSource = new GenericTableDataSource(this.displayedColumns, [/** your data */]);
}
```
### Apply `MatSort` automatically
Use the `gmtApplyMatSort` to automatically register the `MatSort` on the data source.
```html
```
This allows you to leave out the following code:
```typescript
ViewChild(MatSort, {static: true}) sort: MatSort; // not needed anymore!
ngOnInit(): void {
this.dataSource.sort = this.sort; // not needed anymore!
}
```
### Persisted sorting
You can persist the sorting actions to SessionStorage using the `gmtPersistedSort` directive.
Just pass an additional identifier for your table in order to distinguish between multiple tables.
```html
```
That's it!
### ReactiveGenericTableDataSource
Even more awesome is the reactive version of the `GenericTableDataSource`:
* Pass the displayed columns, table data and filter data as `Observable` stream
* Automatically reacts to changes
* Provides `reload()` functionality
* Provides `loading`/`success`/`failed` static properties
* Provides `loading$`/`success$`/`failed$` Observable properties
```typescript
import { ReactiveGenericTableDataSource } from '@dirkluijk/ngx-generic-material-tables'
const dataSource = new ReactiveGenericTableDataSource(
displayedColumns$,
yourTableData$,
yourFilter$ // (optional)
);
dataSource.reload();
```
### Custom filtering for specific columns / types
If you still want to have custom filtering for a specific column, filter value or column value,
you can pass a `ColumnFilterPredicate`:
```typescript
import { defaultColumnFilterPredicate } from '@dirkluijk/ngx-generic-material-tables';
dataSource.columnFilterPredicate = (value, filter, columnName) => {
// exact filter for this column
if (columnName === 'vehicle.number') {
return value.trim().includes(filter);
}
// custom filter for number values
if (typeof value === 'number') {
return String(yourFormatFn(value)).includes(filter);
}
return defaultColumnFilterPredicate(value, filter, columnName); // use default predicate for other cases
};
```
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
