Docs / Angular data table: columns, filters, pagination

Angular data table: columns, filters, pagination

lib-easy-table renders an Angular Material table from one EasyTableConfig object. Columns are described with MatColumnTyped.

Configuration object

new EasyTableConfig<Country>({
  data: countries,
  displayedColumns: columns,        // MatColumnTyped[]
  withToolbar: true,                // search, add and clear buttons
  withFilterInHeader: true,         // column filters under the titles
  changePageSize: 10,
  canCreate: true, canUpdate: true, canDelete: true,
  sortedBy: '',                     // keep the order given by your service
  rowKey: 'id',                     // property that identifies a row
  dialog: { add: true, edit: true, view: true, mode: 'open', form: countryDialogForm }
});

Outputs of the component include dialogResult, deleteItem, extendRow, clickField, overwrite and the toolbar events.

Typed columns

new MatColumnTyped({ name: 'code', type: ColumnType.IMAGE })               // flag from a country code (needs flag-icons)
new MatColumnTyped({ name: 'name', translateTitle: 'countries.name' })
new MatColumnTyped({
  name: 'isCapital', type: ColumnType.ICON,
  enableIcon: 'star', disableIcon: 'remove',
  conditionFn: (row) => row.isCapital,
  cssClassFn: (row) => (row.isCapital ? 'yellow' : 'grey')
})
new MatColumnTyped({ name: 'actions', headerIcon: 'rule' })              // row buttons: view, edit, delete

Column types: text, number, date, date-time, icon, icon-and-text, button, password, dropdownlist, image and filter.

Column filters

Turn on withFilterInHeader for the table and enableFilter on a column. 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' })
new MatColumnTyped({ name: 'isoCode', enableFilter: true })   // multi-select of the values

Every header cell reserves the same filter row, so titles stay aligned whether a column is filterable or not, and the header stays pinned while the rows scroll. Below 1024 px the filters fold away behind a filter button in the toolbar.

Selecting a row

A clicked row is highlighted. Rows are identified by the property named in rowKey (default id), so rows that share an id can be told apart and the selection survives a data reload.

Open the live demo or read the source on GitHub.