[DataGridPro] Keep bottom pinned row at the bottom (#13313)

mui · Jul 9, 2024 · ba6c7a1 · ba6c7a1
1 parent 42195d6
commit ba6c7a1
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 58 deletions.
diff --git a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
@@ -119,12 +119,14 @@ describe('<DataGridPremium /> - Clipboard', () => {
         { id: 2, brand: 'Puma' },
       ];
       render(
-        <DataGridPremium
-          columns={columns}
-          rows={rows}
-          cellSelection
-          sortModel={[{ field: 'brand', sort: 'asc' }]}
-        />,
+        <div style={{ width: 300, height: 300 }}>
+          <DataGridPremium
+            columns={columns}
+            rows={rows}
+            cellSelection
+            sortModel={[{ field: 'brand', sort: 'asc' }]}
+          />
+        </div>,
       );
 
       const cell = getCell(0, 0);
@@ -143,15 +145,17 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
     it('should not escape double quotes when copying multiple cells to clipboard', () => {
       render(
-        <DataGridPremium
-          columns={[{ field: 'value' }]}
-          rows={[
-            { id: 0, value: '1 " 1' },
-            { id: 1, value: '2' },
-          ]}
-          cellSelection
-          disableRowSelectionOnClick
-        />,
+        <div style={{ width: 300, height: 300 }}>
+          <DataGridPremium
+            columns={[{ field: 'value' }]}
+            rows={[
+              { id: 0, value: '1 " 1' },
+              { id: 1, value: '2' },
+            ]}
+            cellSelection
+            disableRowSelectionOnClick
+          />
+        </div>,
       );
 
       const cell = getCell(0, 0);

diff --git a/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx
@@ -105,7 +105,11 @@ describe('<DataGridPro /> - Pagination', () => {
 
   it('should log an error if rowCount is used with client-side pagination', () => {
     expect(() => {
-      render(<DataGridPro rows={[]} columns={[]} paginationMode="client" rowCount={100} />);
+      render(
+        <div style={{ width: 300, height: 300 }}>
+          <DataGridPro rows={[]} columns={[]} paginationMode="client" rowCount={100} />
+        </div>,
+      );
     }).toErrorDev([
       'MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect. `rowCount` is only meant to be used with `paginationMode="server"`.',
     ]);

diff --git a/packages/x-data-grid/src/components/base/GridOverlays.tsx b/packages/x-data-grid/src/components/base/GridOverlays.tsx
@@ -69,7 +69,8 @@ function GridOverlayWrapper(props: React.PropsWithChildren<GridOverlaysProps>) {
 
   let height: React.CSSProperties['height'] =
     dimensions.viewportOuterSize.height -
-    dimensions.headersTotalHeight -
+    dimensions.topContainerHeight -
+    dimensions.bottomContainerHeight -
     (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
 
   if ((rootProps.autoHeight && currentPage.rows.length === 0) || height === 0) {

diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
@@ -106,7 +106,7 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
           </RenderZone>
         </Content>
 
-        {rows.length > 0 && <SpaceFiller />}
+        <SpaceFiller rowsLength={rows.length} />
 
         <BottomContainer>
           <rootProps.slots.pinnedRows position="bottom" virtualScroller={virtualScroller} />

diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
@@ -17,24 +17,29 @@ const Pinned = styled('div')({
   position: 'sticky',
   height: '100%',
   boxSizing: 'border-box',
-  borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+  borderTop: '1px solid var(--rowBorderColor)',
   backgroundColor: 'var(--DataGrid-pinnedBackground)',
 });
 const PinnedLeft = styled(Pinned)({
   left: 0,
-  borderRight: '1px solid var(--DataGrid-rowBorderColor)',
+  borderRight: '1px solid var(--rowBorderColor)',
 });
 const PinnedRight = styled(Pinned)({
   right: 0,
-  borderLeft: '1px solid var(--DataGrid-rowBorderColor)',
+  borderLeft: '1px solid var(--rowBorderColor)',
 });
 
 const Main = styled('div')({
   flexGrow: 1,
-  borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+  borderTop: '1px solid var(--rowBorderColor)',
 });
 
-function GridVirtualScrollerFiller() {
+type Props = {
+  /** The number of rows */
+  rowsLength: number;
+};
+
+function GridVirtualScrollerFiller({ rowsLength }: Props) {
   const apiRef = useGridApiContext();
   const {
     viewportOuterSize,
@@ -54,7 +59,16 @@ function GridVirtualScrollerFiller() {
   }
 
   return (
-    <Filler className={gridClasses.filler} role="presentation" style={{ height }}>
+    <Filler
+      className={gridClasses.filler}
+      role="presentation"
+      style={
+        {
+          height,
+          '--rowBorderColor': rowsLength === 0 ? 'transparent' : 'var(--DataGrid-rowBorderColor)',
+        } as React.CSSProperties
+      }
+    >
       {leftPinnedWidth > 0 && (
         <PinnedLeft
           className={gridClasses['filler--pinnedLeft']}

diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -517,22 +517,13 @@ export const useGridVirtualScroller = () => {
   );
 
   const contentSize = React.useMemo(() => {
-    // In cases where the columns exceed the available width,
-    // the horizontal scrollbar should be shown even when there're no rows.
-    // Keeping 1px as minimum height ensures that the scrollbar will visible if necessary.
-    const height = Math.max(contentHeight, 1);
-
     const size: React.CSSProperties = {
       width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
-      height,
+      height: contentHeight,
     };
 
-    if (rootProps.autoHeight) {
-      if (currentPage.rows.length === 0) {
-        size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
-      } else {
-        size.height = contentHeight;
-      }
+    if (rootProps.autoHeight && currentPage.rows.length === 0) {
+      size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
     }
 
     return size;

diff --git a/packages/x-data-grid/src/tests/DataGrid.test.tsx b/packages/x-data-grid/src/tests/DataGrid.test.tsx
@@ -76,19 +76,21 @@ describe('<DataGrid />', () => {
     ];
     expect(() => {
       render(
-        <DataGrid
-          {...(
-            Object.keys(DATA_GRID_PROPS_DEFAULT_VALUES) as Array<
-              keyof typeof DATA_GRID_PROPS_DEFAULT_VALUES
-            >
-          ).reduce((acc, key) => {
-            // @ts-ignore
-            acc[key] = undefined;
-            return acc;
-          }, {})}
-          rows={rows}
-          columns={columns}
-        />,
+        <div style={{ height: 300, width: 300 }}>
+          <DataGrid
+            {...(
+              Object.keys(DATA_GRID_PROPS_DEFAULT_VALUES) as Array<
+                keyof typeof DATA_GRID_PROPS_DEFAULT_VALUES
+              >
+            ).reduce((acc, key) => {
+              // @ts-ignore
+              acc[key] = undefined;
+              return acc;
+            }, {})}
+            rows={rows}
+            columns={columns}
+          />
+        </div>,
       );
     }).not.toErrorDev();
   });

diff --git a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx
@@ -1174,7 +1174,7 @@ describe('<DataGrid /> - Layout & warnings', () => {
     }
 
     render(
-      <div style={{ height: '100%', width: 400.6 }}>
+      <div style={{ height: 300, width: 400.6 }}>
         <DataGrid rows={[{ id: 1 }]} columns={[{ field: 'id', flex: 1 }]} />
       </div>,
     );
@@ -1213,7 +1213,7 @@ describe('<DataGrid /> - Layout & warnings', () => {
     }
 
     render(
-      <div style={{ height: 'auto', width: 1584 }}>
+      <div style={{ height: 300, width: 1584 }}>
         <DataGrid
           rows={[{ id: 1 }]}
           columns={[

diff --git a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
@@ -730,12 +730,14 @@ describe('<DataGrid /> - Pagination', () => {
     ];
     expect(() => {
       const { setProps } = render(
-        <DataGrid
-          columns={columns}
-          rows={rows}
-          initialState={{ pagination: { paginationModel: { pageSize: 2, page: 1 } } }}
-          pageSizeOptions={[2]}
-        />,
+        <div style={{ width: 300, height: 300 }}>
+          <DataGrid
+            columns={columns}
+            rows={rows}
+            initialState={{ pagination: { paginationModel: { pageSize: 2, page: 1 } } }}
+            pageSizeOptions={[2]}
+          />
+        </div>,
       );
       setProps({ rows: rows.slice(0, 2) });
     }).not.to.throw();

diff --git a/test/karma.conf.js b/test/karma.conf.js
@@ -3,7 +3,7 @@ const webpack = require('webpack');
 
 const CI = Boolean(process.env.CI);
 
-process.env.CHROME_BIN = chromium.executablePath();
+process.env.CHROME_BIN ||= chromium.executablePath();
 
 // Karma configuration
 module.exports = function setKarmaConfig(config) {

diff --git a/test/regressions/data-grid/DataGridPinnedBottomRow.js b/test/regressions/data-grid/DataGridPinnedBottomRow.js
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import {
+  randomCity,
+  randomEmail,
+  randomId,
+  randomInt,
+  randomTraderName,
+  randomUserName,
+} from '@mui/x-data-grid-generator';
+
+const columns = [
+  { field: 'name', headerName: 'Name', width: 150 },
+  { field: 'city', headerName: 'City', width: 150 },
+  { field: 'username', headerName: 'Username' },
+  { field: 'email', headerName: 'Email', width: 200 },
+  { field: 'age', type: 'number', headerName: 'Age' },
+];
+
+const rows = [];
+
+function getRow() {
+  return {
+    id: randomId(),
+    name: randomTraderName(),
+    city: randomCity(),
+    username: randomUserName(),
+    email: randomEmail(),
+    age: randomInt(10, 80),
+  };
+}
+
+const pinnedRows = {
+  top: [getRow()],
+  bottom: [getRow()],
+};
+
+export default function RowPinning() {
+  return (
+    <div style={{ height: 500, width: '100%' }}>
+      <DataGridPro columns={columns} rows={rows} pinnedRows={pinnedRows} />
+    </div>
+  );
+}