[DataGrid] Fix incorrect panels position when using a toolbar (#13474)

Co-authored-by: Andrew Cherniavskii <[email protected]>
mui · Jul 10, 2024 · 863939d · 863939d
1 parent 38def51
commit 863939d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git a/packages/x-data-grid/src/components/containers/GridRoot.tsx b/packages/x-data-grid/src/components/containers/GridRoot.tsx
@@ -7,7 +7,7 @@ import {
  unstable_capitalize as capitalize,
  unstable_composeClasses as composeClasses,
 } from '@mui/utils';
-import { SxProps, styled } from '@mui/system';
+import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { GridRootStyles } from './GridRootStyles';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -45,15 +45,9 @@ const useUtilityClasses = (ownerState: OwnerState) => {
  return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const GridPanelAnchor = styled('div')({
- position: 'absolute',
- top: `var(--DataGrid-headersTotalHeight)`,
- left: 0,
-});
-
 const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function GridRoot(props, ref) {
  const rootProps = useGridRootProps();
- const { children, className, ...other } = props;
+ const { className, ...other } = props;
  const apiRef = useGridPrivateApiContext();
  const density = useGridSelector(apiRef, gridDensitySelector);
  const rootElementRef = apiRef.current.rootElementRef;
@@ -82,10 +76,7 @@ const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function GridRo
  className={clsx(className, classes.root)}
  ownerState={ownerState}
  {...other}
- >
- <GridPanelAnchor role="presentation" data-id="gridPanelAnchor" />
- {children}
- </GridRootStyles>
+ />
  );
 });
 

diff --git a/packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx b/packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx
@@ -4,6 +4,12 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
 
+const GridPanelAnchor = styled('div')({
+ position: 'absolute',
+ top: `var(--DataGrid-headersTotalHeight)`,
+ left: 0,
+});
+
 type OwnerState = DataGridProcessedProps;
 
 const Element = styled('div', {
@@ -33,6 +39,7 @@ export const GridMainContainer = React.forwardRef<
  tabIndex={-1}
  {...ariaAttributes}
  >
+ <GridPanelAnchor role="presentation" data-id="gridPanelAnchor" />
  {props.children}
  </Element>
  );