From 6231adc2591188ba18b3df33f04e68540b8bba0c Mon Sep 17 00:00:00 2001
From: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Date: Fri, 7 Nov 2025 17:19:54 +0000
Subject: [PATCH 1/2] Update deps (#3909)

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 847043f1fc..c377de8a22 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.27.1",
-    "@biomejs/biome": "2.3.2",
+    "@biomejs/biome": "2.3.4",
     "@eslint-react/eslint-plugin": "^2.0.2",
     "@eslint/markdown": "^7.3.0",
     "@faker-js/faker": "^10.0.0",
@@ -69,8 +69,8 @@
     "@vitest/browser-playwright": "^4.0.1",
     "@vitest/coverage-istanbul": "^4.0.1",
     "@vitest/eslint-plugin": "^1.3.4",
-    "@wyw-in-js/rollup": "^0.7.0",
-    "@wyw-in-js/vite": "^0.7.0",
+    "@wyw-in-js/rollup": "^0.8.0",
+    "@wyw-in-js/vite": "^0.8.0",
     "clsx": "^2.1.1",
     "eslint": "^9.36.0",
     "eslint-plugin-jest-dom": "^5.5.0",

From 908eb52d085ea9d6add3c65d860d7c8c86e603cb Mon Sep 17 00:00:00 2001
From: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Date: Fri, 7 Nov 2025 18:02:14 +0000
Subject: [PATCH 2/2] Expand TreeDataGrid docs (#3910)

* Expand TreeDataGrid docs

* Caveats

* add caveat
---
 README.md | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 109 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index f1d8cdb50e..c978c9765e 100644
--- a/README.md
+++ b/README.md
@@ -596,20 +596,124 @@ test('grid', async () => {
 
 #### `<TreeDataGrid />`
 
-`TreeDataGrid` is component built on top of `DataGrid` to add row grouping. This implements the [Treegrid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/). At the moment `TreeDataGrid` does not support `onFill` and `isRowSelectionDisabled` props
+`TreeDataGrid` is a component built on top of `DataGrid` to add hierarchical row grouping. This implements the [Treegrid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/).
+
+**How it works:**
+
+1. The `groupBy` prop specifies which columns should be used for grouping
+2. The `rowGrouper` function groups rows by the specified column keys
+3. Group rows are rendered with expand/collapse toggles
+4. Child rows are nested under their parent groups
+5. Groups can be expanded/collapsed by clicking the toggle or using keyboard navigation (<kbd>←</kbd>, <kbd>→</kbd>)
+
+**Keyboard Navigation:**
+
+- <kbd>→</kbd> (Right Arrow): Expand a collapsed group row when focused
+- <kbd>←</kbd> (Left Arrow): Collapse an expanded group row when focused, or navigate to parent group
+
+**Unsupported Props:**
+
+The following `DataGrid` props are not supported in `TreeDataGrid`:
+
+- `onFill` - Drag-fill is disabled for tree grids
+- `isRowSelectionDisabled` - Row selection disabling is not available
+
+**Caveats:**
+
+- Group columns cannot be rendered under one column
+- Group columns are automatically frozen and cannot be unfrozen
+- Cell copy/paste does not work on group rows
 
 ##### TreeDataGridProps
 
-###### `groupBy?: Maybe<readonly string[]>`
+All [`DataGridProps`](#datagridprops) are supported except those listed above, plus the following additional props:
+
+###### `groupBy: readonly string[]`
+
+**Required.** An array of column keys to group by. The order determines the grouping hierarchy (first key is the top level, second key is nested under the first, etc.).
+
+```tsx
+import { TreeDataGrid, type Column } from 'react-data-grid';
+
+interface Row {
+  id: number;
+  country: string;
+  city: string;
+  name: string;
+}
+
+const columns: readonly Column<Row>[] = [
+  { key: 'country', name: 'Country' },
+  { key: 'city', name: 'City' },
+  { key: 'name', name: 'Name' }
+];
 
-###### `rowGrouper?: Maybe<(rows: readonly R[], columnKey: string) => Record<string, readonly R[]>>`
+function MyGrid() {
+  return (
+    <TreeDataGrid
+      columns={columns}
+      rows={rows}
+      groupBy={['country', 'city']}
+      // ... other props
+    />
+  );
+}
+```
 
-###### `expandedGroupIds?: Maybe<ReadonlySet<unknown>>`
+###### `rowGrouper: (rows: readonly R[], columnKey: string) => Record<string, readonly R[]>`
 
-###### `onExpandedGroupIdsChange?: Maybe<(expandedGroupIds: Set<unknown>) => void>`
+**Required.** A function that groups rows by the specified column key. Returns an object where keys are the group values and values are arrays of rows belonging to that group.
+
+```tsx
+function rowGrouper(rows: Row[], columnKey: string) {
+  return Object.groupBy(rows, (row) => row[columnKey]);
+}
+```
+
+###### `expandedGroupIds: ReadonlySet<unknown>`
+
+**Required.** A set of group IDs that are currently expanded. Group IDs are generated by `groupIdGetter`.
+
+```tsx
+import { useState } from 'react';
+import { TreeDataGrid } from 'react-data-grid';
+
+function MyGrid() {
+  const [expandedGroupIds, setExpandedGroupIds] = useState((): ReadonlySet<unknown> => new Set());
+
+  return (
+    <TreeDataGrid
+      expandedGroupIds={expandedGroupIds}
+      onExpandedGroupIdsChange={setExpandedGroupIds}
+      // ... other props
+    />
+  );
+}
+```
+
+###### `onExpandedGroupIdsChange: (expandedGroupIds: Set<unknown>) => void`
+
+**Required.** Callback triggered when groups are expanded or collapsed.
 
 ###### `groupIdGetter?: Maybe<(groupKey: string, parentId?: string) => string>`
 
+Function to generate unique IDs for group rows. If not provided, a default implementation is used that concatenates parent and group keys with `__`.
+
+###### `rowHeight?: Maybe<number | ((args: RowHeightArgs<R>) => number)>`
+
+**Note:** Unlike `DataGrid`, the `rowHeight` function receives [`RowHeightArgs<R>`](#rowheightargstrow) which includes a `type` property to distinguish between regular rows and group rows:
+
+```tsx
+function getRowHeight(args: RowHeightArgs<Row>): number {
+  if (args.type === 'GROUP') {
+    return 50; // Custom height for group rows
+  }
+  return 35; // Height for regular rows
+}
+
+<TreeDataGrid rowHeight={getRowHeight} ... />
+```
+
 #### `<Row />`
 
 The default row component. Can be wrapped via the `renderers.renderRow` prop.