|
| 1 | +import { Module, type ColumnComponent, type GroupArg, type Tabulator } from 'tabulator-tables'; |
| 2 | + |
| 3 | +export class GroupSort extends Module { |
| 4 | + static moduleName = 'groupSort'; |
| 5 | + |
| 6 | + constructor(table: Tabulator) { |
| 7 | + super(table); |
| 8 | + this.registerTableOption('groupSort', false); |
| 9 | + this.registerTableFunction('setSortedGroupBy', this._setSortedGroupBy.bind(this)); |
| 10 | + } |
| 11 | + |
| 12 | + initialize() { |
| 13 | + // @ts-expect-error groupSort is a custom propoerty see registerTableOption above |
| 14 | + if (this.table.options.groupSort) { |
| 15 | + this.table.on('dataSorting', () => { |
| 16 | + this.table.blockRedraw(); |
| 17 | + this._sortGroups(); |
| 18 | + this.table.restoreRedraw(); |
| 19 | + }); |
| 20 | + } |
| 21 | + } |
| 22 | + |
| 23 | + _setSortedGroupBy(...args: unknown[]) { |
| 24 | + const grpArg = args[0] as GroupArg; |
| 25 | + const grpArray = Array.isArray(grpArg) ? grpArg : [grpArg]; |
| 26 | + const oldGrpArg = this.table.options.groupBy as GroupArg; |
| 27 | + const oldGrpArray = Array.isArray(oldGrpArg) ? oldGrpArg : [oldGrpArg]; |
| 28 | + if (!this._areGroupsEqual(oldGrpArray, grpArray)) { |
| 29 | + this.table.options.groupBy = grpArg; |
| 30 | + this.table.blockRedraw(); |
| 31 | + this._sortGroups(); |
| 32 | + this.table.setGroupBy(grpArg); |
| 33 | + this.table.restoreRedraw(); |
| 34 | + } |
| 35 | + } |
| 36 | + |
| 37 | + _areGroupsEqual(oldGroups: unknown[], newGroups: unknown[]) { |
| 38 | + return ( |
| 39 | + oldGroups && |
| 40 | + newGroups.length === oldGroups.length && |
| 41 | + newGroups.every((value, index) => value === oldGroups[index]) |
| 42 | + ); |
| 43 | + } |
| 44 | + |
| 45 | + _sortGroups() { |
| 46 | + const grpArray = Array.isArray(this.table.options.groupBy) |
| 47 | + ? this.table.options.groupBy |
| 48 | + : [this.table.options.groupBy]; |
| 49 | + const { options } = this.table; |
| 50 | + options.groupValues = []; |
| 51 | + |
| 52 | + const validGrps = grpArray.filter(Boolean).length > 0; |
| 53 | + if (this.table && this.table.options.sortMode !== 'remote' && validGrps) { |
| 54 | + const { modules } = this.table; |
| 55 | + |
| 56 | + const groupRows = modules.groupRows; |
| 57 | + const rows = this.table.rowManager.rows; |
| 58 | + groupRows.configureGroupSetup(); |
| 59 | + groupRows.generateGroups(rows); |
| 60 | + |
| 61 | + const groupTotalsRows: InternalColumnTotal[] = []; |
| 62 | + const columnCalcs = modules.columnCalcs; |
| 63 | + const field = columnCalcs.botCalcs[0].field; |
| 64 | + groupRows.groupList.forEach((group: { key: string; rows: { data: unknown }[] }) => { |
| 65 | + const row = columnCalcs.generateBottomRow(group.rows); |
| 66 | + row.data[field] = group.key; |
| 67 | + row.key = group.key; |
| 68 | + row.rows = group.rows; |
| 69 | + row.generateCells(); |
| 70 | + groupTotalsRows.push(row); |
| 71 | + }); |
| 72 | + |
| 73 | + const sortListActual: unknown[] = []; |
| 74 | + //build list of valid sorters and trigger column specific callbacks before sort begins |
| 75 | + const sorter = modules.sort; |
| 76 | + const sortList: InternalSortItem[] = options.sortOrderReverse |
| 77 | + ? sorter.sortList.slice().reverse() |
| 78 | + : sorter.sortList; |
| 79 | + sortList.forEach((item) => { |
| 80 | + let sortObj; |
| 81 | + |
| 82 | + if (item.column) { |
| 83 | + sortObj = item.column.modules.sort; |
| 84 | + |
| 85 | + if (sortObj) { |
| 86 | + //if no sorter has been defined, take a guess |
| 87 | + if (!sortObj.sorter) { |
| 88 | + sortObj.sorter = sorter.findSorter(item.column); |
| 89 | + } |
| 90 | + |
| 91 | + item.params = |
| 92 | + typeof sortObj.params === 'function' |
| 93 | + ? sortObj.params(item.column.getComponent(), item.dir) |
| 94 | + : sortObj.params; |
| 95 | + |
| 96 | + sortListActual.push(item); |
| 97 | + } |
| 98 | + } |
| 99 | + }); |
| 100 | + |
| 101 | + //sort data |
| 102 | + if (sortListActual.length) { |
| 103 | + sorter._sortItems(groupTotalsRows, sortListActual); |
| 104 | + } else { |
| 105 | + groupTotalsRows.sort((a, b) => { |
| 106 | + const index = b.rows.length - a.rows.length; |
| 107 | + if (index === 0) { |
| 108 | + return a.key.localeCompare(b.key); |
| 109 | + } |
| 110 | + return index; |
| 111 | + }); |
| 112 | + } |
| 113 | + const groupValues: string[] = []; |
| 114 | + groupTotalsRows.forEach((colTotals) => { |
| 115 | + groupValues.push(colTotals.data[field] as string); |
| 116 | + }); |
| 117 | + |
| 118 | + this.table?.setGroupValues([groupValues]); |
| 119 | + } |
| 120 | + } |
| 121 | +} |
| 122 | + |
| 123 | +// Representations of the internal Tabulator structures, that are entirely private to Tabulator. Subject to change and likely to b a bit flaky. May not cover all cases yet. |
| 124 | +type InternalColumnTotal = { |
| 125 | + data: { [key: string]: unknown }; |
| 126 | + key: string; |
| 127 | + rows: { [key: string]: unknown }[]; |
| 128 | +}; |
| 129 | + |
| 130 | +type InternalColumn = { |
| 131 | + getField(): string; |
| 132 | + getComponent(): ColumnComponent; |
| 133 | + modules: { |
| 134 | + sort: { |
| 135 | + params: (column: ColumnComponent, dir: string) => object; |
| 136 | + sorter: (...args: unknown[]) => number | boolean; |
| 137 | + }; |
| 138 | + }; |
| 139 | +}; |
| 140 | + |
| 141 | +type InternalSortItem = { |
| 142 | + column: InternalColumn; |
| 143 | + dir: string; |
| 144 | + params: object; |
| 145 | +}; |
0 commit comments