Skip to content

Commit de0d7f1

Browse files
WillsWebsitesWillsWebsites
authored
chore: Refactoring ColumnGrouping into folder with separate base, types, and utils (#5640)
* Refactoring ColumnFiltering into folder with separate base, types, and utils * chore: Refactor ColumnGrouping into folder with base, utils, and types
1 parent 9d53281 commit de0d7f1

File tree

8 files changed

+315
-195
lines changed

8 files changed

+315
-195
lines changed

‎packages/table-core/src/aggregationFns.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AggregationFn } from './features/ColumnGrouping'
1+
import { AggregationFn } from './features/column-grouping/ColumnGrouping.types'
22
import { isNumberArray } from './utils'
33

44
const sum: AggregationFn<any> = (columnId, _leafRows, childRows) => {

‎packages/table-core/src/core/table.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import { Headers } from './headers'
2525

2626
import { ColumnFaceting } from '../features/column-faceting/ColumnFaceting'
2727
import { ColumnFiltering } from '../features/column-filtering/ColumnFiltering'
28-
import { ColumnGrouping } from '../features/ColumnGrouping'
28+
import { ColumnGrouping } from '../features/column-grouping/ColumnGrouping'
2929
import { ColumnOrdering } from '../features/ColumnOrdering'
3030
import { ColumnPinning } from '../features/ColumnPinning'
3131
import { ColumnSizing } from '../features/ColumnSizing'

‎packages/table-core/src/features/ColumnOrdering.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
Updater,
1010
} from '../types'
1111

12-
import { orderColumns } from './ColumnGrouping'
12+
import { orderColumns } from '../'
1313
import { ColumnPinningPosition, column_getVisibleLeafColumns } from '..'
1414

1515
export interface ColumnOrderTableState {

‎packages/table-core/src/features/column-grouping/ColumnGrouping.ts‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { Cell, Column, Row, RowData, Table, TableFeature } from '../../types'
2+
import { makeStateUpdater } from '../../utils'
3+
import {
4+
GroupingColumnDef,
5+
GroupingOptions,
6+
GroupingTableState,
7+
} from './ColumnGrouping.types'
8+
import {
9+
cell_getIsAggregated,
10+
cell_getIsGrouped,
11+
cell_getIsPlaceholder,
12+
column_getAggregationFn,
13+
column_getAutoAggregationFn,
14+
column_getCanGroup,
15+
column_getGroupedIndex,
16+
column_getIsGrouped,
17+
column_getToggleGroupingHandler,
18+
column_toggleGrouping,
19+
row_getGroupingValue,
20+
row_getIsGrouped,
21+
table_getGroupedRowModel,
22+
table_getPreGroupedRowModel,
23+
table_resetGrouping,
24+
table_setGrouping,
25+
} from './ColumnGrouping.utils'
26+
27+
export const ColumnGrouping: TableFeature = {
28+
_getDefaultColumnDef: <TData extends RowData>(): GroupingColumnDef<
29+
TData,
30+
unknown
31+
> => {
32+
return {
33+
aggregatedCell: props => (props.getValue() as any)?.toString?.() ?? null,
34+
aggregationFn: 'auto',
35+
}
36+
},
37+
38+
_getInitialState: (state): GroupingTableState => {
39+
return {
40+
grouping: [],
41+
...state,
42+
}
43+
},
44+
45+
_getDefaultOptions: <TData extends RowData>(
46+
table: Table<TData>
47+
): GroupingOptions => {
48+
return {
49+
onGroupingChange: makeStateUpdater('grouping', table),
50+
groupedColumnMode: 'reorder',
51+
}
52+
},
53+
54+
_createColumn: <TData extends RowData, TValue>(
55+
column: Column<TData, TValue>,
56+
table: Table<TData>
57+
): void => {
58+
column.toggleGrouping = () => column_toggleGrouping(column, table)
59+
60+
column.getCanGroup = () => column_getCanGroup(column, table)
61+
62+
column.getIsGrouped = () => column_getIsGrouped(column, table)
63+
64+
column.getGroupedIndex = () => column_getGroupedIndex(column, table)
65+
66+
column.getToggleGroupingHandler = () =>
67+
column_getToggleGroupingHandler(column)
68+
69+
column.getAutoAggregationFn = () =>
70+
column_getAutoAggregationFn(column, table)
71+
72+
column.getAggregationFn = () => column_getAggregationFn(column, table)
73+
},
74+
75+
_createTable: <TData extends RowData>(table: Table<TData>): void => {
76+
table.setGrouping = updater => table_setGrouping(table, updater)
77+
78+
table.resetGrouping = defaultState =>
79+
table_resetGrouping(table, defaultState)
80+
81+
table.getPreGroupedRowModel = () => table_getPreGroupedRowModel(table)
82+
83+
table.getGroupedRowModel = () => table_getGroupedRowModel(table)
84+
},
85+
86+
_createRow: <TData extends RowData>(
87+
row: Row<TData>,
88+
table: Table<TData>
89+
): void => {
90+
row.getIsGrouped = () => row_getIsGrouped(row)
91+
92+
row.getGroupingValue = columnId =>
93+
row_getGroupingValue(row, table, columnId)
94+
95+
row._groupingValuesCache = {}
96+
},
97+
98+
_createCell: <TData extends RowData, TValue>(
99+
cell: Cell<TData, TValue>,
100+
column: Column<TData, TValue>,
101+
row: Row<TData>
102+
): void => {
103+
cell.getIsGrouped = () => cell_getIsGrouped(column, row)
104+
105+
cell.getIsPlaceholder = () => cell_getIsPlaceholder(cell, column)
106+
107+
cell.getIsAggregated = () => cell_getIsAggregated(cell, row)
108+
},
109+
}

packages/table-core/src/features/ColumnGrouping.ts renamed to packages/table-core/src/features/column-grouping/ColumnGrouping.types.ts

Lines changed: 3 additions & 190 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
1-
import { RowModel } from '..'
2-
import { BuiltInAggregationFn, aggregationFns } from '../aggregationFns'
1+
import { BuiltInAggregationFn } from '../../aggregationFns'
32
import {
43
AggregationFns,
54
Cell,
6-
Column,
75
ColumnDefTemplate,
86
OnChangeFn,
97
Row,
108
RowData,
9+
RowModel,
1110
Table,
12-
TableFeature,
1311
Updater,
14-
} from '../types'
15-
import { isFunction, makeStateUpdater } from '../utils'
12+
} from '../../types'
1613

