ngx-mat-table-mediator

Simplify Angular Material's mat-table.

Installation & Usage

npm i ngx-mat-table-mediator

At the core of this library is the abstract class MatTableMediator<F, O>. All functionality builds on top of it.
The library also provides an abstract class MediatedTableComponent<F, O>.

The generic type <F> always describes the type of the fetch input-payload, for example a form output . The generic type <O> always describes the type of the fetch output

You can read the detailed docs here. Extensive examples are provided in the integration directory and can be seen in action in the demo. A minimal component with a table, pagniator and sorting is shown below.

`abstract class MatTableMediator<F, O>`

The class consists of a chain of methods, that you may hook into.
It also provides several observables to react to certain events.

Define behaviour

The fetch method is the only abstract method, that you have to implement.

fetch → defines how the data is fetched
start → setups and subscribes to the data & page-reset observable
createDataFetch → creates the observable that fetches the table data
handleResult → handles the result of the data fetch observable
handleError → handles any errors occurring in the data fetch observable
createOnPageReset → creates the observable that indicates a page reset
handlePageReset → handles the page-reset observable

Events

data$: Observable<Array<O>> → the data for the table. You do not have to connect the table with this observable!
error$: Observable<Error> → any errors occurring while fetching. Note that the mediator will still work
isLoading$: Observable<boolean> → indicates loading
totalResults$: Observable<number> → total count of results that are available on the server
onPageReset$: Observable<[EventEmitter<Sort>, F] | any> → emits when ever the page should be reset
onResultsFound$: Observable<number> → only emits if results were found (x > 0)
onNoResultsFound$: Observable<void> → only emits if no results were found (x <= 0)
onFetchBegin$: Observable<void> → only emits if loading has started. You might use this to hide previous errors

Example & Usage

The library has two basic implementations:

SimpleTableMediator: takes the fetch function as a constructor argument
ArrayTableMediator: takes the fetch function as a constructor argument and calls prepareMediatorData on it

You can see the classes used here:

`abstract class MediatedTableComponent<F, O>`

The components still require some boilerplate code like querying the elements with @ViewChild.

The MediatedTableComponent reduces the code even further, to just a few lines.
The absolute minimum consists of

defining the columns: columns = ['name', 'age'];
defining the used mediator class: constructor() { super(SimpleTableMediator); }
implementing the fetch function: return this.http.get('my-endpoint');

The library also provides some templates for your components.

The MediatedTableComponent exposes the mediator instance, so you can also react to the events mentioned above. Additionally you have access to

isLoading$ observable, that connects to the mediator, when available
mediatorConfig to configure the mediator
trigger$ to overwrite the trigger for fetching, defaults to of(undefined)

Define behaviour

@Component({
  selector: 'app-minimal',
  template: MTM_TABLE_SORT_PAGINATOR_TMPL, // template with table, sort and paginator
  styleUrls: ['./minimal.component.css']
})
export class MinimalComponent extends MediatedTableComponent<void, Person>
  implements AfterViewInit, OnDestroy {
  columns: Columns<Person> = ['name', 'age'];

  constructor(private http: HttpClient) {
    super();
  }

  fetch(
    payload?: void,
    sortBy?: string,
    sortDirection?: 'asc' | 'desc' | '',
    pageIndex?: number,
    pageSize?: number
  ): Observable<MediatorData<Person>> {
    return this.http.get<MediatorData<Person>>(`/persons?page=${pageIndex}&size=${pageSize}`);
  }
}