When it comes to sorting, the location of where you do the sorting matters. The recommended approach is to perform sorting on the backend for efficiency purposes. However, if you need to conduct sorting on the frontend, you can follow the basic example provided below:
import { Component } from "@angular/core";
import { Sort } from "@angular/material/sort";
export interface DataItem {
id: string;
scheduled: boolean;
}
/**
* @title Sorting overview
*/
@Component({
selector: "sort-overview-example",
templateUrl: "sort-overview-example.html",
styleUrls: ["sort-overview-example.css"],
})
export class SortOverviewExample {
items: DataItem[] = [
{ id: "1", scheduled: true },
{ id: "2", scheduled: false },
{ id: "3", scheduled: true },
{ id: "4", scheduled: false },
];
sortedData: DataItem[];
constructor() {
this.sortedData = this.items.slice();
}
sortData(sort: Sort) {
const data = this.items.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 "id":
return compare(a.id, b.id, isAsc);
case "scheduled":
return compareBool(a.scheduled, b.scheduled, isAsc);
default:
return 0;
}
});
}
}
function compare(a: number | string, b: number | string, isAsc: boolean) {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}
function compareBool(a: boolean, b: boolean, isAsc: boolean) {
return a === b ? 0 : isAsc ? (a ? -1 : 1) : a ? 1 : -1;
}
In summary: compareBool will prioritize sorting true values first when isAsc is set to true, and vice versa for false values.
Happy sorting! ;)