Passing generateGroupId props (#3520)

Add `groupIdGetter` prop

Co-authored-by: Aman Mahajan <amahajan@freewheel.tv>

Author: Luisgustavom1

README.md

@@ -520,6 +520,8 @@ function MyGridTest() {
 
 ###### `onExpandedGroupIdsChange?: Maybe<(expandedGroupIds: Set<unknown>) => void>`
 
+###### `groupIdGetter?: Maybe<(groupKey: string, parentId?: string) => string>`
+
 #### `<TextEditor />`
 
 ##### Props

src/DataGrid.tsx

@@ -1037,7 +1037,6 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
   // Reset the positions if the current values are no longer valid. This can happen if a column or row is removed
   if (selectedPosition.idx > maxColIdx || selectedPosition.rowIdx > maxRowIdx) {
     setSelectedPosition({ idx: -1, rowIdx: minRowIdx - 1, mode: 'SELECT' });
-    // eslint-disable-next-line react-compiler/react-compiler
     setDraggedOverRowIdx(undefined);
   }
 
@@ -1165,7 +1164,6 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
               );
             })}
             <RowSelectionChangeContext value={selectRowLatest}>
-              {/* eslint-disable-next-line react-compiler/react-compiler */}
               {getViewportRows()}
             </RowSelectionChangeContext>
             {bottomSummaryRows?.map((row, rowIdx) => {

src/TreeDataGrid.tsx

@@ -39,6 +39,7 @@ export interface TreeDataGridProps<R, SR = unknown, K extends Key = Key>
   ) => Record<string, readonly NoInfer<R>[]>;
   expandedGroupIds: ReadonlySet<unknown>;
   onExpandedGroupIdsChange: (expandedGroupIds: Set<unknown>) => void;
+  groupIdGetter?: Maybe<(groupKey: string, parentId?: string) => string>;
 }
 
 type GroupByDictionary<TRow> = Record<
@@ -66,13 +67,15 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
   rowGrouper,
   expandedGroupIds,
   onExpandedGroupIdsChange,
+  groupIdGetter: rawGroupIdGetter,
   ...props
 }: TreeDataGridProps<R, SR, K>) {
   const defaultRenderers = useDefaultRenderers<R, SR>();
   const rawRenderRow = renderers?.renderRow ?? defaultRenderers?.renderRow ?? defaultRenderRow;
   const headerAndTopSummaryRowsCount = 1 + (props.topSummaryRows?.length ?? 0);
   const { leftKey, rightKey } = getLeftRightKey(props.direction);
   const toggleGroupLatest = useLatestFunc(toggleGroup);
+  const groupIdGetter = rawGroupIdGetter ?? defaultGroupIdGetter;
 
   const { columns, groupBy } = useMemo(() => {
     const columns = [...rawColumns].sort(({ key: aKey }, { key: bKey }) => {
@@ -144,6 +147,7 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
     if (!groupedRows) return [rawRows, isGroupRow];
 
     const flattenedRows: Array<R | GroupRow<R>> = [];
+
     const expandGroup = (
       rows: GroupByDictionary<R> | readonly R[],
       parentId: string | undefined,
@@ -154,8 +158,7 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
         return;
       }
       Object.keys(rows).forEach((groupKey, posInSet, keys) => {
-        // TODO: should users have control over the generated key?
-        const id = parentId !== undefined ? `${parentId}__${groupKey}` : groupKey;
+        const id = groupIdGetter(groupKey, parentId);
         const isExpanded = expandedGroupIds.has(id);
         const { childRows, childGroups, startRowIndex } = rows[groupKey];
 
@@ -185,7 +188,7 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
     function isGroupRow(row: R | GroupRow<R>): row is GroupRow<R> {
       return allGroupRows.has(row);
     }
-  }, [expandedGroupIds, groupedRows, rawRows]);
+  }, [expandedGroupIds, groupedRows, rawRows, groupIdGetter]);
 
   const rowHeight = useMemo(() => {
     if (typeof rawRowHeight === 'function') {
@@ -445,6 +448,10 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
   );
 }
 
+function defaultGroupIdGetter(groupKey: string, parentId: string | undefined) {
+  return parentId !== undefined ? `${parentId}__${groupKey}` : groupKey;
+}
+
 function isReadonlyArray(arr: unknown): arr is readonly unknown[] {
   return Array.isArray(arr);
 }

test/browser/TreeDataGrid.test.tsx

@@ -84,8 +84,13 @@ const onCellPasteSpy = vi.fn(({ row }: { row: Row }) => row);
 function rowKeyGetter(row: Row) {
   return row.id;
 }
-
-function TestGrid({ groupBy }: { groupBy: string[] }) {
+function TestGrid({
+  groupBy,
+  groupIdGetter
+}: {
+  groupBy: string[];
+  groupIdGetter: ((groupKey: string, parentId?: string) => string) | undefined;
+}) {
   const [rows, setRows] = useState(initialRows);
   const [selectedRows, setSelectedRows] = useState((): ReadonlySet<number> => new Set());
   const [expandedGroupIds, setExpandedGroupIds] = useState(
@@ -108,6 +113,7 @@ function TestGrid({ groupBy }: { groupBy: string[] }) {
       onRowsChange={setRows}
       onCellCopy={onCellCopySpy}
       onCellPaste={onCellPasteSpy}
+      groupIdGetter={groupIdGetter}
     />
   );
 }
@@ -118,10 +124,8 @@ function rowGrouper(rows: readonly Row[], columnKey: string) {
   return Object.groupBy(rows, (r) => r[columnKey]) as Record<string, readonly R[]>;
 }
 
-function setup(groupBy: string[]) {
-  onCellCopySpy.mockClear();
-  onCellPasteSpy.mockClear();
-  page.render(<TestGrid groupBy={groupBy} />);
+function setup(groupBy: string[], groupIdGetter?: (groupKey: string, parentId?: string) => string) {
+  page.render(<TestGrid groupBy={groupBy} groupIdGetter={groupIdGetter} />);
 }
 
 function getHeaderCellsContent() {
@@ -155,6 +159,25 @@ test('should group by multiple columns', async () => {
   expect(getRows()).toHaveLength(4);
 });
 
+test('should use groupIdGetter when provided', async () => {
+  const groupIdGetter = vi.fn((groupKey: string, parentId?: string) =>
+    parentId !== undefined ? `${groupKey}#${parentId}` : groupKey
+  );
+  setup(['country', 'year'], groupIdGetter);
+  expect(groupIdGetter).toHaveBeenCalled();
+  expect(getTreeGrid()).toHaveAttribute('aria-rowcount', '13');
+  expect(getHeaderCellsContent()).toStrictEqual(['', 'Country', 'Year', 'Sport', 'Id']);
+  expect(getRows()).toHaveLength(4);
+  groupIdGetter.mockClear();
+  await userEvent.click(page.getByRole('gridcell', { name: 'USA' }));
+  expect(getRows()).toHaveLength(6);
+  expect(groupIdGetter).toHaveBeenCalled();
+  await userEvent.click(page.getByRole('gridcell', { name: 'Canada' }));
+  expect(getRows()).toHaveLength(8);
+  await userEvent.click(page.getByRole('gridcell', { name: '2020' }));
+  expect(getRows()).toHaveLength(9);
+});
+
 test('should ignore duplicate groupBy columns', async () => {
   setup(['year', 'year', 'year']);
   await expect.element(getTreeGrid()).toHaveAttribute('aria-rowcount', '10');