[docs] Fix detail panel demo not working well with pinned columns (#1…

…4883)
mui · Oct 9, 2024 · 68d4b75 · 68d4b75
1 parent 59a9bef
commit 68d4b75
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js
@@ -20,16 +20,22 @@ import {
   randomCommodity,
 } from '@mui/x-data-grid-generator';
 
+const getDetailPanelWidth = (gridDimensions) => {
+  return (
+    gridDimensions.viewportInnerSize.width +
+    gridDimensions.leftPinnedWidth +
+    gridDimensions.rightPinnedWidth
+  );
+};
+
 function DetailPanelContent({ row: rowProp }) {
   const apiRef = useGridApiContext();
-  const [width, setWidth] = React.useState(() => {
-    const dimensions = apiRef.current.getRootDimensions();
-    return dimensions.viewportInnerSize.width;
-  });
+  const [width, setWidth] = React.useState(() =>
+    getDetailPanelWidth(apiRef.current.getRootDimensions()),
+  );
 
   const handleViewportInnerSizeChange = React.useCallback(() => {
-    const dimensions = apiRef.current.getRootDimensions();
-    setWidth(dimensions.viewportInnerSize.width);
+    setWidth(getDetailPanelWidth(apiRef.current.getRootDimensions()));
   }, [apiRef]);
 
   React.useEffect(() => {

diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx b/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx
@@ -9,6 +9,7 @@ import {
   useGridApiContext,
   GridRowParams,
   GRID_DETAIL_PANEL_TOGGLE_FIELD,
+  GridDimensions,
 } from '@mui/x-data-grid-pro';
 import {
   randomCreatedDate,
@@ -22,16 +23,22 @@ import {
   randomCommodity,
 } from '@mui/x-data-grid-generator';
 
+const getDetailPanelWidth = (gridDimensions: GridDimensions) => {
+  return (
+    gridDimensions.viewportInnerSize.width +
+    gridDimensions.leftPinnedWidth +
+    gridDimensions.rightPinnedWidth
+  );
+};
+
 function DetailPanelContent({ row: rowProp }: { row: Customer }) {
   const apiRef = useGridApiContext();
-  const [width, setWidth] = React.useState(() => {
-    const dimensions = apiRef.current.getRootDimensions();
-    return dimensions.viewportInnerSize.width;
-  });
+  const [width, setWidth] = React.useState(() =>
+    getDetailPanelWidth(apiRef.current.getRootDimensions()),
+  );
 
   const handleViewportInnerSizeChange = React.useCallback(() => {
-    const dimensions = apiRef.current.getRootDimensions();
-    setWidth(dimensions.viewportInnerSize.width);
+    setWidth(getDetailPanelWidth(apiRef.current.getRootDimensions()));
   }, [apiRef]);
 
   React.useEffect(() => {