@mui/x-data-grid 7.0.0-alpha.7 → 7.0.0-alpha.9

package/modern/components/GridHeaders.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { fastMemo } from '../utils/fastMemo';
+import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from '../hooks/features/columns/gridColumnsSelector';
+import { gridFilterActiveItemsLookupSelector } from '../hooks/features/filter/gridFilterSelector';
+import { gridSortColumnLookupSelector } from '../hooks/features/sorting/gridSortingSelector';
+import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, gridTabIndexColumnGroupHeaderSelector, gridFocusColumnGroupHeaderSelector } from '../hooks/features/focus/gridFocusStateSelector';
+import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { gridColumnMenuSelector } from '../hooks/features/columnMenu/columnMenuSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+function GridHeaders() {
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
+  const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
+  const columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  const columnGroupHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnGroupHeaderSelector);
+  const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
+  const columnGroupHeaderFocus = useGridSelector(apiRef, gridFocusColumnGroupHeaderSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
+  const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
+  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
+  const columnHeadersRef = React.useRef(null);
+  const columnsContainerRef = React.useRef(null);
+  apiRef.current.register('private', {
+    columnHeadersContainerElementRef: columnsContainerRef,
+    columnHeadersElementRef: columnHeadersRef
+  });
+  return /*#__PURE__*/_jsx(rootProps.slots.columnHeaders, {
+    ref: columnsContainerRef,
+    innerRef: columnHeadersRef,
+    visibleColumns: visibleColumns,
+    filterColumnLookup: filterColumnLookup,
+    sortColumnLookup: sortColumnLookup,
+    columnHeaderTabIndexState: columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
+    columnHeaderFocus: columnHeaderFocus,
+    columnGroupHeaderFocus: columnGroupHeaderFocus,
+    headerGroupingMaxDepth: headerGroupingMaxDepth,
+    columnMenuState: columnMenuState,
+    columnVisibility: columnVisibility,
+    columnGroupsHeaderStructure: columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence: hasOtherElementInTabSequence
+  });
+}
+const MemoizedGridHeaders = fastMemo(GridHeaders);
+export { MemoizedGridHeaders as GridHeaders };

package/modern/components/GridPagination.js

@@ -56,7 +56,7 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
     const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
     if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !isPageSizeIncludedInPageSizeOptions(pageSize)) {
-      console.warn([`MUI: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\``, `Add it to show the pagination select.`].join('\n'));
+      console.warn([`MUI X: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\`.`, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }
   }

package/modern/components/GridPinnedRows.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function GridPinnedRows(_) {
+  return null;
+}

package/modern/components/GridRow.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "hovered", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "pinnedColumns", "dimensions", "firstColumnToRender", "lastColumnToRender", "isFirstVisible", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -10,7 +10,7 @@ import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRo
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
+import { gridColumnPositionsSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
 import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/domUtils';
@@ -20,9 +20,10 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelTogg
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
-import { randomNumberBetween } from '../utils/utils';
-import { GridCellWrapper, GridCellV7 } from './cell/GridCell';
 import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
+import { randomNumberBetween } from '../utils/utils';
+import { PinnedPosition } from './cell/GridCell';
+import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFillerCell';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -30,12 +31,15 @@ const useUtilityClasses = ownerState => {
     editable,
     editing,
     selected,
+    isFirstVisible,
     isLastVisible,
     rowHeight,
     classes
   } = ownerState;
   const slots = {
-    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight']
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight'],
+    pinnedLeft: ['pinnedLeft'],
+    pinnedRight: ['pinnedRight']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -45,30 +49,30 @@ function EmptyCell({
   if (!width) {
     return null;
   }
-  const style = {
-    width
-  };
   return /*#__PURE__*/_jsx("div", {
-    className: `${gridClasses.cell} ${gridClasses.withBorderColor}`,
-    style: style
-  }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
+    role: "presentation",
+    className: clsx(gridClasses.cell, gridClasses.cellEmpty),
+    style: {
+      '--width': `${width}px`
+    }
+  });
 }
 const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
       selected,
-      hovered,
       rowId,
       row,
       index,
       style: styleProp,
-      position,
       rowHeight,
       className,
       visibleColumns,
       renderedColumns,
-      containerWidth,
+      pinnedColumns,
+      dimensions,
       firstColumnToRender,
-      isLastVisible = false,
+      isFirstVisible,
+      isLastVisible,
       focusedCellColumnIndexNotInRange,
       isNotVisible,
       focusedCell,
@@ -84,17 +88,19 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const ref = React.useRef(null);
   const rootProps = useGridRootProps();
   const currentPage = useGridVisibleRows(apiRef, rootProps);
-  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
   const handleRef = useForkRef(ref, refProp);
+  const rowNode = apiRef.current.getRowNode(rowId);
+  const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
   const ownerState = {
     selected,
-    hovered,
+    isFirstVisible,
     isLastVisible,
     classes: rootProps.classes,
     editing: apiRef.current.getRowMode(rowId) === GridRowModes.Edit,
@@ -105,9 +111,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   React.useLayoutEffect(() => {
     if (rowHeight === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight, position);
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
     }
-  }, [apiRef, rowHeight, rowId, position]);
+  }, [apiRef, rowHeight, rowId]);
   React.useLayoutEffect(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the
@@ -129,11 +135,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const resizeObserver = new ResizeObserver(entries => {
       const [entry] = entries;
       const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height, position);
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
     });
     resizeObserver.observe(rootElement);
     return () => resizeObserver.disconnect();
