[DataGridPro] Fix filler rendered for no reason when there are pinned…

… columns (#12440)
mui · Mar 13, 2024 · ae403ed · ae403ed
1 parent 684fca7
commit ae403ed
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
@@ -27,6 +27,7 @@ import {
   getCell,
   getColumnHeaderCell,
   getColumnHeadersTextContent,
+  grid,
 } from 'test/utils/helperFn';
 
 // TODO Move to utils
@@ -231,6 +232,40 @@ describe('<DataGridPro /> - Column pinning', () => {
     expect(borderLeftColor).to.not.equal('rgba(0, 0, 0, 0)');
   });
 
+  // https://github.com/mui/mui-x/issues/12431
+  it('should not render unnecessary filler after the last row', function test() {
+    if (isJSDOM) {
+      // Needs layouting
+      this.skip();
+    }
+
+    const rowHeight = 50;
+    const columns: GridColDef[] = [
+      { field: 'id', headerName: 'ID', width: 120 },
+      { field: 'name', headerName: 'Name', width: 120 },
+    ];
+    const rows = [
+      { id: 1, name: 'Robert Cooper' },
+      { id: 2, name: 'Dora Wallace' },
+      { id: 3, name: 'Howard Dixon' },
+      { id: 4, name: 'Essie Reynolds' },
+    ];
+
+    render(
+      <div style={{ height: 300, width: 300 }}>
+        <DataGridPro
+          rows={rows}
+          columns={columns}
+          initialState={{ pinnedColumns: { left: ['name'] } }}
+          rowHeight={rowHeight}
+          columnHeaderHeight={rowHeight}
+        />
+      </div>,
+    );
+
+    expect(grid('virtualScroller')?.scrollHeight).to.equal((rows.length + 1) * rowHeight);
+  });
+
   describe('props: onPinnedColumnsChange', () => {
     it('should call when a column is pinned', () => {
       const handlePinnedColumnsChange = spy();

diff --git a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
@@ -161,8 +161,10 @@ export function useGridDimensions(
     const topContainerHeight = headersTotalHeight + pinnedRowsHeight.top;
     const bottomContainerHeight = pinnedRowsHeight.bottom;
 
+    const nonPinnedColumnsTotalWidth = columnsTotalWidth - leftPinnedWidth - rightPinnedWidth;
+
     const contentSize = {
-      width: columnsTotalWidth,
+      width: nonPinnedColumnsTotalWidth,
       height: rowsMeta.currentPageTotalHeight,
     };
 
@@ -223,7 +225,7 @@ export function useGridDimensions(
     );
 
     const minimumSize = {
-      width: contentSize.width,
+      width: columnsTotalWidth,
       height: topContainerHeight + contentSize.height + bottomContainerHeight,
     };