[DataGrid] Allow to pass custom props to grid DOM element

mui · Dec 17, 2024 · 3c5736c · 3c5736c
1 parent 761f3ec
commit 3c5736c
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 0 deletions.
diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
@@ -61,6 +61,7 @@ const DataGridPremiumRaw = React.forwardRef(function DataGridPremium<R extends G
         sx={props.sx}
         ref={ref}
         {...props.forwardedProps}
+        {...props.slotProps?.root}
       >
         <GridHeader />
         <GridBody>

diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
@@ -48,6 +48,7 @@ const DataGridProRaw = React.forwardRef(function DataGridPro<R extends GridValid
         sx={props.sx}
         ref={ref}
         {...props.forwardedProps}
+        {...props.slotProps?.root}
       >
         <GridHeader />
         <GridBody>

diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx
@@ -60,6 +60,7 @@ const DataGridRaw = React.forwardRef(function DataGrid<R extends GridValidRowMod
         sx={props.sx}
         ref={ref}
         {...props.forwardedProps}
+        {...props.slotProps?.root}
       >
         <GridHeader />
         <GridBody />

diff --git a/packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx b/packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx
@@ -42,6 +42,7 @@ export const GridMainContainer = React.forwardRef<
       className={props.className}
       tabIndex={-1}
       {...ariaAttributes}
+      {...rootProps.slotProps?.main}
     >
       <GridPanelAnchor role="presentation" data-id="gridPanelAnchor" />
       {props.children}

diff --git a/packages/x-data-grid/src/internals/utils/useProps.ts b/packages/x-data-grid/src/internals/utils/useProps.ts
@@ -7,6 +7,10 @@ function groupForwardedProps<
     [key: string]: any;
   },
 >(props: T): T {
+  if (props.slotProps?.root) {
+    return props;
+  }
+
   const keys = Object.keys(props);
 
   if (!keys.some((key) => key.startsWith('aria-') || key.startsWith('data-'))) {

diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
@@ -33,6 +33,8 @@ import type { GridRowCountProps } from '../components/GridRowCount';
 import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
 
 type DividerProps = {};
+type RootProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
+type MainProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 
 // Overrides for module augmentation
 export interface BaseBadgePropsOverrides {}
@@ -111,6 +113,14 @@ export interface GridSlotProps {
   row: GridRowProps & RowPropsOverrides;
   skeletonCell: GridSkeletonCellProps & SkeletonCellPropsOverrides;
   toolbar: GridToolbarProps & ToolbarPropsOverrides;
+  /**
+   * Props passed to the `.main` (role="grid") element
+   */
+  main: MainProps;
+  /**
+   * Props passed to the `.root` element
+   */
+  root: RootProps;
 }
 
 /**

diff --git a/packages/x-data-grid/src/tests/DataGrid.test.tsx b/packages/x-data-grid/src/tests/DataGrid.test.tsx
@@ -44,6 +44,38 @@ describe('<DataGrid />', () => {
     expect(document.querySelector('[aria-label="Grid one"]')).to.equal(gridRef.current);
   });
 
+  it('should accept aria & data attributes props using `slotProps`', () => {
+    const rootRef = React.createRef<HTMLDivElement>();
+    render(
+      <div style={{ width: 300, height: 500 }}>
+        <DataGrid
+          {...baselineProps}
+          ref={rootRef}
+          columns={[{ field: 'brand' }]}
+          slotProps={{
+            main: {
+              'data-custom-id': 'grid-1',
+              'aria-label': 'Grid one',
+            },
+            root: {
+              'data-custom-id': 'root-1',
+              'aria-label': 'Root one',
+            },
+          }}
+        />
+      </div>,
+    );
+
+    expect(document.querySelector('[data-custom-id="grid-1"]')).to.equal(gridRef.current);
+    expect(document.querySelector('[aria-label="Grid one"]')).to.equal(gridRef.current);
+    expect(document.querySelector('[data-custom-id="root-1"]')).to.equal(rootRef.current);
+    expect(document.querySelector('[aria-label="Root one"]')).to.equal(rootRef.current);
+
+    const mainElement = document.querySelector('[role="grid"]');
+    expect(document.querySelector('[data-custom-id="grid-1"]')).to.equal(mainElement);
+    expect(document.querySelector('[aria-label="Grid one"]')).to.equal(mainElement);
+  });
+
   it('should not fail when row have IDs match Object prototype keys (constructor, hasOwnProperty, etc)', () => {
     const rows = [
       { id: 'a', col1: 'Hello', col2: 'World' },