Docs / Angular table with filters and pagination

Angular table with filters and pagination

Filtering and paging are two settings of lib-easy-table, not code you write. This page explains each one, how matching behaves and where the limits are.

Column filters

Set withFilterInHeader on the table and enableFilter on each column you want to filter. filterType chooses the control: "text" is a compact input, "select" (the default) is a multi-select of the values found in the column.

new MatColumnTyped({ name: 'name', enableFilter: true, filterType: 'text' })   // type to narrow the rows
new MatColumnTyped({ name: 'role', enableFilter: true })                      // multi-select of the values

How matching works

A filter matches a part of the value of the property, ignoring case: "ali" finds "Alice".
The values chosen in a multi-select are alternatives inside one column.
Filters of different columns are combined: a row must match all of them.
The search field of the toolbar looks in every column of the row. Words joined with + are alternatives.
Because the filter reads the property, a value that you format for display (a population shown as "1.2 M") is filtered on the formatted property that holds the text you show.

Pagination

changePageSize sets the number of rows per page. The paginator is the one of Angular Material; add provideEasyPaginatorIntl() to your providers and its labels follow ngx-translate (keys PAGINATOR.ITEMS_PER_PAGE, NEXT_PAGE, PREVIOUS_PAGE, FIRST_PAGE, LAST_PAGE and RANGE).

new EasyTableConfig<User>({
  data: users,
  displayedColumns: columns,
  withFilterInHeader: true,
  changePageSize: 10,   // rows per page
  sortedBy: ''          // keep the order of your data
});

Sorting

A click on a header sorts the column. By default the data is first ordered by the id property (numbers as numbers, anything else as text); set sortedBy to an empty string to keep the order your service gives, which is what you want for dates, or for data your server already sorted.

On a phone

Below 1024 px the filters fold behind a filter button in the toolbar, and below 768 px the table adapts its layout. The toolbar keeps the search field and its buttons on one line on a narrow screen.

Limits

Filtering, sorting and paging run on the array you give: they are client-side. If the server must filter or page the data, load a page of rows yourself and pass it as data, or choose a grid with a server-side row model.