API reference for Angular CDK table
import {CdkTableModule} from '@angular/cdk/table';
Directives
CdkRecycleRows
Enables the recycle view repeater strategy, which reduces rendering latency. Not compatible with tables that animate rows.
Selector: cdk-table[recycleRows] table[cdk-table][recycleRows]
CdkTable
A data table that can render a header row, data rows, and a footer row. 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 table[cdk-table]
Exported as: cdkTableProperties
Name | Description |
---|---|
@Input()
|
The table's source of data, which can be provided in three ways (in order of complexity):
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 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 |
@Input({ transform: booleanAttribute })
|
Whether to use a fixed table layout. Enabling this option will enforce consistent column widths and optimize rendering sticky styles for native tables. No-op for flex tables. |
@Input({ transform: booleanAttribute })
|
Whether to allow multiple rows per data object by evaluating which rows evaluate their 'when'
predicate to true. If |
@Input()
|
Tracking function that will be used to check the differences in data changes. Used similarly
to |
@Output()
|
Emits when the table completes rendering a set of data rows based on the latest data from the data source, even if the set of rows is empty. |
|
Whether to manually add position: sticky to all sticky cell elements. Not needed if the position is set in a selector associated with the value of stickyCssClass. May be overridden by table subclasses |
|
CSS class added to any row or cell that has sticky positioning applied. May be overridden by table subclasses. |
Methods
addColumnDef | |
---|---|
Adds a column definition that was not included as part of the content children. |
|
Parameters | |
columnDef CdkColumnDef
|
|
addFooterRowDef | |
---|---|
Adds a footer row definition that was not included as part of the content children. |
|
Parameters | |
footerRowDef CdkFooterRowDef
|
|
addHeaderRowDef | |
---|---|
Adds a header row definition that was not included as part of the content children. |
|
Parameters | |
headerRowDef CdkHeaderRowDef
|
|
addRowDef | |
---|---|
Adds a row definition that was not included as part of the content children. |
|
Parameters | |
rowDef CdkRowDef<T>
|
|
removeColumnDef | |
---|---|
Removes a column definition that was not included as part of the content children. |
|
Parameters | |
columnDef CdkColumnDef
|
|
removeFooterRowDef | |
---|---|
Removes a footer row definition that was not included as part of the content children. |
|
Parameters | |
footerRowDef CdkFooterRowDef
|
|
removeHeaderRowDef | |
---|---|
Removes a header row definition that was not included as part of the content children. |
|
Parameters | |
headerRowDef CdkHeaderRowDef
|
|
removeRowDef | |
---|---|
Removes a row definition that was not included as part of the 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. |
setNoDataRow | |
---|---|
Sets a no data row definition that was not included as a part of the content children. |
|
Parameters | |
noDataRow CdkNoDataRow
|
|
updateStickyColumnStyles | |
---|---|
Updates the column sticky styles. First resets all applied styles with respect to the cells sticking to the left and right. Then sticky styles are added for the left and right according to the column definitions for each cell in each row. This is automatically called when the data source provides a new set of data or when a column definition changes its sticky input. May be called manually for cases where the cell content changes outside of these events. |
updateStickyFooterRowStyles | |
---|---|
Updates the footer sticky styles. First resets all applied styles with respect to the cells sticking to the bottom. Then, evaluating which cells need to be stuck to the bottom. This is automatically called when the footer row changes its displayed set of columns, or if its sticky input changes. May be called manually for cases where the cell content changes outside of these events. |
updateStickyHeaderRowStyles | |
---|---|
Updates the header sticky styles. First resets all applied styles with respect to the cells sticking to the top. Then, evaluating which cells need to be stuck to the top. This is automatically called when the header row changes its displayed set of columns, or if its sticky input changes. May be called manually for cases where the cell content changes outside of these events. |
CdkCellDef
Cell definition for a CDK table. Captures the template of a column's data row cell as well as cell-specific properties.
Selector: [cdkCellDef]
CdkHeaderCellDef
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]
CdkFooterCellDef
Footer cell definition for a CDK table. Captures the template of a column's footer cell and as well as cell-specific properties.
Selector: [cdkFooterCellDef]
CdkColumnDef
Column definition for the CDK table. Defines a set of cells available for a table column.
Selector: [cdkColumnDef]
Properties
Name | Description |
---|---|
@Input('cdkColumnDef')
|
Unique name for this column. |
@Input({ transform: booleanAttribute })
|
Whether the cell is sticky. |
@Input({ transform: booleanAttribute })
|
Whether this column should be sticky positioned on the end of the row. Should make sure
that it mimics the |
|
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. |
Methods
hasStickyChanged | |
---|---|
Whether the sticky state has changed. |
|
Returns | |
boolean
|
|
resetStickyChanged | |
---|---|
Resets the sticky changed state. |
CdkHeaderCell
extends
BaseCdkCell
Header cell template container that adds the right classes and role.
Selector: cdk-header-cell th[cdk-header-cell]
CdkFooterCell
extends
BaseCdkCell
Footer cell template container that adds the right classes and role.
Selector: cdk-footer-cell td[cdk-footer-cell]
CdkCell
extends
BaseCdkCell
Cell template container that adds the right classes and role.
Selector: cdk-cell td[cdk-cell]
CdkHeaderRowDef
extends
BaseRowDef
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
Name | Description |
---|---|
@Input(cdkHeaderRowDef)
|
The columns to be displayed on this row. |
@Input({ alias: 'cdkHeaderRowDefSticky', transform: booleanAttribute })
|
Whether the row is sticky. |
|
Methods
extractCellTemplate | |
---|---|
Gets this row def's relevant cell template from the provided column def. |
|
Parameters | |
column CdkColumnDef
|
|
Returns | |
TemplateRef<any>
|
|
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
|
|
hasStickyChanged | |
---|---|
Whether the sticky state has changed. |
|
Returns | |
boolean
|
|
resetStickyChanged | |
---|---|
Resets the sticky changed state. |
CdkFooterRowDef
extends
BaseRowDef
Footer row definition for the CDK table. Captures the footer row's template and other footer properties such as the columns to display.
Selector: [cdkFooterRowDef]
Properties
Name | Description |
---|---|
@Input(cdkFooterRowDef)
|
The columns to be displayed on this row. |
@Input({ alias: 'cdkFooterRowDefSticky', transform: booleanAttribute })
|
Whether the row is sticky. |
|
Methods
extractCellTemplate | |
---|---|
Gets this row def's relevant cell template from the provided column def. |
|
Parameters | |
column CdkColumnDef
|
|
Returns | |
TemplateRef<any>
|
|
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
|
|
hasStickyChanged | |
---|---|
Whether the sticky state has changed. |
|
Returns | |
boolean
|
|
resetStickyChanged | |
---|---|
Resets the sticky changed state. |
CdkRowDef
extends
BaseRowDef
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
Name | Description |
---|---|
@Input(cdkRowDefColumns)
|
The columns to be displayed on this row. |
@Input(cdkRowDefWhen)
|
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
extractCellTemplate | |
---|---|
Gets this row def's relevant cell template from the provided column def. |
|
Parameters | |
column CdkColumnDef
|
|
Returns | |
TemplateRef<any>
|
|
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
|
|
CdkHeaderRow
Header template container that contains the cell outlet. Adds the right class and role.
Selector: cdk-header-row tr[cdk-header-row]
CdkFooterRow
Footer template container that contains the cell outlet. Adds the right class and role.
Selector: cdk-footer-row tr[cdk-footer-row]
CdkRow
Data row template container that contains the cell outlet. Adds the right class and role.
Selector: cdk-row tr[cdk-row]
CdkNoDataRow
Row that can be used to display a message when no data is shown in the table.
Selector: ng-template[cdkNoDataRow]
Properties
Name | Description |
---|---|
|
CdkTextColumn
Column that simply shows text content for the header and row cells. Assumes that the table
is using the native table implementation (<table>
).
By default, the name of this column will be the header text and data property accessor.
The header text can be overridden with the headerText
input. Cell values can be overridden with
the dataAccessor
input. Change the text justification to the start or end using the justify
input.
Selector: cdk-text-column
Properties
Name | Description |
---|---|
@Input()
|
Accessor function to retrieve the data rendered for each cell. If this
property is not set, the data cells will render the value found in the data's property matching
the column's name. For example, if the column is named |
@Input()
|
Text label that should be used for the column header. If this property is not set, the header text will default to the column name with its first letter capitalized. |
@Input()
|
Alignment of the cell values. |
@Input()
|
Column name that should be used to reference this column. |
Classes
BaseCdkCell
Base class for the cells. Adds a CSS classname that identifies the column it renders in.
BaseRowDef
Base class for the CdkHeaderRowDef and CdkRowDef that handles checking their columns inputs for changes and notifying the table.
Properties
Name | Description |
---|---|
|
The columns to be displayed on this row. |
|
Methods
extractCellTemplate | |
---|---|
Gets this row def's relevant cell template from the provided column def. |
|
Parameters | |
column CdkColumnDef
|
|
Returns | |
TemplateRef<any>
|
|
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
|
|
Interfaces
RowOutlet
Interface used to provide an outlet for rows to be inserted into.
Properties
Name | Description |
---|---|
|
CellDef
Base interface for a cell definition. Captures a column's cell template definition.
Properties
Name | Description |
---|---|
|
CdkCellOutletRowContext
Context provided to the row cells when multiTemplateDataRows
is false
Properties
Name | Description |
---|---|
|
Data for the row that this cell is located within. |
|
Length of the number of total rows. |
|
True if this cell is contained in a row with an even-numbered index. |
|
True if this cell is contained in the first row. |
|
Index of the data object in the provided data array. |
|
True if this cell is contained in the last row. |
|
True if this cell is contained in a row with an odd-numbered index. |
CdkCellOutletMultiRowContext
Context provided to the row cells when multiTemplateDataRows
is true. This context is the same
as CdkCellOutletRowContext except that the single index
value is replaced by dataIndex
and
renderIndex
.
Properties
Name | Description |
---|---|
|
Data for the row that this cell is located within. |
|
Length of the number of total rows. |
|
Index of the data object in the provided data array. |
|
True if this cell is contained in a row with an even-numbered index. |
|
True if this cell is contained in the first row. |
|
True if this cell is contained in the last row. |
|
True if this cell is contained in a row with an odd-numbered index. |
|
Index location of the rendered row that this cell is located within. |
StickyUpdate
Properties
Name | Description |
---|---|
|
|
|
|
|
StickyPositioningListener
If provided, CdkTable will call the methods below when it updates the size/ position/etc of its sticky rows and columns.
Methods
stickyColumnsUpdated | |
---|---|
Called when CdkTable updates its sticky start columns. |
|
Parameters | |
update StickyUpdate
|
|
stickyEndColumnsUpdated | |
---|---|
Called when CdkTable updates its sticky end columns. |
|
Parameters | |
update StickyUpdate
|
|
stickyFooterRowsUpdated | |
---|---|
Called when CdkTable updates its sticky footer rows. |
|
Parameters | |
update StickyUpdate
|
|
stickyHeaderRowsUpdated | |
---|---|
Called when CdkTable updates its sticky header rows. |
|
Parameters | |
update StickyUpdate
|
|
TextColumnOptions
Configurable options for CdkTextColumn
.
Properties
Name | Description |
---|---|
|
Default data accessor to use if one is not provided. |
|
Default function that provides the header text based on the column name if a header text is not provided. |
Type aliases
CdkTableDataSourceInput
Possible types that can be set as the data source for a CdkTable
.
type CdkTableDataSourceInput = readonly T[] | DataSource<T> | Observable<readonly T[]>;
StickyDirection
type StickyDirection = 'top' | 'bottom' | 'left' | 'right';
StickySize
type StickySize = number | null | undefined;
StickyOffset
type StickyOffset = number | null | undefined;
Constants
CDK_ROW_TEMPLATE
The row template that can be used by the mat-table. Should not be used outside of the material library.
const CDK_ROW_TEMPLATE: "<ng-container cdkCellOutlet></ng-container>";
STICKY_POSITIONING_LISTENER
The injection token used to specify the StickyPositioningListener.
const STICKY_POSITIONING_LISTENER: InjectionToken<StickyPositioningListener>;
TEXT_COLUMN_OPTIONS
Injection token that can be used to specify the text column options.
const TEXT_COLUMN_OPTIONS: InjectionToken<TextColumnOptions<any>>;