Project is currently not maintained. If there is interest, development can be resumed. Improvements to the API would be made.

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:

• Custom Mediator
• ArrayTableMediator with query

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}`);
  }
}

Example & Usage

• Minimal Example
• Fetching via HTTP