The matSort
and mat-sort-header
are used, respectively, to add sorting state and display to tabular data.
Frozen yogurt | 159 | 6 | 24 | 4 |
Ice cream sandwich | 237 | 9 | 37 | 4 |
Eclair | 262 | 16 | 24 | 6 |
Cupcake | 305 | 4 | 67 | 4 |
Gingerbread | 356 | 16 | 49 | 4 |
To add sorting behavior and styling to a set of table headers, add the <mat-sort-header>
component to each header and provide an id
that will identify it. These headers should be contained within a parent element with the matSort
directive, which will emit an matSortChange
event when the user triggers sorting on the header.
Users can trigger the sort header through a mouse click or keyboard action. When this happens, the matSort
will emit an matSortChange
event that contains the ID of the header triggered and the direction to sort (asc
or desc
).
By default, a sort header starts its sorting at asc
and then desc
. Triggering the sort header after desc
will remove sorting.
To reverse the sort order for all headers, set the matSortStart
to desc
on the matSort
directive. To reverse the order only for a specific header, set the start
input only on the header instead.
To prevent the user from clearing the sort sort state from an already sorted column, set matSortDisableClear
to true
on the matSort
to affect all headers, or set disableClear
to true
on a specific header.
If you want to prevent the user from changing the sorting order of any column, you can use the matSortDisabled
binding on the mat-sort
, or the disabled
on an single mat-sort-header
.
When used on an mat-table
header, it is not required to set an mat-sort-header
id on because by default it will use the id of the column.
1 | Hydrogen | 1.0079 | H |
2 | Helium | 4.0026 | He |
3 | Lithium | 6.941 | Li |
4 | Beryllium | 9.0122 | Be |
5 | Boron | 10.811 | B |
6 | Carbon | 12.0107 | C |
7 | Nitrogen | 14.0067 | N |
8 | Oxygen | 15.9994 | O |
9 | Fluorine | 18.9984 | F |
10 | Neon | 20.1797 | Ne |
The aria-label
for the sort button can be set in MatSortHeaderIntl
.