Angular Smart Table Component (DataTable)

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

Column groups

The Angular Smart Table component allows grouping related columns under a shared header. This feature is useful for presenting data categorized into groups or comparing different sets. The header group spans the width of the included columns and enhances organization and readability by grouping related data. Column groups can be nested and styled.

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

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):

API

SmartTable Module

SmartTable Standalone

c-smart-table

component

Inputs

(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
  • filter (Boolean/FilterFn(item, value: string) => boolean) - removes filter from column when set to false

(2) Sorter can be customized, by passing prop as object with additional options as keys. Available options:

• external (Boolean) - Disables automatic sorting inside component.
• resettable (Boolean) - If set to true, clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.

(3) Example item: { name: 'John' , age: 12, _selectable: false, _props: { color: 'success' }, _cellProps: { age: { active: true, align: 'middle'}}} For column generation description see columns prop.

(4) Column filter can be customized, by passing prop as object with additional options as keys. Available options:

• placeholder (String) - Sets custom table filter placeholder.
• label (String) - Sets custom table filter label.
• external (Boolean) - Disables automatic filtering inside component.
• lazy (Boolean) - Set to true to trigger filter updates only on change event.

Outputs

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)
• columnLabel_* (
  ~4.7.7
  see: Custom Headers)

All templates are optional.

To use custom templates you'll have to:

• import {SharedModule} from '@coreui/angular'
• pass the template name as a string to [cTemplateId] directive

For tableData pass the following variables:

• columnName ('key' - derived from [columns] definition)
• item (current row of [items] data array)
• tdContent (default content for every column of a current row)

Having columnName you can ngSwitch for custom rendering specified columns. Do not forget about ngSwitchDefault with tdContent.

Also - SmartTableComponent has exportAs: cSmartTable that you can use as a template variable (#smartTable in the example)

• SharedModule - [cTemplateId]
• ButtonModule - [cButton]
• TableModule - [cTableActive], [cTableColor]
• UtilitiesModule - [cAlign]