import { _isNumberValue } from "@angular/cdk/coercion"; import { DataSource } from "@angular/cdk/collections"; import { BehaviorSubject, combineLatest, map, Observable, Subscription } from "rxjs"; export type SortDirection = "asc" | "desc"; export type SortFn = (a: any, b: any, direction?: SortDirection) => number; export type Sort = { column?: string; direction: SortDirection; fn?: SortFn; }; export type FilterFn = (data: T) => boolean; // Loosely based on CDK TableDataSource // https://github.com/angular/components/blob/main/src/material/table/table-data-source.ts export class TableDataSource extends DataSource { private readonly _data: BehaviorSubject; private readonly _sort: BehaviorSubject; private readonly _filter = new BehaviorSubject>(null); private readonly _renderData = new BehaviorSubject([]); private _renderChangesSubscription: Subscription | null = null; /** * The filtered set of data that has been matched by the filter string, or all the data if there * is no filter. Useful for knowing the set of data the table represents. * For example, a 'selectAll()' function would likely want to select the set of filtered data * shown to the user rather than all the data. */ filteredData: T[]; constructor() { super(); this._data = new BehaviorSubject([]); this._sort = new BehaviorSubject({ direction: "asc" }); } get data() { return this._data.value; } set data(data: T[]) { data = Array.isArray(data) ? data : []; this._data.next(data); // Normally the `filteredData` is updated by the re-render // subscription, but that won't happen if it's inactive. if (!this._renderChangesSubscription) { this.filterData(data); } } set sort(sort: Sort) { this._sort.next(sort); } get sort() { return this._sort.value; } /** * Filter to apply to the `data`. * * If a string is provided, it will be converted to a filter using {@link simpleStringFilter} **/ get filter() { return this._filter.value; } set filter(filter: string | FilterFn) { this._filter.next(filter); // Normally the `filteredData` is updated by the re-render // subscription, but that won't happen if it's inactive. if (!this._renderChangesSubscription) { this.filterData(this.data); } } connect(): Observable { if (!this._renderChangesSubscription) { this.updateChangeSubscription(); } return this._renderData; } disconnect(): void { this._renderChangesSubscription?.unsubscribe(); this._renderChangesSubscription = null; } private updateChangeSubscription() { const filteredData = combineLatest([this._data, this._filter]).pipe( map(([data]) => this.filterData(data)), ); const orderedData = combineLatest([filteredData, this._sort]).pipe( map(([data, sort]) => this.orderData(data, sort)), ); this._renderChangesSubscription?.unsubscribe(); this._renderChangesSubscription = orderedData.subscribe((data) => this._renderData.next(data)); } private filterData(data: T[]): T[] { const filter = typeof this.filter === "string" ? TableDataSource.simpleStringFilter(this.filter) : this.filter; this.filteredData = this.filter == null ? data : data.filter((obj) => filter(obj)); return this.filteredData; } private orderData(data: T[], sort: Sort): T[] { if (!sort) { return data; } return this.sortData(data, sort); } /** * Copied from https://github.com/angular/components/blob/main/src/material/table/table-data-source.ts * License: MIT * Copyright (c) 2022 Google LLC. * * Data accessor function that is used for accessing data properties for sorting through * the default sortData function. * This default function assumes that the sort header IDs (which defaults to the column name) * matches the data's properties (e.g. column Xyz represents data['Xyz']). * May be set to a custom function for different behavior. * @param data Data object that is being accessed. * @param sortHeaderId The name of the column that represents the data. */ protected sortingDataAccessor(data: T, sortHeaderId: string): string | number { const value = (data as unknown as Record)[sortHeaderId]; if (_isNumberValue(value)) { const numberValue = Number(value); return numberValue < Number.MAX_SAFE_INTEGER ? numberValue : value; } return value; } /** * Copied from https://github.com/angular/components/blob/main/src/material/table/table-data-source.ts * License: MIT * Copyright (c) 2022 Google LLC. * * Gets a sorted copy of the data array based on the state of the MatSort. Called * after changes are made to the filtered data or when sort changes are emitted from MatSort. * By default, the function retrieves the active sort and its direction and compares data * by retrieving data using the sortingDataAccessor. May be overridden for a custom implementation * of data ordering. * @param data The array of data that should be sorted. * @param sort The connected MatSort that holds the current sort state. */ protected sortData(data: T[], sort: Sort): T[] { const column = sort.column; const directionModifier = sort.direction === "asc" ? 1 : -1; if (!column) { return data; } return data.sort((a, b) => { // If a custom sort function is provided, use it instead of the default. if (sort.fn) { return sort.fn(a, b, sort.direction) * directionModifier; } let valueA = this.sortingDataAccessor(a, column); let valueB = this.sortingDataAccessor(b, column); // If there are data in the column that can be converted to a number, // it must be ensured that the rest of the data // is of the same type so as not to order incorrectly. const valueAType = typeof valueA; const valueBType = typeof valueB; if (valueAType !== valueBType) { if (valueAType === "number") { valueA += ""; } if (valueBType === "number") { valueB += ""; } } if (typeof valueA === "string" && typeof valueB === "string") { return valueA.localeCompare(valueB) * directionModifier; } // If both valueA and valueB exist (truthy), then compare the two. Otherwise, check if // one value exists while the other doesn't. In this case, existing value should come last. // This avoids inconsistent results when comparing values to undefined/null. // If neither value exists, return 0 (equal). let comparatorResult = 0; if (valueA != null && valueB != null) { // Check if one value is greater than the other; if equal, comparatorResult should remain 0. if (valueA > valueB) { comparatorResult = 1; } else if (valueA < valueB) { comparatorResult = -1; } } else if (valueA != null) { comparatorResult = 1; } else if (valueB != null) { comparatorResult = -1; } return comparatorResult * directionModifier; }); } /** * Modified from https://github.com/angular/components/blob/main/src/material/table/table-data-source.ts * License: MIT * Copyright (c) 2022 Google LLC. * * @param filter the string to search for * @returns a function that checks if a data object matches the provided `filter` string. Each data object * is converted to a string of its properties and returns true if the filter has * at least one occurrence in that string. The filter string has its whitespace * trimmed and the match is case-insensitive. */ static readonly simpleStringFilter = (filter: string): FilterFn => { return (data: T): boolean => { if (!filter) { return true; } // Transform the data into a lowercase string of all property values. const dataStr = Object.keys(data as unknown as Record) .reduce((currentTerm: string, key: string) => { // Use an obscure Unicode character to delimit the words in the concatenated string. // This avoids matches where the values of two columns combined will match the user's query // (e.g. `Flute` and `Stop` will match `Test`). The character is intended to be something // that has a very low chance of being typed in by somebody in a text field. This one in // particular is "White up-pointing triangle with dot" from // https://en.wikipedia.org/wiki/List_of_Unicode_characters return currentTerm + (data as unknown as Record)[key] + "◬"; }, "") .toLowerCase(); // Transform the filter by converting it to lowercase and removing whitespace. const transformedFilter = filter.trim().toLowerCase(); return dataStr.indexOf(transformedFilter) != -1; }; }; }