-  }, [apiRef, currentPage.range, index, rowHeight, rowId, position]);
+  }, [apiRef, currentPage.range, index, rowHeight, rowId]);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
     if (isEventTargetInPortal(event)) {
@@ -189,50 +195,12 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     slotProps,
     disableColumnReorder
   } = rootProps;
-  const CellComponent = slots.cell === GridCellV7 ? GridCellV7 : GridCellWrapper;
   const rowReordering = rootProps.rowReordering;
-  const getCell = (column, cellProps) => {
-    // when the cell is a reorder cell we are not allowing to reorder the col
-    // fixes https://github.com/mui/mui-x/issues/11126
-    const isReorderCell = column.field === '__reorder__';
-    const isEditingRows = Object.keys(editRowsState).length > 0;
-    const canReorderColumn = !(disableColumnReorder || column.disableReorder);
-    const canReorderRow = rowReordering && !sortModel.length && treeDepth <= 1 && !isEditingRows;
-    const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
-    const editCellState = editRowsState[rowId]?.[column.field] ?? null;
-    let cellIsNotVisible = false;
-    if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
-      cellIsNotVisible = true;
-    }
-    return /*#__PURE__*/_jsx(CellComponent, _extends({
-      column: column,
-      width: cellProps.width,
-      rowId: rowId,
-      height: rowHeight,
-      showRightBorder: cellProps.showRightBorder,
-      align: column.align || 'left',
-      colIndex: cellProps.indexRelativeToAllColumns,
-      colSpan: cellProps.colSpan,
-      disableDragEvents: disableDragEvents,
-      editCellState: editCellState,
-      isNotVisible: cellIsNotVisible
-    }, slotProps?.cell), column.field);
-  };
   const sizes = useGridSelector(apiRef, () => _extends({}, apiRef.current.unstable_getRowInternalSizes(rowId)), objectShallowCompare);
   let minHeight = rowHeight;
   if (minHeight === 'auto' && sizes) {
-    let numberOfBaseSizes = 0;
-    const maximumSize = Object.entries(sizes).reduce((acc, [key, size]) => {
-      const isBaseHeight = /^base[A-Z]/.test(key);
-      if (!isBaseHeight) {
-        return acc;
-      }
-      numberOfBaseSizes += 1;
-      if (size > acc) {
-        return size;
-      }
-      return acc;
-    }, 0);
+    const numberOfBaseSizes = 1;
+    const maximumSize = sizes.baseCenter ?? 0;
     if (maximumSize > 0 && numberOfBaseSizes > 1) {
       minHeight = maximumSize;
     }
@@ -277,11 +245,88 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
   const randomNumber = randomNumberBetween(10000, 20, 80);
-  const rowNode = apiRef.current.getRowNode(rowId);
+  const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = PinnedPosition.NONE) => {
+    const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
+    if (!cellColSpanInfo || cellColSpanInfo.spannedByColSpan) {
+      return null;
+    }
+    let pinnedOffset;
+    // FIXME: Why is the switch check exhaustiveness not validated with typescript-eslint?
+    // eslint-disable-next-line default-case
+    switch (pinnedPosition) {
+      case PinnedPosition.LEFT:
+        pinnedOffset = columnPositions[indexRelativeToAllColumns];
+        break;
+      case PinnedPosition.RIGHT:
+        pinnedOffset = dimensions.columnsTotalWidth - columnPositions[indexRelativeToAllColumns] - column.computedWidth + scrollbarWidth;
+        break;
+      case PinnedPosition.NONE:
+        pinnedOffset = 0;
+        break;
+    }
+    if (rowNode?.type === 'skeletonRow') {
+      const {
+        width
+      } = cellColSpanInfo.cellProps;
+      const contentWidth = Math.round(randomNumber());
+      return /*#__PURE__*/_jsx(slots.skeletonCell, {
+        width: width,
+        contentWidth: contentWidth,
+        field: column.field,
+        align: column.align
+      }, column.field);
+    }
+    const {
+      colSpan,
+      width
+    } = cellColSpanInfo.cellProps;
+    const editCellState = editRowsState[rowId]?.[column.field] ?? null;
+
+    // when the cell is a reorder cell we are not allowing to reorder the col
+    // fixes https://github.com/mui/mui-x/issues/11126
+    const isReorderCell = column.field === '__reorder__';
+    const isEditingRows = Object.keys(editRowsState).length > 0;
+    const canReorderColumn = !(disableColumnReorder || column.disableReorder);
+    const canReorderRow = rowReordering && !sortModel.length && treeDepth <= 1 && !isEditingRows;
+    const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
+    let cellIsNotVisible = false;
+    if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+      cellIsNotVisible = true;
+    }
+    return /*#__PURE__*/_jsx(slots.cell, _extends({
+      column: column,
+      width: width,
+      rowId: rowId,
+      height: rowHeight,
+      align: column.align || 'left',
+      colIndex: indexRelativeToAllColumns,
+      colSpan: colSpan,
+      disableDragEvents: disableDragEvents,
+      editCellState: editCellState,
+      isNotVisible: cellIsNotVisible
+    }, slotProps?.cell, {
+      pinnedOffset: pinnedOffset,
+      pinnedPosition: pinnedPosition,
+      sectionIndex: indexInSection,
+      sectionLength: sectionLength,
+      gridHasScrollX: dimensions.hasScrollX
+    }), column.field);
+  };
+
+  /* Start of rendering */
+
   if (!rowNode) {
     return null;
   }
