feat(material/sort): header icon customization

close #32002, #30563

Author: lekhmanrus

src/components-examples/material/sort/index.ts

@@ -1,2 +1,6 @@
 export {SortOverviewExample} from './sort-overview/sort-overview-example';
+export {SortHeaderIconsExample} from './sort-header-icons/sort-header-icons-example';
+export {SortHeaderIconsWithDefaultExample} from './sort-header-icons-with-default/sort-header-icons-with-default-example';
+export {SortHeaderCustomExample} from './sort-header-custom/sort-header-custom-example';
+export {SortHeaderCustomWithDefaultExample} from './sort-header-custom-with-default/sort-header-custom-with-default-example';
 export {SortHarnessExample} from './sort-harness/sort-harness-example';

src/components-examples/material/sort/sort-header-custom-with-default/sort-header-custom-with-default-example.css

@@ -0,0 +1,3 @@
+.mat-sort-header-container {
+  align-items: center;
+}

src/components-examples/material/sort/sort-header-custom-with-default/sort-header-custom-with-default-example.html

@@ -0,0 +1,33 @@
+<ng-template #sortIconsTemplate let-sortHeader>
+  @if (!sortHeader.isDisabled && sortHeader.isSorted) {
+    @if (sortHeader.direction === 'desc') {
+      <mat-icon focusable="false" aria-hidden="true" style="color: red;">keyboard_arrow_down</mat-icon>
+    }
+    @else {
+      <mat-icon focusable="false" aria-hidden="true" style="color: green;">keyboard_arrow_up</mat-icon>
+    }
+  }
+  @else {
+    <mat-icon focusable="false" aria-hidden="true">unfold_more</mat-icon>
+  }
+</ng-template>
+
+<table matSort (matSortChange)="sortData($event)">
+  <tr>
+    <th mat-sort-header="name" [matSortIconsTemplate]="sortIconsTemplate">Dessert (100g)</th>
+    <th mat-sort-header="calories" [matSortIconsTemplate]="sortIconsTemplate">Calories</th>
+    <th mat-sort-header="fat" [matSortIconsTemplate]="sortIconsTemplate">Fat (g)</th>
+    <th mat-sort-header="carbs" [matSortIconsTemplate]="sortIconsTemplate">Carbs (g)</th>
+    <th mat-sort-header="protein" [matSortIconsTemplate]="sortIconsTemplate">Protein (g)</th>
+  </tr>
+
+  @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>
+  }
+</table>

src/components-examples/material/sort/sort-header-custom-with-default/sort-header-custom-with-default-example.ts

@@ -0,0 +1,66 @@
+import {Component} from '@angular/core';
+import {MatIcon} from '@angular/material/icon';
+import {Sort, MatSortModule} from '@angular/material/sort';
+
+export interface Dessert {
+  calories: number;
+  carbs: number;
+  fat: number;
+  name: string;
+  protein: number;
+}
+
+/**
+ * @title Sorting header with custom template (including default).
+ */
+@Component({
+  selector: 'sort-header-custom-with-default-example',
+  templateUrl: 'sort-header-custom-with-default-example.html',
+  styleUrl: 'sort-header-custom-with-default-example.css',
+  imports: [MatSortModule, MatIcon],
+})
+export class SortHeaderCustomWithDefaultExample {
+  desserts: Dessert[] = [
+    {name: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4},
+    {name: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4},
+    {name: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6},
+    {name: 'Cupcake', calories: 305, fat: 4, carbs: 67, protein: 4},
+    {name: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 4},
+  ];
+
+  sortedData: Dessert[];
+
+  constructor() {
+    this.sortedData = this.desserts.slice();
+  }
+
+  sortData(sort: Sort) {
+    const data = this.desserts.slice();
+    if (!sort.active || sort.direction === '') {
+      this.sortedData = data;
+      return;
+    }
+
+    this.sortedData = data.sort((a, b) => {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'calories':
+          return compare(a.calories, b.calories, isAsc);
+        case 'fat':
+          return compare(a.fat, b.fat, isAsc);
+        case 'carbs':
+          return compare(a.carbs, b.carbs, isAsc);
+        case 'protein':
+          return compare(a.protein, b.protein, isAsc);
+        default:
+          return 0;
+      }
+    });
+  }
+}
+
+function compare(a: number | string, b: number | string, isAsc: boolean) {
+  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+}

src/components-examples/material/sort/sort-header-custom/sort-header-custom-example.css

@@ -0,0 +1,10 @@
+.mat-sort-header-container {
+  align-items: center;
+}
+
+sup {
+  font-size: 7px;
+  top: -3px;
+  position: absolute;
+  display: block;
+}

src/components-examples/material/sort/sort-header-custom/sort-header-custom-example.html

