[DataGrid] Remove disableExtendRowFullWidth prop

docs/data/data-grid/column-spanning/ColumnSpanningDerived.js

@@ -173,7 +173,6 @@ export default function ColumnSpanningDerived() {
           },
         }}
         autoHeight
-        disableExtendRowFullWidth
         disableRowSelectionOnClick
         hideFooter
         showCellVerticalBorder

docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx

@@ -182,7 +182,6 @@ export default function ColumnSpanningDerived() {
           },
         }}
         autoHeight
-        disableExtendRowFullWidth
         disableRowSelectionOnClick
         hideFooter
         showCellVerticalBorder

docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx.preview

@@ -7,7 +7,6 @@
     },
   }}
   autoHeight
-  disableExtendRowFullWidth
   disableRowSelectionOnClick
   hideFooter
   showCellVerticalBorder

docs/data/data-grid/column-spanning/ColumnSpanningFunction.js

@@ -103,7 +103,6 @@ export default function ColumnSpanningFunction() {
     >
       <DataGrid
         autoHeight
-        disableExtendRowFullWidth
         disableColumnFilter
         disableRowSelectionOnClick
         hideFooter

docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx

@@ -126,7 +126,6 @@ export default function ColumnSpanningFunction() {
     >
       <DataGrid
         autoHeight
-        disableExtendRowFullWidth
         disableColumnFilter
         disableRowSelectionOnClick
         hideFooter

docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx.preview

@@ -1,6 +1,5 @@
 <DataGrid
   autoHeight
-  disableExtendRowFullWidth
   disableColumnFilter
   disableRowSelectionOnClick
   hideFooter

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

@@ -56,7 +56,6 @@
     "disableColumnResize": { "type": { "name": "bool" } },
     "disableColumnSelector": { "type": { "name": "bool" } },
     "disableDensitySelector": { "type": { "name": "bool" } },
-    "disableExtendRowFullWidth": { "type": { "name": "bool" } },
     "disableMultipleColumnsFiltering": { "type": { "name": "bool" } },
     "disableMultipleColumnsSorting": { "type": { "name": "bool" } },
     "disableMultipleRowSelection": { "type": { "name": "bool" } },

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

@@ -46,7 +46,6 @@
     "disableColumnResize": { "type": { "name": "bool" } },
     "disableColumnSelector": { "type": { "name": "bool" } },
     "disableDensitySelector": { "type": { "name": "bool" } },
-    "disableExtendRowFullWidth": { "type": { "name": "bool" } },
     "disableMultipleColumnsFiltering": { "type": { "name": "bool" } },
     "disableMultipleColumnsSorting": { "type": { "name": "bool" } },
     "disableMultipleRowSelection": { "type": { "name": "bool" } },

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

@@ -30,7 +30,6 @@
     "disableColumnMenu": { "type": { "name": "bool" } },
     "disableColumnSelector": { "type": { "name": "bool" } },
     "disableDensitySelector": { "type": { "name": "bool" } },
-    "disableExtendRowFullWidth": { "type": { "name": "bool" } },
     "disableRowSelectionOnClick": { "type": { "name": "bool" } },
     "disableVirtualization": { "type": { "name": "bool" } },
     "editMode": {

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

@@ -33,7 +33,6 @@
     "disableColumnResize": "If <code>true</code>, resizing columns is disabled.",
     "disableColumnSelector": "If <code>true</code>, hiding/showing columns is disabled.",
     "disableDensitySelector": "If <code>true</code>, the density selector is disabled.",
-    "disableExtendRowFullWidth": "If <code>true</code>, rows will not be extended to fill the full width of the grid container.",
     "disableMultipleColumnsFiltering": "If <code>true</code>, filtering with multiple columns is disabled.",
     "disableMultipleColumnsSorting": "If <code>true</code>, sorting with multiple columns is disabled.",
     "disableMultipleRowSelection": "If <code>true</code>, multiple selection using the Ctrl or CMD key is disabled.",

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

@@ -33,7 +33,6 @@
     "disableColumnResize": "If <code>true</code>, resizing columns is disabled.",
     "disableColumnSelector": "If <code>true</code>, hiding/showing columns is disabled.",
     "disableDensitySelector": "If <code>true</code>, the density selector is disabled.",
-    "disableExtendRowFullWidth": "If <code>true</code>, rows will not be extended to fill the full width of the grid container.",
     "disableMultipleColumnsFiltering": "If <code>true</code>, filtering with multiple columns is disabled.",
     "disableMultipleColumnsSorting": "If <code>true</code>, sorting with multiple columns is disabled.",
     "disableMultipleRowSelection": "If <code>true</code>, multiple selection using the Ctrl or CMD key is disabled.",

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

@@ -33,7 +33,6 @@
     "disableColumnResize": "If <code>true</code>, resizing columns is disabled.",
     "disableColumnSelector": "If <code>true</code>, hiding/showing columns is disabled.",
     "disableDensitySelector": "If <code>true</code>, the density selector is disabled.",
-    "disableExtendRowFullWidth": "If <code>true</code>, rows will not be extended to fill the full width of the grid container.",
     "disableMultipleColumnsFiltering": "If <code>true</code>, filtering with multiple columns is disabled.",
     "disableMultipleColumnsSorting": "If <code>true</code>, sorting with multiple columns is disabled.",
     "disableMultipleRowSelection": "If <code>true</code>, multiple selection using the Ctrl or CMD key is disabled.",

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

@@ -29,7 +29,6 @@
     "disableColumnResize": "If <code>true</code>, resizing columns is disabled.",
     "disableColumnSelector": "If <code>true</code>, hiding/showing columns is disabled.",
     "disableDensitySelector": "If <code>true</code>, the density selector is disabled.",
-    "disableExtendRowFullWidth": "If <code>true</code>, rows will not be extended to fill the full width of the grid container.",
     "disableMultipleColumnsFiltering": "If <code>true</code>, filtering with multiple columns is disabled.",
     "disableMultipleColumnsSorting": "If <code>true</code>, sorting with multiple columns is disabled.",
     "disableMultipleRowSelection": "If <code>true</code>, multiple selection using the Ctrl or CMD key is disabled.",

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

@@ -29,7 +29,6 @@
     "disableColumnResize": "If <code>true</code>, resizing columns is disabled.",
     "disableColumnSelector": "If <code>true</code>, hiding/showing columns is disabled.",
     "disableDensitySelector": "If <code>true</code>, the density selector is disabled.",
-    "disableExtendRowFullWidth": "If <code>true</code>, rows will not be extended to fill the full width of the grid container.",
     "disableMultipleColumnsFiltering": "If <code>true</code>, filtering with multiple columns is disabled.",
     "disableMultipleColumnsSorting": "If <code>true</code>, sorting with multiple columns is disabled.",
     "disableMultipleRowSelection": "If <code>true</code>, multiple selection using the Ctrl or CMD key is disabled.",

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

@@ -29,7 +29,6 @@
     "disableColumnResize": "If <code>true</code>, resizing columns is disabled.",
     "disableColumnSelector": "If <code>true</code>, hiding/showing columns is disabled.",
     "disableDensitySelector": "If <code>true</code>, the density selector is disabled.",
-    "disableExtendRowFullWidth": "If <code>true</code>, rows will not be extended to fill the full width of the grid container.",
     "disableMultipleColumnsFiltering": "If <code>true</code>, filtering with multiple columns is disabled.",
     "disableMultipleColumnsSorting": "If <code>true</code>, sorting with multiple columns is disabled.",
     "disableMultipleRowSelection": "If <code>true</code>, multiple selection using the Ctrl or CMD key is disabled.",

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

@@ -21,7 +21,6 @@
     "disableColumnMenu": "If <code>true</code>, the column menu is disabled.",
     "disableColumnSelector": "If <code>true</code>, hiding/showing columns is disabled.",
     "disableDensitySelector": "If <code>true</code>, the density selector is disabled.",
-    "disableExtendRowFullWidth": "If <code>true</code>, rows will not be extended to fill the full width of the grid container.",
     "disableRowSelectionOnClick": "If <code>true</code>, the selection on click on a row or cell is disabled.",
     "disableVirtualization": "If <code>true</code>, the virtualization is disabled.",
     "editMode": "Controls whether to use the cell or row editing.",

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

@@ -21,7 +21,6 @@
     "disableColumnMenu": "If <code>true</code>, the column menu is disabled.",
     "disableColumnSelector": "If <code>true</code>, hiding/showing columns is disabled.",
     "disableDensitySelector": "If <code>true</code>, the density selector is disabled.",
-    "disableExtendRowFullWidth": "If <code>true</code>, rows will not be extended to fill the full width of the grid container.",
     "disableRowSelectionOnClick": "If <code>true</code>, the selection on click on a row or cell is disabled.",
     "disableVirtualization": "If <code>true</code>, the virtualization is disabled.",
     "editMode": "Controls whether to use the cell or row editing.",

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

@@ -21,7 +21,6 @@
     "disableColumnMenu": "If <code>true</code>, the column menu is disabled.",
     "disableColumnSelector": "If <code>true</code>, hiding/showing columns is disabled.",
     "disableDensitySelector": "If <code>true</code>, the density selector is disabled.",
-    "disableExtendRowFullWidth": "If <code>true</code>, rows will not be extended to fill the full width of the grid container.",
     "disableRowSelectionOnClick": "If <code>true</code>, the selection on click on a row or cell is disabled.",
     "disableVirtualization": "If <code>true</code>, the virtualization is disabled.",
     "editMode": "Controls whether to use the cell or row editing.",

packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -228,11 +228,6 @@ DataGridPremiumRaw.propTypes = {
    * @default false
    */
   disableDensitySelector: PropTypes.bool,
-  /**
-   * If `true`, rows will not be extended to fill the full width of the grid container.
-   * @default false
-   */
-  disableExtendRowFullWidth: PropTypes.bool,
   /**
    * If `true`, filtering with multiple columns is disabled.
    * @default false

packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -204,11 +204,6 @@ DataGridProRaw.propTypes = {
    * @default false
    */
   disableDensitySelector: PropTypes.bool,
-  /**
-   * If `true`, rows will not be extended to fill the full width of the grid container.
-   * @default false
-   */
-  disableExtendRowFullWidth: PropTypes.bool,
   /**
    * If `true`, filtering with multiple columns is disabled.
    * @default false

packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx

@@ -160,11 +160,6 @@ DataGridRaw.propTypes = {
    * @default false
    */
   disableDensitySelector: PropTypes.bool,
-  /**
-   * If `true`, rows will not be extended to fill the full width of the grid container.
-   * @default false
-   */
-  disableExtendRowFullWidth: PropTypes.bool,
   /**
    * If `true`, the selection on click on a row or cell is disabled.
    * @default false

packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts

@@ -38,7 +38,6 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = {
   rowThreshold: 3,
   rowSelection: true,
   density: 'standard',
-  disableExtendRowFullWidth: false,
   disableColumnFilter: false,
   disableColumnMenu: false,
   disableColumnSelector: false,

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

@@ -133,10 +133,6 @@ const GridRow = React.forwardRef<
   const handleRef = useForkRef(ref, refProp);
 
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
-  const { hasScrollX, hasScrollY } = apiRef.current.getRootDimensions() ?? {
-    hasScrollX: false,
-    hasScrollY: false,
-  };
 
   const ownerState = {
     selected,
@@ -454,12 +450,6 @@ const GridRow = React.forwardRef<
     const column = renderedColumns[i];
     const indexRelativeToAllColumns = firstColumnToRender + i;
 
-    const isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
-    const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
-    const showRightBorder = !isLastColumn
-      ? rootProps.showCellVerticalBorder
-      : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
-
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(
       rowId,
       indexRelativeToAllColumns,
@@ -468,7 +458,12 @@ const GridRow = React.forwardRef<
     if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
       if (rowType !== 'skeletonRow') {
         const { colSpan, width } = cellColSpanInfo.cellProps;
-        const cellProps = { width, colSpan, showRightBorder, indexRelativeToAllColumns };
+        const cellProps = {
+          width,
+          colSpan,
+          showRightBorder: rootProps.showCellVerticalBorder,
+          indexRelativeToAllColumns,
+        };
         cells.push(getCell(column, cellProps));
       } else {
         const { width } = cellColSpanInfo.cellProps;

packages/grid/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx

@@ -18,7 +18,6 @@ interface GridColumnGroupHeaderProps {
   fields: string[];
   colIndex: number; // TODO: use this prop to get accessible column group
   isLastColumn: boolean;
-  extendRowFullWidth: boolean;
   depth: number;
   maxDepth: number;
   height: number;
@@ -28,16 +27,14 @@ interface GridColumnGroupHeaderProps {
 
 type OwnerState = {
   groupId: GridColumnGroupHeaderProps['groupId'];
-  showRightBorder: boolean;
   showColumnBorder: boolean;
   isDragging: boolean;
   headerAlign?: GridAlignment;
   classes?: DataGridProcessedProps['classes'];
 };
 
 const useUtilityClasses = (ownerState: OwnerState) => {
-  const { classes, headerAlign, isDragging, showRightBorder, showColumnBorder, groupId } =
-    ownerState;
+  const { classes, headerAlign, isDragging, showColumnBorder, groupId } = ownerState;
 
   const slots = {
     root: [
@@ -46,8 +43,8 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       headerAlign === 'center' && 'columnHeader--alignCenter',
       headerAlign === 'right' && 'columnHeader--alignRight',
       isDragging && 'columnHeader--moving',
-      showRightBorder && 'columnHeader--withRightBorder',
       showColumnBorder && 'columnHeader--showColumnBorder',
+      showColumnBorder && 'columnHeader--withRightBorder',
       'withBorderColor',
       groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup',
     ],
@@ -71,18 +68,13 @@ function GridColumnGroupHeader(props: GridColumnGroupHeaderProps) {
     hasFocus,
     tabIndex,
     isLastColumn,
-    extendRowFullWidth,
   } = props;
 
   const rootProps = useGridRootProps();
 
   const headerCellRef = React.useRef<HTMLDivElement>(null);
   const apiRef = useGridApiContext();
   const columnGroupsLookup = useGridSelector(apiRef, gridColumnGroupsLookupSelector);
-  const { hasScrollX, hasScrollY } = apiRef.current.getRootDimensions() ?? {
-    hasScrollX: false,
-    hasScrollY: false,
-  };
 
   const group: Partial<GridColumnGroup> = groupId ? columnGroupsLookup[groupId] : {};
 
@@ -108,17 +100,11 @@ function GridColumnGroupHeader(props: GridColumnGroupHeaderProps) {
     headerComponent = render(renderParams);
   }
 
-  const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
-  const showRightBorder = !isLastColumn
-    ? rootProps.showColumnVerticalBorder
-    : !removeLastBorderRight && !extendRowFullWidth;
-
   const showColumnBorder = rootProps.showColumnVerticalBorder;
 
   const ownerState = {
     ...props,
     classes: rootProps.classes,
-    showRightBorder,
     showColumnBorder,
     headerAlign,
     depth,

packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx

@@ -21,8 +21,6 @@ interface GridColumnHeaderItemProps {
   headerHeight: number;
   isDragging: boolean;
   isResizing: boolean;
-  isLastColumn: boolean;
-  extendRowFullWidth: boolean;
   sortDirection: GridSortDirection;
   sortIndex?: number;
   filterItemsCounter?: number;
@@ -75,13 +73,11 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
     colIndex,
     headerHeight,
     isResizing,
-    isLastColumn,
     sortDirection,
     sortIndex,
     filterItemsCounter,
     hasFocus,
     tabIndex,
-    extendRowFullWidth,
     disableReorder,
     separatorSide,
   } = props;
@@ -92,10 +88,6 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
   const columnMenuButtonId = useId();
   const iconButtonRef = React.useRef<HTMLButtonElement>(null);
   const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
-  const { hasScrollX, hasScrollY } = apiRef.current.getRootDimensions() ?? {
-    hasScrollX: false,
-    hasScrollY: false,
-  };
 
   const isDraggable = React.useMemo(
     () => !rootProps.disableColumnReorder && !disableReorder && !colDef.disableReorder,
@@ -107,15 +99,10 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
     headerComponent = colDef.renderHeader(apiRef.current.getColumnHeaderParams(colDef.field));
   }
 
-  const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
-  const showRightBorder = !isLastColumn
-    ? rootProps.showColumnVerticalBorder
-    : !removeLastBorderRight && !extendRowFullWidth;
-
   const ownerState = {
     ...props,
     classes: rootProps.classes,
-    showRightBorder,
+    showRightBorder: rootProps.showColumnVerticalBorder,
   };
 
   const classes = useUtilityClasses(ownerState);
@@ -281,12 +268,10 @@ GridColumnHeaderItem.propTypes = {
   colIndex: PropTypes.number.isRequired,
   columnMenuOpen: PropTypes.bool.isRequired,
   disableReorder: PropTypes.bool,
-  extendRowFullWidth: PropTypes.bool.isRequired,
   filterItemsCounter: PropTypes.number,
   hasFocus: PropTypes.bool,
   headerHeight: PropTypes.number.isRequired,
   isDragging: PropTypes.bool.isRequired,
-  isLastColumn: PropTypes.bool.isRequired,
   isResizing: PropTypes.bool.isRequired,
   separatorSide: PropTypes.oneOf(['left', 'right']),
   sortDirection: PropTypes.oneOf(['asc', 'desc']),

packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx

@@ -324,8 +324,6 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
           colDef={colDef}
           colIndex={columnIndex}
           isResizing={resizeCol === colDef.field}
-          isLastColumn={columnIndex === visibleColumns.length - 1}
-          extendRowFullWidth={!rootProps.disableExtendRowFullWidth}
           hasFocus={hasFocus}
           tabIndex={tabIndex}
           {...other}
@@ -447,7 +445,6 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
                   colIndex={colIndex}
                   depth={depthIndex}
                   isLastColumn={colIndex === visibleColumns.length - fields.length}
-                  extendRowFullWidth={!rootProps.disableExtendRowFullWidth}
                   maxDepth={headerToRender.length}
                   height={headerHeight}
                   hasFocus={hasFocus}

packages/grid/x-data-grid/src/models/props/DataGridProps.ts

@@ -162,11 +162,6 @@ export interface DataGridPropsWithDefaultValues {
    * @default "standard"
    */
   density: GridDensity;
-  /**
-   * If `true`, rows will not be extended to fill the full width of the grid container.
-   * @default false
-   */
-  disableExtendRowFullWidth: boolean;
   /**
    * If `true`, column filters are disabled.
    * @default false