feat: new getGroupingValue column option for avoiding false duplicate grouping (#4833)

* feat: add getGroupingValue columnDef option

* docs: add getGroupingValue docs

Author: tombuntus

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`

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,

packages/table-core/src/features/Grouping.ts

@@ -40,6 +40,7 @@ export interface GroupingColumnDef<TData extends RowData, TValue> {
     ReturnType<Cell<TData, TValue>['getContext']>
   >
   enableGrouping?: boolean
+  getGroupingValue?: (row: TData) => any
 }
 
 export interface GroupingColumn<TData extends RowData> {
@@ -56,6 +57,7 @@ export interface GroupingRow {
   groupingColumnId?: string
   groupingValue?: unknown
   getIsGrouped: () => boolean
+  getGroupingValue: (columnId: string) => unknown
   _groupingValuesCache: Record<string, any>
 }
 
@@ -229,9 +231,29 @@ export const Grouping: TableFeature = {
     }
   },
 
-  createRow: <TData extends RowData>(row: Row<TData>): GroupingRow => {
+  createRow: <TData extends RowData>(
+    row: Row<TData>,
+    table: Table<TData>
+  ): 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: {},
     }
   },

packages/table-core/src/utils/getGroupedRowModel.ts

@@ -173,7 +173,7 @@ function groupBy<TData extends RowData>(rows: Row<TData>[], columnId: string) {
   const groupMap = new Map<any, Row<TData>[]>()
 
   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])