Table

API for table

API reference for Angular CDK table

import {CdkTableModule} from '@angular/cdk/table';

A data table that renders a header row and data rows. Uses the dataSource input to determine the data to be rendered. The data can be provided either as a data array, an Observable stream that emits the data array to render, or a DataSource with a connect function that will return an Observable stream that emits the data array to render.

Selector: cdk-table

Exported as: cdkTable
Properties
NameDescription
@Input()

dataSource: DataSource<T> | Observable<T[]> | T[]

The table's source of data, which can be provided in three ways (in order of complexity):

  • Simple data array (each object represents one table row)
  • Stream that emits a data array each time the array changes
  • DataSource object that implements the connect/disconnect interface.

If a data array is provided, the table must be notified when the array's objects are added, removed, or moved. This can be done by calling the renderRows() function which will render the diff since the last table render. If the data array reference is changed, the table will automatically trigger an update to the rows.

When providing an Observable stream, the table will trigger an update automatically when the stream emits a new array of data.

Finally, when providing a DataSource object, the table will use the Observable stream provided by the connect function and trigger updates when that stream emits new data array values. During the table's ngOnDestroy or when the data source is removed from the table, the table will call the DataSource's disconnect function (may be useful for cleaning up any subscriptions registered during the connect process).

@Input()

trackBy: TrackByFunction<T>

Tracking function that will be used to check the differences in data changes. Used similarly to ngFor trackBy function. Optimize row operations by identifying a row based on its data relative to the function to know if a row should be added/removed/moved. Accepts a function that takes two parameters, index and item.

viewChange: BehaviorSubject<{ start: number; end: number; }>

Stream containing the latest information on what rows are being displayed on screen. Can be used by the data source to as a heuristic of what data should be provided.

Methods
addColumnDef

Adds a column definition that was not included as part of the direct content children.

Parameters

columnDef

CdkColumnDef

addRowDef

Adds a row definition that was not included as part of the direct content children.

Parameters

rowDef

CdkRowDef<T>

removeColumnDef

Removes a column definition that was not included as part of the direct content children.

Parameters

columnDef

CdkColumnDef

removeRowDef

Removes a row definition that was not included as part of the direct content children.

Parameters

rowDef

CdkRowDef<T>

renderRows

Renders rows based on the table's latest set of data, which was either provided directly as an input or retrieved through an Observable stream (directly or from a DataSource). Checks for differences in the data since the last diff to perform only the necessary changes (add/remove/move rows).

If the table's data source is a DataSource or Observable, this will be invoked automatically each time the provided Observable stream emits a new data array. Otherwise if your data is an array, this function will need to be called to render any changes.

setHeaderRowDef

Sets the header row definition to be used. Overrides the header row definition gathered by using ContentChild, if one exists. Sets a flag that will re-render the header row after the table's content is checked.

Parameters

headerRowDef

CdkHeaderRowDef

Cell definition for a CDK table. Captures the template of a column's data row cell as well as cell-specific properties.

Selector: [cdkCellDef]

Header cell definition for a CDK table. Captures the template of a column's header cell and as well as cell-specific properties.

Selector: [cdkHeaderCellDef]

Column definition for the CDK table. Defines a set of cells available for a table column.

Selector: [cdkColumnDef]

Properties
NameDescription
@Input('cdkColumnDef')

name: string

Unique name for this column.

cssClassFriendlyName: string

Transformed version of the column name that can be used as part of a CSS classname. Excludes all non-alphanumeric characters and the special characters '-' and '_'. Any characters that do not match are replaced by the '-' character.

Header cell template container that adds the right classes and role.

Selector: cdk-header-cell

Cell template container that adds the right classes and role.

Selector: cdk-cell

Header row definition for the CDK table. Captures the header row's template and other header properties such as the columns to display.

Selector: [cdkHeaderRowDef]

Properties
NameDescription
@Input( cdkHeaderRowDef)

columns: string[]

The columns to be displayed on this row.

Methods
getColumnsDiff

Returns the difference between the current columns and the columns from the last diff, or null if there is no difference.

Returns
IterableChanges<any> | null

Data row definition for the CDK table. Captures the header row's template and other row properties such as the columns to display and a when predicate that describes when this row should be used.

Selector: [cdkRowDef]

Properties
NameDescription
@Input( cdkRowDefColumns)

columns: string[]

The columns to be displayed on this row.

@Input( cdkRowDefWhen)

when: (index: number, rowData: T) => boolean

Function that should return true if this row template should be used for the provided index and row data. If left undefined, this row will be considered the default row template to use when no other when functions return true for the data. For every row, there must be at least one when function that passes or an undefined to default.

Methods
getColumnsDiff

Returns the difference between the current columns and the columns from the last diff, or null if there is no difference.

Returns
IterableChanges<any> | null

Header template container that contains the cell outlet. Adds the right class and role.

Selector: cdk-header-row

Data row template container that contains the cell outlet. Adds the right class and role.

Selector: cdk-row

Base class for the CdkHeaderRowDef and CdkRowDef that handles checking their columns inputs for changes and notifying the table.

Properties
NameDescription

columns: string[]

The columns to be displayed on this row.

Methods
getColumnsDiff

Returns the difference between the current columns and the columns from the last diff, or null if there is no difference.

Returns
IterableChanges<any> | null

Context provided to the row cells

Properties
NameDescription

$implicit: T

Data for the row that this cell is located within.

count: number

Length of the number of total rows.

even: boolean

True if this cell is contained in a row with an even-numbered index.

first: boolean

True if this cell is contained in the first row.

index: number

Index location of the row that this cell is located within.

last: boolean

True if this cell is contained in the last row.

odd: boolean

True if this cell is contained in a row with an odd-numbered index.
Contents