[DataGrid] Remove GridCell borderBottom when last row

docs/pages/api-docs/data-grid/data-grid-pro.json

@@ -354,6 +354,7 @@
       "overlay",
       "virtualScroller",
       "virtualScrollerContent",
+      "virtualScrollerContent--overflowed",
       "virtualScrollerRenderZone",
       "pinnedColumns",
       "pinnedColumns--left",
@@ -364,6 +365,7 @@
       "root",
       "row--editable",
       "row--editing",
+      "row--lastVisible",
       "row",
       "rowCount",
       "scrollArea",

docs/pages/api-docs/data-grid/data-grid.json

@@ -301,6 +301,7 @@
       "overlay",
       "virtualScroller",
       "virtualScrollerContent",
+      "virtualScrollerContent--overflowed",
       "virtualScrollerRenderZone",
       "pinnedColumns",
       "pinnedColumns--left",
@@ -311,6 +312,7 @@
       "root",
       "row--editable",
       "row--editing",
+      "row--lastVisible",
       "row",
       "rowCount",
       "scrollArea",

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -354,6 +354,7 @@
       "overlay",
       "virtualScroller",
       "virtualScrollerContent",
+      "virtualScrollerContent--overflowed",
       "virtualScrollerRenderZone",
       "pinnedColumns",
       "pinnedColumns--left",
@@ -364,6 +365,7 @@
       "root",
       "row--editable",
       "row--editing",
+      "row--lastVisible",
       "row",
       "rowCount",
       "scrollArea",

docs/pages/x/api/data-grid/data-grid.json

@@ -301,6 +301,7 @@
       "overlay",
       "virtualScroller",
       "virtualScrollerContent",
+      "virtualScrollerContent--overflowed",
       "virtualScrollerRenderZone",
       "pinnedColumns",
       "pinnedColumns--left",
@@ -311,6 +312,7 @@
       "root",
       "row--editable",
       "row--editing",
+      "row--lastVisible",
       "row",
       "rowCount",
       "scrollArea",

docs/translations/api-docs/data-grid/data-grid-pro-pt.json

@@ -406,6 +406,11 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the virtualization content"
     },
+    "virtualScrollerContent--overflowed": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the virtualization content",
+      "conditions": "its height is bigger than the virtualization container"
+    },
     "virtualScrollerRenderZone": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the virtualization render zone"
@@ -445,6 +450,10 @@
       "nodeName": "the row element",
       "conditions": "the row is in edit mode"
     },
+    "row--lastVisible": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the last visible row element on every page of the grid"
+    },
     "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
     "rowCount": {
       "description": "Styles applied to {{nodeName}}.\nOnly works when pagination is disabled.",

docs/translations/api-docs/data-grid/data-grid-pro-zh.json

@@ -406,6 +406,11 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the virtualization content"
     },
+    "virtualScrollerContent--overflowed": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the virtualization content",
+      "conditions": "its height is bigger than the virtualization container"
+    },
     "virtualScrollerRenderZone": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the virtualization render zone"
@@ -445,6 +450,10 @@
       "nodeName": "the row element",
       "conditions": "the row is in edit mode"
     },
+    "row--lastVisible": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the last visible row element on every page of the grid"
+    },
     "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
     "rowCount": {
       "description": "Styles applied to {{nodeName}}.\nOnly works when pagination is disabled.",

docs/translations/api-docs/data-grid/data-grid-pro.json

@@ -406,6 +406,11 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the virtualization content"
     },
+    "virtualScrollerContent--overflowed": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the virtualization content",
+      "conditions": "its height is bigger than the virtualization container"
+    },
     "virtualScrollerRenderZone": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the virtualization render zone"
@@ -445,6 +450,10 @@
       "nodeName": "the row element",
       "conditions": "the row is in edit mode"
     },