1714
export type GroupingState = string[]
1815

@@ -236,187 +233,3 @@ export interface GroupingInstance<TData extends RowData> {
236233
*/
237234
setGrouping: (updater: Updater<GroupingState>) => void
238235
}
239-
240-
//
241-
242-
export const ColumnGrouping: TableFeature = {
243-
_getDefaultColumnDef: <TData extends RowData>(): GroupingColumnDef<
244-
TData,
245-
unknown
246-
> => {
247-
return {
248-
aggregatedCell: props => (props.getValue() as any)?.toString?.() ?? null,
249-
aggregationFn: 'auto',
250-
}
251-
},
252-
253-
_getInitialState: (state): GroupingTableState => {
254-
return {
255-
grouping: [],
256-
...state,
257-
}
258-
},
259-
260-
_getDefaultOptions: <TData extends RowData>(
261-
table: Table<TData>
262-
): GroupingOptions => {
263-
return {
264-
onGroupingChange: makeStateUpdater('grouping', table),
265-
groupedColumnMode: 'reorder',
266-
}
267-
},
268-
269-
_createColumn: <TData extends RowData, TValue>(
270-
column: Column<TData, TValue>,
271-
table: Table<TData>
272-
): void => {
273-
column.toggleGrouping = () => {
274-
table.setGrouping(old => {
275-
// Find any existing grouping for this column
276-
if (old?.includes(column.id)) {
277-
return old.filter(d => d !== column.id)
278-
}
279-
280-
return [...(old ?? []), column.id]
281-
})
282-
}
283-
284-
column.getCanGroup = () => {
285-
return (
286-
(column.columnDef.enableGrouping ?? true) &&
287-
(table.options.enableGrouping ?? true) &&
288-
(!!column.accessorFn || !!column.columnDef.getGroupingValue)
289-
)
290-
}
291-
292-
column.getIsGrouped = () => {
293-
return table.getState().grouping?.includes(column.id)
294-
}
295-
296-
column.getGroupedIndex = () => table.getState().grouping?.indexOf(column.id)
297-
298-
column.getToggleGroupingHandler = () => {
299-
const canGroup = column.getCanGroup()
300-
301-
return () => {
302-
if (!canGroup) return
303-
column.toggleGrouping()
304-
}
305-
}
306-
column.getAutoAggregationFn = () => {
307-
const firstRow = table.getCoreRowModel().flatRows[0]
308-
309-
const value = firstRow?.getValue(column.id)
310-
311-
if (typeof value === 'number') {
312-
return aggregationFns.sum
313-
}
314-
315-
if (Object.prototype.toString.call(value) === '[object Date]') {
316-
return aggregationFns.extent
317-
}
318-
}
319-
column.getAggregationFn = () => {
320-
if (!column) {
321-
throw new Error()
322-
}
323-
324-
return isFunction(column.columnDef.aggregationFn)
325-
? column.columnDef.aggregationFn
326-
: column.columnDef.aggregationFn === 'auto'
327-
? column.getAutoAggregationFn()
328-
: table.options.aggregationFns?.[
329-
column.columnDef.aggregationFn as string
330-
] ??
331-
aggregationFns[
332-
column.columnDef.aggregationFn as BuiltInAggregationFn
333-
]
334-
}
335-
},
336-
337-
_createTable: <TData extends RowData>(table: Table<TData>): void => {
338-
table.setGrouping = updater => table.options.onGroupingChange?.(updater)
339-
340-
table.resetGrouping = defaultState => {
341-
table.setGrouping(defaultState ? [] : table.initialState?.grouping ?? [])
342-
}
343-
344-
table.getPreGroupedRowModel = () => table.getFilteredRowModel()
345-
table.getGroupedRowModel = () => {
346-
if (!table._getGroupedRowModel && table.options.getGroupedRowModel) {
347-
table._getGroupedRowModel = table.options.getGroupedRowModel(table)
348-
}
349-
350-
if (table.options.manualGrouping || !table._getGroupedRowModel) {
351-
return table.getPreGroupedRowModel()
352-
}
353-
354-
return table._getGroupedRowModel()
355-
}
356-
},
357-
358-
_createRow: <TData extends RowData>(
359-
row: Row<TData>,
360-
table: Table<TData>
361-
): void => {
362-
row.getIsGrouped = () => !!row.groupingColumnId
363-
row.getGroupingValue = columnId => {
364-
if (row._groupingValuesCache.hasOwnProperty(columnId)) {
365-
return row._groupingValuesCache[columnId]
366-
}
367-
368-
const column = table.getColumn(columnId)
369-
370-
if (!column?.columnDef.getGroupingValue) {
371-
return row.getValue(columnId)
372-
}
373-
374-
row._groupingValuesCache[columnId] = column.columnDef.getGroupingValue(
375-
row.original
376-
)
377-
378-
return row._groupingValuesCache[columnId]
379-
}
380-
row._groupingValuesCache = {}
381-
},
382-
383-
_createCell: <TData extends RowData, TValue>(
384-
cell: Cell<TData, TValue>,
385-
column: Column<TData, TValue>,
386-
row: Row<TData>,
387-
table: Table<TData>
388-
): void => {
389-
const getRenderValue = () =>
390-
cell.getValue() ?? table.options.renderFallbackValue
391-
392-
cell.getIsGrouped = () =>
393-
column.getIsGrouped() && column.id === row.groupingColumnId
394-
cell.getIsPlaceholder = () => !cell.getIsGrouped() && column.getIsGrouped()
395-
cell.getIsAggregated = () =>
396-
!cell.getIsGrouped() && !cell.getIsPlaceholder() && !!row.subRows?.length
397-
},
398-
}
399-
400-
export function orderColumns<TData extends RowData>(
401-
leafColumns: Column<TData, unknown>[],
402-
grouping: string[],
403-
groupedColumnMode?: GroupingColumnMode
404-
) {
405-
if (!grouping?.length || !groupedColumnMode) {
406-
return leafColumns
407-
}
408-
409-
const nonGroupingColumns = leafColumns.filter(
410-
col => !grouping.includes(col.id)
411-
)
412-
413-
if (groupedColumnMode === 'remove') {
414-
return nonGroupingColumns
415-
}
416-
417-
const groupingColumns = grouping
418-
.map(g => leafColumns.find(col => col.id === g)!)
419-
.filter(Boolean)
420-
421-
return [...groupingColumns, ...nonGroupingColumns]
422-
}

0 commit comments

Comments
 (0)