TreeDataGrid: type group keys and IDs as strings, and export GroupRow

README.md

@@ -902,7 +902,7 @@ function MyGrid() {
 
 :warning: **Performance:** Define this array outside your component or memoize it with `useMemo`, otherwise all the rows are grouped again on every render.
 
-###### `expandedGroupIds: ReadonlySet<unknown>`
+###### `expandedGroupIds: ReadonlySet<string>`
 
 **Required.** A set of group IDs that are currently expanded. Group IDs are generated by `getGroupId`.
 
@@ -911,7 +911,7 @@ import { useState } from 'react';
 import { TreeDataGrid } from 'react-data-grid';
 
 function MyGrid() {
-  const [expandedGroupIds, setExpandedGroupIds] = useState((): ReadonlySet<unknown> => new Set());
+  const [expandedGroupIds, setExpandedGroupIds] = useState((): ReadonlySet<string> => new Set());
 
   return (
     <TreeDataGrid
@@ -923,7 +923,7 @@ function MyGrid() {
 }
 ```
 
-###### `onExpandedGroupIdsChange: (expandedGroupIds: Set<unknown>) => void`
+###### `onExpandedGroupIdsChange: (expandedGroupIds: Set<string>) => void`
 
 **Required.** Callback triggered when groups are expanded or collapsed.
 
@@ -1715,7 +1715,7 @@ Props passed to group cell content renderers (`column.renderGroupCell`) when usi
 
 ```tsx
 interface RenderGroupCellContentProps<TRow, TSummaryRow = unknown> {
-  groupKey: unknown;
+  groupKey: string;
   column: CalculatedColumn<TRow, TSummaryRow>;
   row: GroupRow<TRow>;
   childRows: readonly TRow[];
@@ -1725,7 +1725,36 @@ interface RenderGroupCellContentProps<TRow, TSummaryRow = unknown> {
 }
 ```
 
-**See also:** [`column.renderGroupCell`](#rendergroupcell-maybeprops-rendergroupcellcontentpropstrow-tsummaryrow--reactnode), [`renderToggleGroup`](#rendertogglegroupr-srprops-rendergroupcellcontentpropsr-sr) function, [`<ToggleGroup />`](#togglegroup-)
+**See also:** [`column.renderGroupCell`](#rendergroupcell-maybeprops-rendergroupcellcontentpropstrow-tsummaryrow--reactnode), [`renderToggleGroup`](#rendertogglegroupr-srprops-rendergroupcellcontentpropsr-sr) function, [`<ToggleGroup />`](#togglegroup-), [`GroupRow`](#grouprowtrow)
+
+#### `GroupRow<TRow>`
+
+Represents a group row in `TreeDataGrid`.
+
+```tsx
+interface GroupRow<TRow> {
+  /** The rows of the group, including the rows of its subgroups */
+  readonly childRows: readonly TRow[];
+  /** The group's ID, returned by `getGroupId` */
+  readonly id: string;
+  /** The ID of the parent group, or `undefined` on the first level */
+  readonly parentId: string | undefined;
+  /** The group's key, returned by `getRowGroupKey` */
+  readonly groupKey: string;
+  /** Whether the group is expanded, i.e., its ID is in `expandedGroupIds` */
+  readonly isExpanded: boolean;
+  /** The nesting level, `0` for the first level */
+  readonly level: number;
+  /** The position of the group among its sibling groups, `0` for the first one */
+  readonly posInSet: number;
+  /** The number of sibling groups, including this one */
+  readonly setSize: number;
+  /** The index of the group row among all the rows, counting every group as expanded */
+  readonly startRowIndex: number;
+}
+```
+
+**See also:** [`RenderGroupCellContentProps`](#rendergroupcellcontentpropstrow-tsummaryrow), [`RowHeightArgs`](#rowheightargstrow), [`<TreeDataGrid />`](#treedatagrid-)
 
 #### `RenderRowProps<TRow, TSummaryRow>`
 
@@ -2122,7 +2151,7 @@ function getRowHeight(args: RowHeightArgs<Row>): number {
 <TreeDataGrid rowHeight={getRowHeight} ... />
 ```
 
-**See also:** [`rowHeight`](#rowheight-maybenumber--args-rowheightargsr--number) prop on `<TreeDataGrid />`
+**See also:** [`rowHeight`](#rowheight-maybenumber--args-rowheightargsr--number) prop on `<TreeDataGrid />`, [`GroupRow`](#grouprowtrow)
 
 #### `SortColumn`
 
@@ -2307,26 +2336,6 @@ type Direction = 'ltr' | 'rtl';
 
 **See also:** [`direction`](#direction-maybeltr--rtl) prop on `<DataGrid />`
 
-#### `GroupRow<TRow>` (internal)
-
-Represents a group row in `TreeDataGrid`. This helper type is not exported; the shape is shown for reference.
-
-```tsx
-interface GroupRow<TRow> {
-  readonly childRows: readonly TRow[];
-  readonly id: string;
-  readonly parentId: unknown;
-  readonly groupKey: unknown;
-  readonly isExpanded: boolean;
-  readonly level: number;
-  readonly posInSet: number;
-  readonly setSize: number;
-  readonly startRowIndex: number;
-}
-```
-
-**See also:** [`RenderGroupCellContentProps`](#rendergroupcellcontentpropstrow-tsummaryrow), [`RowHeightArgs`](#rowheightargstrow), [`<TreeDataGrid />`](#treedatagrid-)
-
 #### `Maybe<T>` (internal)
 
 Utility type for optional values. This helper type is not exported; the shape is shown for reference.

src/GroupCell.tsx

@@ -6,9 +6,9 @@ import type { CalculatedColumn, GroupRow } from './types';
 
 interface GroupCellProps<R, SR> {
   id: string;
-  groupKey: unknown;
+  groupKey: string;
   childRows: readonly R[];
-  toggleGroup: (expandedGroupId: unknown) => void;
+  toggleGroup: (expandedGroupId: string) => void;
   isExpanded: boolean;
   column: CalculatedColumn<R, SR>;
   row: GroupRow<R>;

src/GroupedRow.tsx

@@ -25,7 +25,7 @@ const groupRowClassname = `rdg-group-row ${groupRow}`;
 interface GroupedRowProps<R, SR> extends Omit<BaseRenderRowProps<R, SR>, 'isRowSelectionDisabled'> {
   row: GroupRow<R>;
   groupBy: readonly string[];
-  toggleGroup: (expandedGroupId: unknown) => void;
+  toggleGroup: (expandedGroupId: string) => void;
 }
 
 function GroupedRow<R, SR>({

src/TreeDataGrid.tsx

@@ -33,8 +33,8 @@ export interface TreeDataGridProps<R, SR = unknown, K extends Key = Key> extends
   rowHeight?: Maybe<number | ((args: RowHeightArgs<NoInfer<R>>) => number)>;
   groupBy: readonly string[];
   getRowGroupKey?: Maybe<(row: NoInfer<R>, columnKey: string) => string>;
-  expandedGroupIds: ReadonlySet<unknown>;
-  onExpandedGroupIdsChange: (expandedGroupIds: Set<unknown>) => void;
+  expandedGroupIds: ReadonlySet<string>;
+  onExpandedGroupIdsChange: (expandedGroupIds: Set<string>) => void;
   getGroupId?: Maybe<(groupKey: string, parentId?: string) => string>;
 }
 
@@ -414,7 +414,7 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
     });
   }
 
-  function toggleGroup(groupId: unknown) {
+  function toggleGroup(groupId: string) {
     const newExpandedGroupIds = new Set(expandedGroupIds);
     if (newExpandedGroupIds.has(groupId)) {
       newExpandedGroupIds.delete(groupId);

src/cellRenderers/renderToggleGroup.tsx

@@ -46,7 +46,7 @@ export function ToggleGroup<R, SR>({
 
   return (
     <span className={groupCellContentClassname} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
-      {groupKey as string}
+      {groupKey}
       <svg viewBox="0 0 14 8" width="14" height="8" className={caretClassname} aria-hidden>
         <path d={d} />
       </svg>

src/index.ts

@@ -35,6 +35,7 @@ export type {
   ColumnWidths,
   Direction,
   FillEvent,
+  GroupRow,
   PositionChangeArgs,
   RenderCellContentProps,
   RenderCellProps,

src/types.ts

@@ -165,7 +165,7 @@ export interface RenderSummaryCellContentProps<TSummaryRow, TRow = unknown> {
 }
 
 export interface RenderGroupCellContentProps<TRow, TSummaryRow = unknown> {
-  groupKey: unknown;
+  groupKey: string;
   column: CalculatedColumn<TRow, TSummaryRow>;
   row: GroupRow<TRow>;
   childRows: readonly TRow[];
@@ -361,14 +361,23 @@ export type CellCopyArgs<TRow, TSummaryRow = unknown> = CellCopyPasteArgs<TRow,
 export type CellPasteArgs<TRow, TSummaryRow = unknown> = CellCopyPasteArgs<TRow, TSummaryRow>;
 
 export interface GroupRow<TRow> {
+  /** The rows of the group, including the rows of its subgroups */
   readonly childRows: readonly TRow[];
+  /** The group's ID, returned by `getGroupId` */
   readonly id: string;
-  readonly parentId: unknown;
-  readonly groupKey: unknown;
+  /** The ID of the parent group, or `undefined` on the first level */
+  readonly parentId: string | undefined;
+  /** The group's key, returned by `getRowGroupKey` */
+  readonly groupKey: string;
+  /** Whether the group is expanded, i.e., its ID is in `expandedGroupIds` */
   readonly isExpanded: boolean;
+  /** The nesting level, `0` for the first level */
   readonly level: number;
+  /** The position of the group among its sibling groups, `0` for the first one */
   readonly posInSet: number;
+  /** The number of sibling groups, including this one */
   readonly setSize: number;
+  /** The index of the group row among all the rows, counting every group as expanded */
   readonly startRowIndex: number;
 }
 

test/browser/TreeDataGrid.test.tsx

@@ -96,7 +96,7 @@ function TestGrid({
 }) {
   const [rows, setRows] = useState(initialRows);
   const [selectedRows, setSelectedRows] = useState((): ReadonlySet<number> => new Set());
-  const [expandedGroupIds, setExpandedGroupIds] = useState((): ReadonlySet<unknown> => new Set());
+  const [expandedGroupIds, setExpandedGroupIds] = useState((): ReadonlySet<string> => new Set());
 
   return (
     <TreeDataGrid
@@ -256,7 +256,7 @@ test(
 test('should keep the row keys when an earlier group is expanded, without getRowKey', async () => {
   function Test() {
     const [expandedGroupIds, setExpandedGroupIds] = useState(
-      (): ReadonlySet<unknown> => new Set(['Canada'])
+      (): ReadonlySet<string> => new Set(['Canada'])
     );
 
     return (

website/routes/RowGrouping.tsx

@@ -167,7 +167,7 @@ function RowGrouping() {
   ]);
   const rows = useMemo(() => sortRows(rawRows, selectedOptions), [rawRows, selectedOptions]);
   const [expandedGroupIds, setExpandedGroupIds] = useState(
-    (): ReadonlySet<unknown> =>
+    (): ReadonlySet<string> =>
       new Set(['United States of America', 'United States of America__2015'])
   );