+    "row--lastVisible": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the last visible row element on every page of the grid"
+    },
     "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
     "rowCount": {
       "description": "Styles applied to {{nodeName}}.\nOnly works when pagination is disabled.",

docs/translations/api-docs/data-grid/data-grid-pt.json

@@ -375,6 +375,11 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the virtualization content"
     },
+    "virtualScrollerContent--overflowed": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the virtualization content",
+      "conditions": "its height is bigger than the virtualization container"
+    },
     "virtualScrollerRenderZone": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the virtualization render zone"
@@ -414,6 +419,10 @@
       "nodeName": "the row element",
       "conditions": "the row is in edit mode"
     },
+    "row--lastVisible": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the last visible row element on every page of the grid"
+    },
     "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
     "rowCount": {
       "description": "Styles applied to {{nodeName}}.\nOnly works when pagination is disabled.",

docs/translations/api-docs/data-grid/data-grid-zh.json

@@ -375,6 +375,11 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the virtualization content"
     },
+    "virtualScrollerContent--overflowed": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the virtualization content",
+      "conditions": "its height is bigger than the virtualization container"
+    },
     "virtualScrollerRenderZone": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the virtualization render zone"
@@ -414,6 +419,10 @@
       "nodeName": "the row element",
       "conditions": "the row is in edit mode"
     },
+    "row--lastVisible": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the last visible row element on every page of the grid"
+    },
     "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
     "rowCount": {
       "description": "Styles applied to {{nodeName}}.\nOnly works when pagination is disabled.",

docs/translations/api-docs/data-grid/data-grid.json

@@ -375,6 +375,11 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the virtualization content"
     },
+    "virtualScrollerContent--overflowed": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the virtualization content",
+      "conditions": "its height is bigger than the virtualization container"
+    },
     "virtualScrollerRenderZone": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the virtualization render zone"
@@ -414,6 +419,10 @@
       "nodeName": "the row element",
       "conditions": "the row is in edit mode"
     },