@@ -0,0 +1,25 @@
+<ng-template #sortIconsTemplate let-sortHeader>
+  @if (!sortHeader.isDisabled && sortHeader.isSorted) {
+    <sup>{{ sortHeader.direction === 'desc' ? 'Z-A' : 'A-Z' }}</sup>
+  }
+</ng-template>
+
+<table matSort (matSortChange)="sortData($event)">
+  <tr>
+    <th mat-sort-header="name" [matSortIconsTemplate]="sortIconsTemplate">Dessert (100g)</th>
+    <th mat-sort-header="calories" [matSortIconsTemplate]="sortIconsTemplate">Calories</th>
+    <th mat-sort-header="fat" [matSortIconsTemplate]="sortIconsTemplate">Fat (g)</th>
+    <th mat-sort-header="carbs" [matSortIconsTemplate]="sortIconsTemplate">Carbs (g)</th>
+    <th mat-sort-header="protein" [matSortIconsTemplate]="sortIconsTemplate">Protein (g)</th>
+  </tr>
+
+  @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>
+  }
+</table>

src/components-examples/material/sort/sort-header-custom/sort-header-custom-example.ts

@@ -0,0 +1,65 @@
+import {Component} from '@angular/core';
+import {Sort, MatSortModule} from '@angular/material/sort';
+
+export interface Dessert {
+  calories: number;
+  carbs: number;
+  fat: number;
+  name: string;
+  protein: number;
+}
+
+/**
+ * @title Sorting header with custom template.
+ */
+@Component({
+  selector: 'sort-header-custom-example',
+  templateUrl: 'sort-header-custom-example.html',
+  styleUrl: 'sort-header-custom-example.css',
+  imports: [MatSortModule],
+})
+export class SortHeaderCustomExample {
+  desserts: Dessert[] = [
+    {name: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4},
+    {name: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4},
+    {name: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6},
+    {name: 'Cupcake', calories: 305, fat: 4, carbs: 67, protein: 4},
+    {name: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 4},
+  ];
+
+  sortedData: Dessert[];
+
+  constructor() {
+    this.sortedData = this.desserts.slice();
+  }
+
+  sortData(sort: Sort) {
+    const data = this.desserts.slice();
+    if (!sort.active || sort.direction === '') {
+      this.sortedData = data;
+      return;
+    }
+
+    this.sortedData = data.sort((a, b) => {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'calories':
+          return compare(a.calories, b.calories, isAsc);
+        case 'fat':
+          return compare(a.fat, b.fat, isAsc);
+        case 'carbs':
+          return compare(a.carbs, b.carbs, isAsc);
+        case 'protein':
+          return compare(a.protein, b.protein, isAsc);
+        default:
+          return 0;
+      }
+    });
+  }
+}
+
+function compare(a: number | string, b: number | string, isAsc: boolean) {
+  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+}

src/components-examples/material/sort/sort-header-icons-with-default/sort-header-icons-with-default-example.css

@@ -0,0 +1,3 @@
+.mat-sort-header-container {
+  align-items: center;
+}

src/components-examples/material/sort/sort-header-icons-with-default/sort-header-icons-with-default-example.html

@@ -0,0 +1,19 @@
+<table matSort (matSortChange)="sortData($event)">
+  <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>
+
+  @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>
+  }
+</table>

src/components-examples/material/sort/sort-header-icons-with-default/sort-header-icons-with-default-example.ts

@@ -0,0 +1,77 @@
+import {Component} from '@angular/core';
+import {Sort, MatSortModule, MAT_SORT_DEFAULT_OPTIONS} from '@angular/material/sort';
+
+export interface Dessert {
+  calories: number;
+  carbs: number;
+  fat: number;
+  name: string;
+  protein: number;
+}
+
+/**
+ * @title Sorting header with configured default icons.
+ */
+@Component({
+  selector: 'sort-header-icons-with-default-example',
+  templateUrl: 'sort-header-icons-with-default-example.html',
+  styleUrl: 'sort-header-icons-with-default-example.css',
+  imports: [MatSortModule],
+  providers: [
+    {
+      provide: MAT_SORT_DEFAULT_OPTIONS,
+      useValue: {
+        icons: {
+          ascending: 'keyboard_arrow_up',
+          descending: 'keyboard_arrow_down',
+          default: 'unfold_more', // if you'd like to have always visible default sorting icon
+        },
+      },
+    },
+  ],
+})
+export class SortHeaderIconsWithDefaultExample {
+  desserts: Dessert[] = [
+    {name: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4},
+    {name: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4},
+    {name: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6},
+    {name: 'Cupcake', calories: 305, fat: 4, carbs: 67, protein: 4},
+    {name: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 4},
+  ];
+
+  sortedData: Dessert[];
+
+  constructor() {
+    this.sortedData = this.desserts.slice();
+  }
+
+  sortData(sort: Sort) {
+    const data = this.desserts.slice();
+    if (!sort.active || sort.direction === '') {
+      this.sortedData = data;
+      return;
+    }
+
+    this.sortedData = data.sort((a, b) => {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'calories':
+          return compare(a.calories, b.calories, isAsc);
+        case 'fat':
+          return compare(a.fat, b.fat, isAsc);
+        case 'carbs':
+          return compare(a.carbs, b.carbs, isAsc);
+        case 'protein':
+          return compare(a.protein, b.protein, isAsc);
+        default:
+          return 0;
+      }
+    });
+  }
+}
+
+function compare(a: number | string, b: number | string, isAsc: boolean) {
+  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+}