Angular Smart Table

On this page

## Features - Filter items by one or all columns - Sort items by column - Integrated with CPagination component by default - Customize style of specific rows, columns and cells - Customize display of columns - Load with initial filters and sorter state - Loading state visualization - Default header labels generation based on column names ## Examples ### Basic usage

--- ### Default header - labels generation based on column names ---

--- ### Custom headers - custom table header templates

~4.7.7

To add custom column header template with a *`labelTemplateName`*: 1. HTML: add `ng-template` with `cTemplateId="columnLabel_`*`labelTemplateName`*`"` and `let-column` template variable 2. TypeScript: define `IColumns[]` config with `_labelTemplateId` and optional `_data` ---

--- ### Custom filters To filter a column with a *`columnName`* : 1. HTML: add `ng-template` with `cTemplateId="columnFilter_`*`columnName`*`"` with _your component_ 2. TypeScript: create `filterFunction` and pass it to the `columnFilterValue` prop of `c-smart-table` component ##### Custom filter with MultiSelect ---

--- ##### Custom filter with Date Range Picker ---

--- ### Custom functions ##### Custom filter/sorter functions with nested data column ---

--- ##### Custom filter/sorter functions with `tableData` template aggregated columns

~5.2.19

---

--- ### Summary row - Starting from

~4.5.26

you can pass an ng-template with `cTemplateId="tableSummaryRow"` as a c-smart-table content. - Style `tr` and `th` elements according to your needs. Display any data you want. ---

### External data One of the key features of **CoreUI Angular Smart Table** (Angular DataTable) is the ability to load data from an external source, such as an API or a server-side script. This can be useful if you have a large amount of data that you don't want to load all at once, or if you want to allow users to interact with the data without having to reload the page. Use the `HttpClient` for communication with the data source, and _get_ the external data from backend into a CoreUI Angular Smart Table (Angular DataTable). Here is an example of how you might use CoreUI Angular Smart Table with external data (**10.000+ records**):

4.5.26+

--- (1) In `columns` array each item represents one column. Item might be specified in two ways: - String: each item define column name equal to item value. - Object: item is object with following keys available as column configuration: - `key` (required)(String) - define column name equal to item key. - `label` (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word. - `_classes` (String/Array/Object) - adds classes to all cells in a column - `_style` (String/Array/Object) - adds styles to the column header (useful for defining widths) - `_props` - (Object) - adds props for a column header - `sorter` (Boolean/CompareFn(a,b) => number) - disables sorting of the column when set to false. See also: CompareFn

| name | description | type | | ---- | ----------- | ---- | | `activePageChange` | Event emitted on `activePage` change | `number` | | `columnFilterValueChange` | Event emitted on `columnFilterValue` change | | | `filteredItemsChange` | Event emitted on `filteredItems` change | | | `itemsPerPageChange` | Event emitted on `itemsPerPage` change | | | `rowClick` | Event emitted on row click | | | `selectedItemsChange` | Event emitted on `selectedItems` change | | | `sorterValueChange` | Event emitted on `sorterValue` change | | | `tableFilterValueChange` | Event emitted on `tableFilterValue` change | |

## Templates You can pass an ng-template with cTemplateId as a c-smart-table content. Available templates with [cTemplateId] names: - `tableCustomHeader` (

~4.4.5

goes to the header row with table filter/cleaner) - `tableData` (goes to `td` html element for specified `columnName`) - `tableDetails` (goes to separate row as row details, for every `tr`) - `tableSummaryRow` (

~4.5.26

goes to the table footer) - `columnFilter_*` (see: [Custom Filters](components/smart-table#custom-filters)) - `columnLabel_*` (

~4.7.7

see: [Custom Headers](components/smart-table#custom-headers))