Components

Sort Header

Angular Material Sort Header adds sorting behavior and visual indicators to tabular data, typically used with the Table component. A header becomes clickable, an arrow appears next to its label to show whether the column is sorted up or down, and clicking again cycles through ascending, descending and back to the original order. BuilderKit restyles the header, the arrow and the hover state so the sorted table matches the rest of the design system.

Official docs API reference

The rows underneath are usually rendered with the table component, which reorders them whenever the sorted column changes.

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>

Sorting a column by default

A table can open already sorted, with the arrow shown on the active column instead of appearing only once a header is clicked.

Dessert (100g)	Calories	Fat (g)
Gingerbread	356	16
Cupcake	305	4
Eclair	262	16
Ice cream	237	9
Frozen yogurt	159	6

<table
  matSort
  matSortActive="calories"
  matSortDirection="desc"
  (matSortChange)="sortCalories($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>
    </tr>
  </thead>

  <tbody>
    @for (dessert of caloriesSortedData; track dessert) {
      <tr>
        <td>{{ dessert.name }}</td>
        <td>{{ dessert.calories }}</td>
        <td>{{ dessert.fat }}</td>
      </tr>
    }
  </tbody>
</table>