-  const rowType = rowNode.type;
+  const leftCells = pinnedColumns.left.map((column, i) => {
+    const indexRelativeToAllColumns = i;
+    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, PinnedPosition.LEFT);
+  });
+  const rightCells = pinnedColumns.right.map((column, i) => {
+    const indexRelativeToAllColumns = visibleColumns.length - pinnedColumns.right.length + i;
+    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.right.length, PinnedPosition.RIGHT);
+  });
+  const middleColumnsLength = visibleColumns.length - pinnedColumns.left.length - pinnedColumns.right.length;
   const cells = [];
   for (let i = 0; i < renderedColumns.length; i += 1) {
     const column = renderedColumns[i];
@@ -293,35 +338,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         indexRelativeToAllColumns -= 1;
       }
     }
-    const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
-    if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
-      if (rowType !== 'skeletonRow') {
-        const {
-          colSpan,
-          width
-        } = cellColSpanInfo.cellProps;
-        const cellProps = {
-          width,
-          colSpan,
-          showRightBorder: rootProps.showCellVerticalBorder,
-          indexRelativeToAllColumns
-        };
-        cells.push(getCell(column, cellProps));
-      } else {
-        const {
-          width
-        } = cellColSpanInfo.cellProps;
-        const contentWidth = Math.round(randomNumber());
-        cells.push( /*#__PURE__*/_jsx(slots.skeletonCell, {
-          width: width,
-          contentWidth: contentWidth,
-          field: column.field,
-          align: column.align
-        }, column.field));
-      }
-    }
+    const indexInSection = indexRelativeToAllColumns - pinnedColumns.left.length;
+    cells.push(getCell(column, indexInSection, indexRelativeToAllColumns, middleColumnsLength));
   }
