[DataGrid] Fix showColumnVerticalBorder prop (#16715)

mui · Feb 25, 2025 · 5269b07 · 5269b07
1 parent 98e2985
commit 5269b07
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 3 deletions.
diff --git a/packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -142,7 +142,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
         pinnedPosition,
         indexInSection,
         sectionLength,
-        rootProps.showCellVerticalBorder,
+        rootProps.showColumnVerticalBorder,
         gridHasFiller,
       );
 

diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -259,7 +259,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
         pinnedPosition,
         indexInSection,
         sectionLength,
-        rootProps.showCellVerticalBorder,
+        rootProps.showColumnVerticalBorder,
         gridHasFiller,
       );
 
@@ -443,7 +443,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
             pinnedPosition,
             indexInSection,
             visibleColumnGroupHeader.length,
-            rootProps.showCellVerticalBorder,
+            rootProps.showColumnVerticalBorder,
             gridHasFiller,
           )}
         />

diff --git a/test/regressions/data-grid/DataGridBorderedCells.js b/test/regressions/data-grid/DataGridBorderedCells.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { randomTraderName, randomEmail } from '@mui/x-data-grid-generator';
+
+const columns = [
+  { field: 'name', headerName: 'Name', width: 160 },
+  { field: 'email', headerName: 'Email', width: 200 },
+  { field: 'age', headerName: 'Age', type: 'number' },
+];
+
+const rows = [
+  {
+    id: 1,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 25,
+  },
+];
+
+export default function DataGridBordered() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro rows={rows} columns={columns} showCellVerticalBorder />
+    </div>
+  );
+}
diff --git a/test/regressions/data-grid/DataGridBorderedColumns.js b/test/regressions/data-grid/DataGridBorderedColumns.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { randomTraderName, randomEmail } from '@mui/x-data-grid-generator';
+
+const columns = [
+  { field: 'name', headerName: 'Name', width: 160 },
+  { field: 'email', headerName: 'Email', width: 200 },
+  { field: 'age', headerName: 'Age', type: 'number' },
+];
+
+const rows = [
+  {
+    id: 1,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 25,
+  },
+];
+
+export default function DataGridBordered() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro rows={rows} columns={columns} showColumnVerticalBorder />
+    </div>
+  );
+}