+    "row--lastVisible": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the last visible row element on every page of the grid"
+    },
     "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
     "rowCount": {
       "description": "Styles applied to {{nodeName}}.\nOnly works when pagination is disabled.",

packages/grid/x-data-grid/src/components/GridRow.tsx

@@ -30,6 +30,7 @@ export interface GridRowProps {
   cellFocus: GridCellIdentifier | null;
   cellTabIndex: GridCellIdentifier | null;
   editRowsState: GridEditRowsModel;
+  isLastVisible?: boolean;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
@@ -39,14 +40,20 @@ export interface GridRowProps {
 type OwnerState = Pick<GridRowProps, 'selected'> & {
   editable: boolean;
   editing: boolean;
+  isLastVisible: boolean;
   classes?: DataGridProcessedProps['classes'];
 };
 
 const useUtilityClasses = (ownerState: OwnerState) => {
-  const { editable, editing, selected, classes } = ownerState;
-
+  const { editable, editing, selected, isLastVisible, classes } = ownerState;
   const slots = {
-    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing'],
+    root: [
+      'row',
+      selected && 'selected',
+      editable && 'row--editable',
+      editing && 'row--editing',
+      isLastVisible && 'row--lastVisible',
+    ],
   };
 
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -79,6 +86,7 @@ function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
     cellFocus,
     cellTabIndex,
     editRowsState,
+    isLastVisible = false,
     onClick,
     onDoubleClick,
     onMouseEnter,
@@ -96,6 +104,7 @@ function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
 
   const ownerState = {
     selected,
+    isLastVisible,
     classes: rootProps.classes,
     editing: apiRef.current.getRowMode(rowId) === GridRowModes.Edit,
     editable: rootProps.editMode === GridEditModes.Row,
@@ -261,6 +270,7 @@ GridRow.propTypes = {
   editRowsState: PropTypes.object.isRequired,
   firstColumnToRender: PropTypes.number.isRequired,
   index: PropTypes.number.isRequired,
+  isLastVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
   row: PropTypes.object.isRequired,

packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled, alpha, lighten, darken } from '@mui/material/styles';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
@@ -24,12 +24,20 @@ const GridFooterContainerRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FooterContainer',
   overridesResolver: (props, styles) => styles.footerContainer,
-})(() => ({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  minHeight: 52, // Match TablePagination min height
-}));
+})(({ theme }) => {
+  const borderColor =
+    theme.palette.mode === 'light'
+      ? lighten(alpha(theme.palette.divider, 1), 0.88)
+      : darken(alpha(theme.palette.divider, 1), 0.68);
+
+  return {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minHeight: 52, // Match TablePagination min height
+    borderTop: `1px solid ${borderColor}`,
+  };
+});
 
 export const GridFooterContainer = React.forwardRef<HTMLDivElement, GridFooterContainerProps>(
   function GridFooterContainer(props: GridFooterContainerProps, ref) {

packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts

@@ -73,7 +73,14 @@ export const GridRootStyles = styled('div', {
     flexDirection: 'column',
     [`&.${gridClasses.autoHeight}`]: {
       height: 'auto',
+      [`& .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]: {
+        borderColor: 'transparent',
+      },
     },
+    [`& .${gridClasses['virtualScrollerContent--overflowed']} .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]:
+      {
+        borderColor: 'transparent',
+      },
     [`& .${gridClasses.columnHeader}, & .${gridClasses.cell}`]: {
       WebkitTapHighlightColor: 'transparent',
       lineHeight: null,

packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx

@@ -6,13 +6,13 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 
-type OwnerState = { classes: DataGridProcessedProps['classes'] };
+type OwnerState = { classes: DataGridProcessedProps['classes']; overflowedContent: boolean };
 
 const useUtilityClasses = (ownerState: OwnerState) => {
-  const { classes } = ownerState;
+  const { classes, overflowedContent } = ownerState;
 
   const slots = {
-    root: ['virtualScrollerContent'],
+    root: ['virtualScrollerContent', overflowedContent && 'virtualScrollerContent--overflowed'],
   };
 
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -30,13 +30,21 @@ const GridVirtualScrollerContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(function GridVirtualScrollerContent(props, ref) {
-  const { className, ...other } = props;
+  const { className, style, ...other } = props;
   const rootProps = useGridRootProps();
-  const ownerState = { classes: rootProps.classes };
+  const ownerState = {
+    classes: rootProps.classes,
+    overflowedContent: !rootProps.autoHeight && style?.minHeight === 'auto',
+  };
   const classes = useUtilityClasses(ownerState);
 
   return (
-    <VirtualScrollerContentRoot ref={ref} className={clsx(classes.root, className)} {...other} />
+    <VirtualScrollerContentRoot
+      ref={ref}
+      className={clsx(classes.root, className)}
+      style={style}
+      {...other}
+    />
   );
 });
 

packages/grid/x-data-grid/src/constants/gridClasses.ts

@@ -273,6 +273,10 @@ export interface GridClasses {
    * Styles applied to the virtualization content.
    */
   virtualScrollerContent: string;
+  /**
+   * Styles applied to the virtualization content when its height is bigger than the virtualization container.
+   */
+  'virtualScrollerContent--overflowed': string;
   /**
    * Styles applied to the virtualization render zone.
    */
@@ -313,6 +317,10 @@ export interface GridClasses {
    * Styles applied to the row element if the row is in edit mode.
    */
   'row--editing': string;
+  /**
+   * Styles applied to the last visible row element on every page of the grid.
+   */
+  'row--lastVisible': string;
   /**
    * Styles applied to the row element.
    */
@@ -442,6 +450,7 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [
   'row--editable',
   'row--editing',
   'row',
+  'row--lastVisible',
   'rowCount',
   'scrollArea--left',
   'scrollArea--right',
@@ -452,6 +461,7 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [
   'toolbarFilterList',
   'virtualScroller',
   'virtualScrollerContent',
+  'virtualScrollerContent--overflowed',
   'virtualScrollerRenderZone',
   'pinnedColumns',
   'pinnedColumns--left',