-  const emptyCellWidth = containerWidth - columnsTotalWidth;
   const eventHandlers = row ? {
     onClick: publishClick,
     onDoubleClick: publish('rowDoubleClick', onDoubleClick),
@@ -330,18 +349,27 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     onMouseOut: publish('rowMouseOut', onMouseOut),
     onMouseOver: publish('rowMouseOver', onMouseOver)
   } : null;
+  const expandedWidth = dimensions.viewportOuterSize.width - dimensions.columnsTotalWidth - scrollbarWidth;
+  const emptyCellWidth = Math.max(0, expandedWidth);
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: handleRef,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
-    className: clsx(...rowClassNames, classes.root, className, hovered && 'Mui-hovered'),
+    className: clsx(...rowClassNames, classes.root, className),
     "aria-rowindex": ariaRowIndex,
     "aria-selected": selected,
     style: style
   }, eventHandlers, other, {
-    children: [cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
+    children: [leftCells, cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
+    }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
+      role: "presentation",
+      style: {
+        flex: '1'
+      }
+    }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/_jsx(ScrollbarFiller, {
+      pinnedRight: pinnedColumns.right.length > 0
     })]
   }));
 });
@@ -350,7 +378,41 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  containerWidth: PropTypes.number.isRequired,
+  dimensions: PropTypes.shape({
+    bottomContainerHeight: PropTypes.number.isRequired,
+    columnsTotalWidth: PropTypes.number.isRequired,
+    contentSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired
+    }).isRequired,
+    hasScrollX: PropTypes.bool.isRequired,
+    hasScrollY: PropTypes.bool.isRequired,
+    headerHeight: PropTypes.number.isRequired,
+    headersTotalHeight: PropTypes.number.isRequired,
+    isReady: PropTypes.bool.isRequired,
+    leftPinnedWidth: PropTypes.number.isRequired,
+    minimumSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired
+    }).isRequired,
+    rightPinnedWidth: PropTypes.number.isRequired,
+    root: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired
+    }).isRequired,
+    rowHeight: PropTypes.number.isRequired,
+    rowWidth: PropTypes.number.isRequired,
+    scrollbarSize: PropTypes.number.isRequired,
+    topContainerHeight: PropTypes.number.isRequired,
+    viewportInnerSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired
+    }).isRequired,
+    viewportOuterSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired
+    }).isRequired
+  }).isRequired,
   firstColumnToRender: PropTypes.number.isRequired,
   /**
    * Determines which cell has focus.
@@ -363,14 +425,114 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
    * If some rows above have expanded children, this index also take those children into account.
    */
   index: PropTypes.number.isRequired,
-  isLastVisible: PropTypes.bool,
+  isFirstVisible: PropTypes.bool.isRequired,
+  isLastVisible: PropTypes.bool.isRequired,
   isNotVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
