Components

Sort Header

Angular Material Sort Header adds sorting behavior and visual indicators to tabular data, typically used with the Table component.

Official docs API reference

Example

Below is an example of how BuilderKit restyles the Angular Material Sort Header and gives it a more modern appearance.

Dessert (100g)	Calories	Fat (g)	Carbs (g)	Protein (g)
Frozen yogurt	159	6	24	4
Ice cream	237	9	37	4
Eclair	262	16	24	6
Cupcake	305	4	67	4
Gingerbread	356	16	49	4

<table matSort (matSortChange)="sortData($event)">
  <thead>
    <tr>
      <th mat-sort-header="name">Dessert (100g)</th>
      <th mat-sort-header="calories">Calories</th>
      <th mat-sort-header="fat">Fat (g)</th>
      <th mat-sort-header="carbs">Carbs (g)</th>
      <th mat-sort-header="protein">Protein (g)</th>
    </tr>
  </thead>
  
  <tbody>
    @for (dessert of sortedData; track dessert) {
      <tr>
        <td>{{ dessert.name }}</td>
        <td>{{ dessert.calories }}</td>
        <td>{{ dessert.fat }}</td>
        <td>{{ dessert.carbs }}</td>
        <td>{{ dessert.protein }}</td>
      </tr>
    }
  </tbody>
</table>