From bb75a9bb402dce5abcfa0d9a3f6c2561f70076df Mon Sep 17 00:00:00 2001
From: Greg Hogan <me@greghogan.uk>
Date: Fri, 23 Dec 2022 09:19:42 +0000
Subject: [PATCH] Allow for arbitrary data attributes on upper element

- Spread typesafe div props onto the upper element to allow
  for any data-attribute to be added to the top level.
---
 README.md        |  4 ++-
 src/DataGrid.tsx | 84 +++++++++++++++++++++++++-----------------------
 2 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/README.md b/README.md
index 788bb14004..14c905f376 100644
--- a/README.md
+++ b/README.md
@@ -256,7 +256,9 @@ This property sets the text direction of the grid, it defaults to `'ltr'` (left-
 
 ###### `'aria-describedby'?: string | undefined`
 
-###### `'data-testid'?: Maybe<string>`
+###### `'data-*'?: Maybe<string>`
+
+Any arbitrary data-\* attribute can be passed to the outer table wrapper element.
 
 #### `<TextEditor />`
 
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index a810bda3c8..64491c70f9 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -1,66 +1,66 @@
-import { forwardRef, useState, useRef, useImperativeHandle, useCallback, useMemo } from 'react';
+import clsx from 'clsx';
 import type { Key, RefAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
-import clsx from 'clsx';
 
 import {
-  rootClassname,
-  viewportDraggingClassname,
-  focusSinkClassname,
-  rowSelected,
-  rowSelectedWithFrozenCell
-} from './style';
+  DataGridDefaultComponentsProvider,
+  useDefaultComponents
+} from './DataGridDefaultComponentsProvider';
+import DragHandle from './DragHandle';
+import EditCell from './EditCell';
+import { checkboxFormatter as defaultCheckboxFormatter } from './formatters';
+import GroupRowRenderer from './GroupRow';
+import HeaderRow from './HeaderRow';
 import {
-  useLayoutEffect,
-  useGridDimensions,
+  RowSelectionChangeProvider,
   useCalculatedColumns,
-  useViewportColumns,
-  useViewportRows,
+  useGridDimensions,
   useLatestFunc,
-  RowSelectionChangeProvider
+  useLayoutEffect,
+  useViewportColumns,
+  useViewportRows
 } from './hooks';
-import HeaderRow from './HeaderRow';
 import { defaultRowRenderer } from './Row';
-import GroupRowRenderer from './GroupRow';
-import SummaryRow from './SummaryRow';
-import EditCell from './EditCell';
-import DragHandle from './DragHandle';
 import { default as defaultSortStatus } from './sortStatus';
-import { checkboxFormatter as defaultCheckboxFormatter } from './formatters';
 import {
-  DataGridDefaultComponentsProvider,
-  useDefaultComponents
-} from './DataGridDefaultComponentsProvider';
+  focusSinkClassname,
+  rootClassname,
+  rowSelected,
+  rowSelectedWithFrozenCell,
+  viewportDraggingClassname
+} from './style';
+import SummaryRow from './SummaryRow';
 import {
+  abs,
   assertIsValidKeyGetter,
-  getNextSelectedCellPosition,
-  isSelectedCellEditable,
   canExitGrid,
-  isCtrlKeyHeldDown,
-  isDefaultCellInput,
   getColSpan,
-  sign,
-  abs,
+  getNextSelectedCellPosition,
   getSelectedCellColSpan,
+  isCtrlKeyHeldDown,
+  isDefaultCellInput,
+  isSelectedCellEditable,
   renderMeasuringCells,
-  scrollIntoView
+  scrollIntoView,
+  sign
 } from './utils';
 
 import type {
   CalculatedColumn,
+  CellNavigationMode,
   Column,
-  Position,
-  RowsChangeData,
-  SelectRowEvent,
-  FillEvent,
   CopyEvent,
-  PasteEvent,
-  CellNavigationMode,
-  SortColumn,
-  RowHeightArgs,
+  Direction,
+  FillEvent,
   Maybe,
+  PasteEvent,
+  Position,
   Renderers,
-  Direction
+  RowHeightArgs,
+  RowsChangeData,
+  SelectRowEvent,
+  SortColumn
 } from './types';
 
 export interface SelectCellState extends Position {
@@ -181,7 +181,6 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
   rowClass?: Maybe<(row: R) => Maybe<string>>;
   /** @default 'ltr' */
   direction?: Maybe<Direction>;
-  'data-testid'?: Maybe<string>;
 }
 
 /**
@@ -238,7 +237,8 @@ function DataGrid<R, SR, K extends Key>(
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     'aria-describedby': ariaDescribedBy,
-    'data-testid': testId
+    // Arbitrary data attributes, etc.
+    ...rest
   } = props;
 
   /**
@@ -1159,6 +1159,9 @@ function DataGrid<R, SR, K extends Key>(
 
   return (
     <div
+      // Spread arbitrary data attributes onto upper element.
+      // Do this first to avoid overwritting attributes.
+      {...rest}
       role={hasGroups ? 'treegrid' : 'grid'}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
@@ -1198,7 +1201,6 @@ function DataGrid<R, SR, K extends Key>(
       ref={gridRef}
       onScroll={handleScroll}
       onKeyDown={handleKeyDown}
-      data-testid={testId}
     >
       {/* extra div is needed for row navigation in a treegrid */}
       {hasGroups && (