diff --git a/docs/api/features/grouping.md b/docs/api/features/grouping.md index d8fc65edc6..e5f747d1ed 100644 --- a/docs/api/features/grouping.md +++ b/docs/api/features/grouping.md @@ -112,6 +112,14 @@ enableGrouping?: boolean Enables/disables grouping for this column. +### `getGroupingValue` + +```tsx +getGroupingValue?: (row: TData) => any +``` + +Specify a value to be used for grouping rows on this column. If this option is not specified, the value derived from `accessorKey` / `accessorFn` will be used instead. + ## Column API ### `aggregationFn` @@ -202,6 +210,14 @@ getIsGrouped: () => boolean Returns whether or not the row is currently grouped. +### `getGroupingValue` + +```tsx +getGroupingValue: (columnId: string) => unknown +``` + +Returns the grouping value for any row and column (including leaf rows). + ## Table Options ### `aggregationFns` diff --git a/examples/react/grouping/src/main.tsx b/examples/react/grouping/src/main.tsx index a23435760e..46bcbfdf4d 100644 --- a/examples/react/grouping/src/main.tsx +++ b/examples/react/grouping/src/main.tsx @@ -28,6 +28,11 @@ function App() { accessorKey: 'firstName', header: 'First Name', cell: info => info.getValue(), + /** + * override the value used for row grouping + * (otherwise, defaults to the value derived from accessorKey / accessorFn) + */ + getGroupingValue: row => `${row.firstName} ${row.lastName}`, }, { accessorFn: row => row.lastName, diff --git a/packages/table-core/src/features/Grouping.ts b/packages/table-core/src/features/Grouping.ts index 6e0f39b5f8..629cf14489 100644 --- a/packages/table-core/src/features/Grouping.ts +++ b/packages/table-core/src/features/Grouping.ts @@ -40,6 +40,7 @@ export interface GroupingColumnDef { ReturnType['getContext']> > enableGrouping?: boolean + getGroupingValue?: (row: TData) => any } export interface GroupingColumn { @@ -56,6 +57,7 @@ export interface GroupingRow { groupingColumnId?: string groupingValue?: unknown getIsGrouped: () => boolean + getGroupingValue: (columnId: string) => unknown _groupingValuesCache: Record } @@ -229,9 +231,29 @@ export const Grouping: TableFeature = { } }, - createRow: (row: Row): GroupingRow => { + createRow: ( + row: Row, + table: Table + ): GroupingRow => { return { getIsGrouped: () => !!row.groupingColumnId, + getGroupingValue: columnId => { + if (row._groupingValuesCache.hasOwnProperty(columnId)) { + return row._groupingValuesCache[columnId] + } + + const column = table.getColumn(columnId) + + if (!column?.columnDef.getGroupingValue) { + return row.getValue(columnId) + } + + row._groupingValuesCache[columnId] = column.columnDef.getGroupingValue( + row.original + ) + + return row._groupingValuesCache[columnId] + }, _groupingValuesCache: {}, } }, diff --git a/packages/table-core/src/utils/getGroupedRowModel.ts b/packages/table-core/src/utils/getGroupedRowModel.ts index 2d51023b44..6736bfefcd 100644 --- a/packages/table-core/src/utils/getGroupedRowModel.ts +++ b/packages/table-core/src/utils/getGroupedRowModel.ts @@ -173,7 +173,7 @@ function groupBy(rows: Row[], columnId: string) { const groupMap = new Map[]>() return rows.reduce((map, row) => { - const resKey = `${row.getValue(columnId)}` + const resKey = `${row.getGroupingValue(columnId)}` const previous = map.get(resKey) if (!previous) { map.set(resKey, [row])