API reference for Angular Material table
import {MatTableModule} from '@angular/material/table';
Directives
MatRecycleRows
Enables the recycle view repeater strategy, which reduces rendering latency. Not compatible with tables that animate rows.
Selector: mat-table[recycleRows] table[mat-table][recycleRows]
MatTable
extends
CdkTable
Selector: mat-table table[mat-table]
Exported as: matTableProperties
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. |
|
Overrides the need to add position: sticky on every sticky cell element in |
|
Overrides the sticky CSS class set by the |
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. |
MatCellDef
extends
CdkCellDef
Cell definition for the mat-table. Captures the template of a column's data row cell as well as cell-specific properties.
Selector: [matCellDef]
MatHeaderCellDef
extends
CdkHeaderCellDef
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]
MatFooterCellDef
extends
CdkFooterCellDef
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]
MatColumnDef
extends
CdkColumnDef
Column definition for the mat-table. Defines a set of cells available for a table column.
Selector: [matColumnDef]
Properties
Name | Description |
---|---|
@Input('matColumnDef')
|
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. |
MatHeaderCell
extends
CdkHeaderCell
Header cell template container that adds the right classes and role.
Selector: mat-header-cell th[mat-header-cell]
MatFooterCell
extends
CdkFooterCell
Footer cell template container that adds the right classes and role.
Selector: mat-footer-cell td[mat-footer-cell]
MatCell
extends
CdkCell
Cell template container that adds the right classes and role.
Selector: mat-cell td[mat-cell]
MatHeaderRowDef
extends
CdkHeaderRowDef
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(matHeaderRowDef)
|
The columns to be displayed on this row. |
@Input(matHeaderRowDefSticky)
|
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. |
MatFooterRowDef
extends
CdkFooterRowDef
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(matFooterRowDef)
|
The columns to be displayed on this row. |
@Input(matFooterRowDefSticky)
|
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. |
MatRowDef
extends
CdkRowDef
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)
|
The columns to be displayed on this row. |
@Input(matRowDefWhen)
|
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
|
|
MatHeaderRow
extends
CdkHeaderRow
Header template container that contains the cell outlet. Adds the right class and role.
Selector: mat-header-row tr[mat-header-row]
Exported as: matHeaderRow
MatFooterRow
extends
CdkFooterRow
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
MatRow
extends
CdkRow
Data row template container that contains the cell outlet. Adds the right class and role.
Selector: mat-row tr[mat-row]
Exported as: matRow
MatNoDataRow
extends
CdkNoDataRow
Row that can be used to display a message when no data is shown in the table.
Selector: ng-template[matNoDataRow]
Properties
Name | Description |
---|---|
|
MatTextColumn
extends
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: mat-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
MatTableDataSource
extends
DataSource
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 filterPredicate, which defines how row data is converted to a string for filter matching.
Note: This class is meant to be a simple data source to help you get started. As such
it isn't equipped to handle some more advanced cases like robust i18n support or server-side
interactions. If your app needs to support more advanced use cases, consider implementing your
own DataSource
.
Properties
Name | Description |
---|---|
|
Array of data that should be rendered by the table, where each object represents one row. |
|
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. |
|
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. |
|
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. |
|
Instance of the paginator component used by the table to control what page of the data is displayed. Page changes emitted by the paginator 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. |
|
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. |
|
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. |
|
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. |
API reference for Angular Material table-testing
import {MatTableHarness} from '@angular/material/table/testing';
Classes
MatTableHarness
extends
ContentContainerComponentHarness
Harness for interacting with a mat-table in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader[]>
|
|
async
getAllHarnesses
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T[]>
|
|
async
getCellTextByColumnName
|
|
---|---|
Gets the text inside the entire table organized by columns. |
|
Returns | |
Promise<MatTableHarnessColumnsText>
|
|
async
getCellTextByIndex
|
|
---|---|
Gets the text inside the entire table organized by rows. |
|
Returns | |
Promise<string[][]>
|
|
async
getChildLoader
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader>
|
|
async
getFooterRows
|
|
---|---|
Gets all the footer rows in a table. |
|
Parameters | |
filter RowHarnessFilters = {}
|
|
Returns | |
Promise<MatFooterRowHarness[]>
|
|
async
getHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T>
|
|
async
getHarnessOrNull
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T | null>
|
|
async
getHeaderRows
|
|
---|---|
Gets all the header rows in a table. |
|
Parameters | |
filter RowHarnessFilters = {}
|
|
Returns | |
Promise<MatHeaderRowHarness[]>
|
|
async
getRows
|
|
---|---|
Gets all the regular data rows in a table. |
|
Parameters | |
filter RowHarnessFilters = {}
|
|
Returns | |
Promise<MatRowHarness[]>
|
|
async
hasHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<boolean>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options TableHarnessFilters = {}
|
Options for narrowing the search |
Returns | |
HarnessPredicate<T>
|
a |
MatRowHarness
Harness for interacting with an Angular Material table row.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getCellTextByColumnName
|
|
---|---|
Gets the text inside the row organized by columns. |
|
Returns | |
Promise<MatRowHarnessColumnsText>
|
|
async
getCellTextByIndex
|
|
---|---|
Gets the text of the cells in the row. |
|
Parameters | |
filter CellHarnessFilters = {}
|
|
Returns | |
Promise<string[]>
|
|
async
getCells
|
|
---|---|
Gets a list of |
|
Parameters | |
filter CellHarnessFilters = {}
|
|
Returns | |
Promise<Cell[]>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options RowHarnessFilters = {}
|
Options for narrowing the search |
Returns | |
HarnessPredicate<T>
|
a |
MatHeaderRowHarness
Harness for interacting with an Angular Material table header row.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getCellTextByColumnName
|
|
---|---|
Gets the text inside the row organized by columns. |
|
Returns | |
Promise<MatRowHarnessColumnsText>
|
|
async
getCellTextByIndex
|
|
---|---|
Gets the text of the cells in the row. |
|
Parameters | |
filter CellHarnessFilters = {}
|
|
Returns | |
Promise<string[]>
|
|
async
getCells
|
|
---|---|
Gets a list of |
|
Parameters | |
filter CellHarnessFilters = {}
|
|
Returns | |
Promise<Cell[]>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options RowHarnessFilters = {}
|
Options for narrowing the search |
Returns | |
HarnessPredicate<T>
|
a |
MatFooterRowHarness
Harness for interacting with an Angular Material table footer row.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getCellTextByColumnName
|
|
---|---|
Gets the text inside the row organized by columns. |
|
Returns | |
Promise<MatRowHarnessColumnsText>
|
|
async
getCellTextByIndex
|
|
---|---|
Gets the text of the cells in the row. |
|
Parameters | |
filter CellHarnessFilters = {}
|
|
Returns | |
Promise<string[]>
|
|
async
getCells
|
|
---|---|
Gets a list of |
|
Parameters | |
filter CellHarnessFilters = {}
|
|
Returns | |
Promise<Cell[]>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options RowHarnessFilters = {}
|
Options for narrowing the search |
Returns | |
HarnessPredicate<T>
|
a |
MatCellHarness
Harness for interacting with an Angular Material table cell.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader[]>
|
|
async
getAllHarnesses
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T[]>
|
|
async
getChildLoader
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader>
|
|
async
getColumnName
|
|
---|---|
Gets the name of the column that the cell belongs to. |
|
Returns | |
Promise<string>
|
|
async
getHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T>
|
|
async
getHarnessOrNull
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T | null>
|
|
async
getText
|
|
---|---|
Gets the cell's text. |
|
Returns | |
Promise<string>
|
|
async
hasHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<boolean>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options CellHarnessFilters = {}
|
Options for narrowing the search |
Returns | |
HarnessPredicate<MatCellHarness>
|
a |
MatHeaderCellHarness
Harness for interacting with an Angular Material table header cell.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader[]>
|
|
async
getAllHarnesses
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T[]>
|
|
async
getChildLoader
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader>
|
|
async
getColumnName
|
|
---|---|
Gets the name of the column that the cell belongs to. |
|
Returns | |
Promise<string>
|
|
async
getHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T>
|
|
async
getHarnessOrNull
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T | null>
|
|
async
getText
|
|
---|---|
Gets the cell's text. |
|
Returns | |
Promise<string>
|
|
async
hasHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<boolean>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options CellHarnessFilters = {}
|
Options for narrowing the search |
Returns | |
HarnessPredicate<MatHeaderCellHarness>
|
a |
MatFooterCellHarness
Harness for interacting with an Angular Material table footer cell.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader[]>
|
|
async
getAllHarnesses
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T[]>
|
|
async
getChildLoader
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader>
|
|
async
getColumnName
|
|
---|---|
Gets the name of the column that the cell belongs to. |
|
Returns | |
Promise<string>
|
|
async
getHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T>
|
|
async
getHarnessOrNull
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T | null>
|
|
async
getText
|
|
---|---|
Gets the cell's text. |
|
Returns | |
Promise<string>
|
|
async
hasHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<boolean>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options CellHarnessFilters = {}
|
Options for narrowing the search |
Returns | |
HarnessPredicate<MatFooterCellHarness>
|
a |
Interfaces
MatTableHarnessColumnsText
Text extracted from a table organized by columns.
MatRowHarnessColumnsText
Text extracted from a table row organized by columns.
CellHarnessFilters
A set of criteria that can be used to filter a list of cell harness instances.
Properties
Name | Description |
---|---|
|
Only find instances whose column name matches the given value. |
|
Only find instances whose text matches the given value. |
RowHarnessFilters
A set of criteria that can be used to filter a list of row harness instances.
TableHarnessFilters
A set of criteria that can be used to filter a list of table harness instances.