-  position: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
+  pinnedColumns: PropTypes.shape({
+    left: PropTypes.arrayOf(PropTypes.shape({
+      align: PropTypes.oneOf(['center', 'left', 'right']),
+      cellClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+      colSpan: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
+      computedWidth: PropTypes.number.isRequired,
+      description: PropTypes.string,
+      disableColumnMenu: PropTypes.bool,
+      disableExport: PropTypes.bool,
+      disableReorder: PropTypes.bool,
+      editable: PropTypes.bool,
+      field: PropTypes.string.isRequired,
+      filterable: PropTypes.bool,
+      filterOperators: PropTypes.arrayOf(PropTypes.shape({
+        getApplyFilterFn: PropTypes.func.isRequired,
+        getValueAsString: PropTypes.func,
+        headerLabel: PropTypes.string,
+        InputComponent: PropTypes.elementType,
+        InputComponentProps: PropTypes.object,
+        label: PropTypes.string,
+        requiresFilterValue: PropTypes.bool,
+        value: PropTypes.string.isRequired
+      })),
+      flex: PropTypes.number,
+      getApplyQuickFilterFn: PropTypes.func,
+      groupable: PropTypes.bool,
+      hasBeenResized: PropTypes.bool,
+      headerAlign: PropTypes.oneOf(['center', 'left', 'right']),
+      headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+      headerName: PropTypes.string,
+      hideable: PropTypes.bool,
+      hideSortIcons: PropTypes.bool,
+      maxWidth: PropTypes.number,
+      minWidth: PropTypes.number,
+      pinnable: PropTypes.bool,
+      preProcessEditCellProps: PropTypes.func,
+      renderCell: PropTypes.func,
+      renderEditCell: PropTypes.func,
+      renderHeader: PropTypes.func,
+      resizable: PropTypes.bool,
+      sortable: PropTypes.bool,
+      sortComparator: PropTypes.func,
+      sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])),
+      type: PropTypes.oneOf(['actions', 'boolean', 'custom', 'date', 'dateTime', 'number', 'singleSelect', 'string']),
+      valueFormatter: PropTypes.func,
+      valueGetter: PropTypes.func,
+      valueParser: PropTypes.func,
+      valueSetter: PropTypes.func,
+      width: PropTypes.number
+    })).isRequired,
+    right: PropTypes.arrayOf(PropTypes.shape({
+      align: PropTypes.oneOf(['center', 'left', 'right']),
+      cellClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+      colSpan: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
+      computedWidth: PropTypes.number.isRequired,
+      description: PropTypes.string,
+      disableColumnMenu: PropTypes.bool,
+      disableExport: PropTypes.bool,
+      disableReorder: PropTypes.bool,
+      editable: PropTypes.bool,
+      field: PropTypes.string.isRequired,
+      filterable: PropTypes.bool,
+      filterOperators: PropTypes.arrayOf(PropTypes.shape({
+        getApplyFilterFn: PropTypes.func.isRequired,
+        getValueAsString: PropTypes.func,
+        headerLabel: PropTypes.string,
+        InputComponent: PropTypes.elementType,
+        InputComponentProps: PropTypes.object,
+        label: PropTypes.string,
+        requiresFilterValue: PropTypes.bool,
+        value: PropTypes.string.isRequired
+      })),
+      flex: PropTypes.number,
+      getApplyQuickFilterFn: PropTypes.func,
+      groupable: PropTypes.bool,
+      hasBeenResized: PropTypes.bool,
+      headerAlign: PropTypes.oneOf(['center', 'left', 'right']),
+      headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+      headerName: PropTypes.string,
+      hideable: PropTypes.bool,
+      hideSortIcons: PropTypes.bool,
+      maxWidth: PropTypes.number,
+      minWidth: PropTypes.number,
+      pinnable: PropTypes.bool,
+      preProcessEditCellProps: PropTypes.func,
+      renderCell: PropTypes.func,
+      renderEditCell: PropTypes.func,
+      renderHeader: PropTypes.func,
+      resizable: PropTypes.bool,
+      sortable: PropTypes.bool,
+      sortComparator: PropTypes.func,
+      sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])),
+      type: PropTypes.oneOf(['actions', 'boolean', 'custom', 'date', 'dateTime', 'number', 'singleSelect', 'string']),
+      valueFormatter: PropTypes.func,
+      valueGetter: PropTypes.func,
+      valueParser: PropTypes.func,
+      valueSetter: PropTypes.func,
+      width: PropTypes.number
+    })).isRequired
+  }).isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
   row: PropTypes.object,
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,

package/modern/components/GridScrollbarFillerCell.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { getDataGridUtilityClass as getClassName } from '../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+const classes = {
+  root: getClassName('scrollbarFiller'),
+  header: getClassName('scrollbarFiller--header'),
+  borderTop: getClassName('scrollbarFiller--borderTop'),
+  pinnedRight: getClassName('scrollbarFiller--pinnedRight')
+};
+const Style = styled('div')({
+  minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
+  alignSelf: 'stretch',
+  [`&.${classes.borderTop}`]: {
+    borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+  },
+  [`&.${classes.pinnedRight}`]: {
+    backgroundColor: 'var(--DataGrid-pinnedBackground)'
+  },
+  [`&.${classes.pinnedRight}:not(.${classes.header})`]: {
+    position: 'sticky',
+    right: 0
+  },
+  [`&:not(.${classes.header}):not(.${classes.pinnedRight})`]: {
+    transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
+  }
+});
+function GridScrollbarFillerCell({
+  header,
+  borderTop = true,
+  pinnedRight
+}) {
+  return /*#__PURE__*/_jsx(Style, {
+    role: "presentation",
+    className: clsx(classes.root, header && classes.header, borderTop && classes.borderTop, pinnedRight && classes.pinnedRight)
+  });
+}
+export { GridScrollbarFillerCell };