Table

API for table

API reference for Angular Material table

import {MatTableModule} from '@angular/material/table';

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

Selector: [matCellDef]

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

Selector: [matHeaderCellDef]

Footer cell definition for the mat-table. Captures the template of a column's footer cell and as well as cell-specific properties.

Selector: [matFooterCellDef]

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

Selector: [matColumnDef]

Properties
Name Description
@Input('matColumnDef')

name: string

Unique name for this column.
@Input()

sticky: boolean

Whether this column should be sticky positioned at the start of the row
@Input()

stickyEnd: boolean

Whether this column should be sticky positioned on the end of the row

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.
Methods
hasStickyChanged

Whether the sticky value has changed since this was last called.
Returns
boolean

resetStickyChanged

Resets the dirty check for cases where the sticky state has been used without checking.

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

Selector: mat-header-cell th[mat-header-cell]

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

Selector: mat-footer-cell td[mat-footer-cell]

Cell template container that adds the right classes and role.

Selector: mat-cell td[mat-cell]

Wrapper for the CdkTable with Material design styles.

Selector: mat-table table[mat-table]

Exported as: matTable
Properties
Name Description
@Input()

dataSource: CdkTableDataSourceInput<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()

multiTemplateDataRows: boolean

Whether to allow multiple rows per data object by evaluating which rows evaluate their 'when' predicate to true. If multiTemplateDataRows is false, which is the default value, then each dataobject will render the first row that evaluates its when predicate to true, in the order defined in the table, or otherwise the default row which does not have a when predicate.
@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.

stickyCssClass: 'mat-table-sticky'

Overrides the sticky CSS class set by the CdkTable.
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.
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.

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

Selector: [matHeaderRowDef]

Properties
Name Description
@Input( matHeaderRowDefSticky)

sticky: boolean

Whether sticky positioning should be applied.
Methods
hasStickyChanged

Whether the sticky value has changed since this was last called.
Returns
boolean

resetStickyChanged

Resets the dirty check for cases where the sticky state has been used without checking.

Footer row definition for the mat-table. Captures the footer row's template and other footer properties such as the columns to display.

Selector: [matFooterRowDef]

Properties
Name Description
@Input( matFooterRowDefSticky)

sticky: boolean

Whether sticky positioning should be applied.
Methods
hasStickyChanged

Whether the sticky value has changed since this was last called.
Returns
boolean

resetStickyChanged

Resets the dirty check for cases where the sticky state has been used without checking.

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

Selector: [matRowDef]

Properties
Name Description
@Input( matRowDefColumns)

columns: Iterable<string>

The columns to be displayed on this row.
@Input( matRowDefWhen)

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

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

Selector: mat-header-row tr[mat-header-row]

Exported as: matHeaderRow

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

Selector: mat-footer-row tr[mat-footer-row]

Exported as: matFooterRow

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

Selector: mat-row tr[mat-row]

Exported as: matRow

Data source that accepts a client-side data array and includes native support of filtering, sorting (using MatSort), and pagination (using MatPaginator).

Allows for sort customization by overriding sortingDataAccessor, which defines how data properties are accessed. Also allows for filter customization by overriding filterTermAccessor, which defines how row data is converted to a string for filter matching.

Properties
Name Description

data: T[]

Array of data that should be rendered by the table, where each object represents one row.

filter: string

Filter term that should be used to filter out objects from the data array. To override how data objects match to this filter string, provide a custom function for filterPredicate.

filterPredicate: ((data: T, filter: string) => boolean)

Checks if a data object matches the data source's filter string. By default, each data object is converted to a string of its properties and returns true if the filter has at least one occurrence in that string. By default, the filter string has its whitespace trimmed and the match is case-insensitive. May be overridden for a custom implementation of filter matching.

filteredData: T[]

The filtered set of data that has been matched by the filter string, or all the data if there is no filter. Useful for knowing the set of data the table represents. For example, a 'selectAll()' function would likely want to select the set of filtered data shown to the user rather than all the data.

paginator: MatPaginator | null

Instance of the MatPaginator component used by the table to control what page of the data is displayed. Page changes emitted by the MatPaginator will trigger an update to the table's rendered data.

Note that the data source uses the paginator's properties to calculate which page of data should be displayed. If the paginator receives its properties as template inputs, e.g. [pageLength]=100 or [pageIndex]=1, then be sure that the paginator's view has been initialized before assigning it to this data source.

sort: MatSort | null

Instance of the MatSort directive used by the table to control its sorting. Sort changes emitted by the MatSort will trigger an update to the table's rendered data.

sortData: ((data: T[], sort: MatSort) => T[])

Gets a sorted copy of the data array based on the state of the MatSort. Called after changes are made to the filtered data or when sort changes are emitted from MatSort. By default, the function retrieves the active sort and its direction and compares data by retrieving data using the sortingDataAccessor. May be overridden for a custom implementation of data ordering.

sortingDataAccessor: ((data: T, sortHeaderId: string) => string | number)

Data accessor function that is used for accessing data properties for sorting through the default sortData function. This default function assumes that the sort header IDs (which defaults to the column name) matches the data's properties (e.g. column Xyz represents data['Xyz']). May be set to a custom function for different behavior.