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

package/node/components/GridRow.js

@@ -26,11 +26,12 @@ var _gridDetailPanelToggleField = require("../constants/gridDetailPanelToggleFie
 var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridColumnGroupsSelector = require("../hooks/features/columnGrouping/gridColumnGroupsSelector");
+var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
 var _utils2 = require("../utils/utils");
 var _GridCell = require("./cell/GridCell");
-var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
+var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -38,12 +39,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 (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
@@ -53,30 +57,30 @@ function EmptyCell({
   if (!width) {
     return null;
   }
-  const style = {
-    width
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: `${_gridClasses.gridClasses.cell} ${_gridClasses.gridClasses.withBorderColor}`,
-    style: style
-  }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
+    role: "presentation",
+    className: (0, _clsx.default)(_gridClasses.gridClasses.cell, _gridClasses.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,
@@ -92,17 +96,19 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const ref = React.useRef(null);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
-  const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnsTotalWidthSelector);
   const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
   const treeDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector);
   const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector);
+  const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
   const editRowsState = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridEditRowsStateSelector);
   const handleRef = (0, _utils.unstable_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) === _gridEditRowModel.GridRowModes.Edit,
@@ -113,9 +119,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
@@ -137,11 +143,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 ((0, _domUtils.isEventTargetInPortal)(event)) {
@@ -197,50 +203,12 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     slotProps,
     disableColumnReorder
   } = rootProps;
-  const CellComponent = slots.cell === _GridCell.GridCellV7 ? _GridCell.GridCellV7 : _GridCell.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__*/(0, _jsxRuntime.jsx)(CellComponent, (0, _extends2.default)({
-      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 = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _extends2.default)({}, apiRef.current.unstable_getRowInternalSizes(rowId)), _useGridSelector.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;
     }
@@ -285,11 +253,88 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
   const randomNumber = (0, _utils2.randomNumberBetween)(10000, 20, 80);
-  const rowNode = apiRef.current.getRowNode(rowId);
+  const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _GridCell.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 _GridCell.PinnedPosition.LEFT:
+        pinnedOffset = columnPositions[indexRelativeToAllColumns];
+        break;
+      case _GridCell.PinnedPosition.RIGHT:
+        pinnedOffset = dimensions.columnsTotalWidth - columnPositions[indexRelativeToAllColumns] - column.computedWidth + scrollbarWidth;
+        break;
+      case _GridCell.PinnedPosition.NONE:
+        pinnedOffset = 0;
+        break;
+    }
+    if (rowNode?.type === 'skeletonRow') {
+      const {
+        width
+      } = cellColSpanInfo.cellProps;
+      const contentWidth = Math.round(randomNumber());
+      return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(slots.cell, (0, _extends2.default)({
+      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, _GridCell.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, _GridCell.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];
@@ -301,35 +346,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__*/(0, _jsxRuntime.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),
@@ -338,18 +357,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__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     ref: handleRef,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
-    className: (0, _clsx.default)(...rowClassNames, classes.root, className, hovered && 'Mui-hovered'),
+    className: (0, _clsx.default)(...rowClassNames, classes.root, className),
     "aria-rowindex": ariaRowIndex,
     "aria-selected": selected,
     style: style
   }, eventHandlers, other, {
-    children: [cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
+    children: [leftCells, cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
       width: emptyCellWidth
+    }), rightCells.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "presentation",
+      style: {
+        flex: '1'
+      }
+    }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
+      pinnedRight: pinnedColumns.right.length > 0
     })]
   }));
 });
@@ -358,7 +386,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.default.number.isRequired,
+  dimensions: _propTypes.default.shape({
+    bottomContainerHeight: _propTypes.default.number.isRequired,
+    columnsTotalWidth: _propTypes.default.number.isRequired,
+    contentSize: _propTypes.default.shape({
+      height: _propTypes.default.number.isRequired,
+      width: _propTypes.default.number.isRequired
+    }).isRequired,
+    hasScrollX: _propTypes.default.bool.isRequired,
+    hasScrollY: _propTypes.default.bool.isRequired,
+    headerHeight: _propTypes.default.number.isRequired,
+    headersTotalHeight: _propTypes.default.number.isRequired,
+    isReady: _propTypes.default.bool.isRequired,
+    leftPinnedWidth: _propTypes.default.number.isRequired,
+    minimumSize: _propTypes.default.shape({
+      height: _propTypes.default.number.isRequired,
+      width: _propTypes.default.number.isRequired
+    }).isRequired,
+    rightPinnedWidth: _propTypes.default.number.isRequired,
+    root: _propTypes.default.shape({
+      height: _propTypes.default.number.isRequired,
+      width: _propTypes.default.number.isRequired
+    }).isRequired,
+    rowHeight: _propTypes.default.number.isRequired,
+    rowWidth: _propTypes.default.number.isRequired,
+    scrollbarSize: _propTypes.default.number.isRequired,
+    topContainerHeight: _propTypes.default.number.isRequired,
+    viewportInnerSize: _propTypes.default.shape({
+      height: _propTypes.default.number.isRequired,
+      width: _propTypes.default.number.isRequired
+    }).isRequired,
+    viewportOuterSize: _propTypes.default.shape({
+      height: _propTypes.default.number.isRequired,
+      width: _propTypes.default.number.isRequired
+    }).isRequired
+  }).isRequired,
   firstColumnToRender: _propTypes.default.number.isRequired,
   /**
    * Determines which cell has focus.
@@ -371,14 +433,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.default.number.isRequired,
-  isLastVisible: _propTypes.default.bool,
+  isFirstVisible: _propTypes.default.bool.isRequired,
+  isLastVisible: _propTypes.default.bool.isRequired,
   isNotVisible: _propTypes.default.bool,
   lastColumnToRender: _propTypes.default.number.isRequired,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
   onMouseEnter: _propTypes.default.func,
   onMouseLeave: _propTypes.default.func,
-  position: _propTypes.default.oneOf(['center', 'left', 'right']).isRequired,
+  pinnedColumns: _propTypes.default.shape({
+    left: _propTypes.default.arrayOf(_propTypes.default.shape({
+      align: _propTypes.default.oneOf(['center', 'left', 'right']),
+      cellClassName: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+      colSpan: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
+      computedWidth: _propTypes.default.number.isRequired,
+      description: _propTypes.default.string,
+      disableColumnMenu: _propTypes.default.bool,
+      disableExport: _propTypes.default.bool,
+      disableReorder: _propTypes.default.bool,
+      editable: _propTypes.default.bool,
+      field: _propTypes.default.string.isRequired,
+      filterable: _propTypes.default.bool,
+      filterOperators: _propTypes.default.arrayOf(_propTypes.default.shape({
+        getApplyFilterFn: _propTypes.default.func.isRequired,
+        getValueAsString: _propTypes.default.func,
+        headerLabel: _propTypes.default.string,
+        InputComponent: _propTypes.default.elementType,
+        InputComponentProps: _propTypes.default.object,
+        label: _propTypes.default.string,
+        requiresFilterValue: _propTypes.default.bool,
+        value: _propTypes.default.string.isRequired
+      })),
+      flex: _propTypes.default.number,
+      getApplyQuickFilterFn: _propTypes.default.func,
+      groupable: _propTypes.default.bool,
+      hasBeenResized: _propTypes.default.bool,
+      headerAlign: _propTypes.default.oneOf(['center', 'left', 'right']),
+      headerClassName: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+      headerName: _propTypes.default.string,
+      hideable: _propTypes.default.bool,
+      hideSortIcons: _propTypes.default.bool,
+      maxWidth: _propTypes.default.number,
+      minWidth: _propTypes.default.number,
+      pinnable: _propTypes.default.bool,
+      preProcessEditCellProps: _propTypes.default.func,
+      renderCell: _propTypes.default.func,
+      renderEditCell: _propTypes.default.func,
+      renderHeader: _propTypes.default.func,
+      resizable: _propTypes.default.bool,
+      sortable: _propTypes.default.bool,
+      sortComparator: _propTypes.default.func,
+      sortingOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['asc', 'desc'])),
+      type: _propTypes.default.oneOf(['actions', 'boolean', 'custom', 'date', 'dateTime', 'number', 'singleSelect', 'string']),
+      valueFormatter: _propTypes.default.func,
+      valueGetter: _propTypes.default.func,
+      valueParser: _propTypes.default.func,
+      valueSetter: _propTypes.default.func,
+      width: _propTypes.default.number
+    })).isRequired,
+    right: _propTypes.default.arrayOf(_propTypes.default.shape({
+      align: _propTypes.default.oneOf(['center', 'left', 'right']),
+      cellClassName: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+      colSpan: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
+      computedWidth: _propTypes.default.number.isRequired,
+      description: _propTypes.default.string,
+      disableColumnMenu: _propTypes.default.bool,
+      disableExport: _propTypes.default.bool,
+      disableReorder: _propTypes.default.bool,
+      editable: _propTypes.default.bool,
+      field: _propTypes.default.string.isRequired,
+      filterable: _propTypes.default.bool,
+      filterOperators: _propTypes.default.arrayOf(_propTypes.default.shape({
+        getApplyFilterFn: _propTypes.default.func.isRequired,
+        getValueAsString: _propTypes.default.func,
+        headerLabel: _propTypes.default.string,
+        InputComponent: _propTypes.default.elementType,
+        InputComponentProps: _propTypes.default.object,
+        label: _propTypes.default.string,
+        requiresFilterValue: _propTypes.default.bool,
+        value: _propTypes.default.string.isRequired
+      })),
+      flex: _propTypes.default.number,
+      getApplyQuickFilterFn: _propTypes.default.func,
+      groupable: _propTypes.default.bool,
+      hasBeenResized: _propTypes.default.bool,
+      headerAlign: _propTypes.default.oneOf(['center', 'left', 'right']),
+      headerClassName: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+      headerName: _propTypes.default.string,
+      hideable: _propTypes.default.bool,
+      hideSortIcons: _propTypes.default.bool,
+      maxWidth: _propTypes.default.number,
+      minWidth: _propTypes.default.number,
+      pinnable: _propTypes.default.bool,
+      preProcessEditCellProps: _propTypes.default.func,
+      renderCell: _propTypes.default.func,
+      renderEditCell: _propTypes.default.func,
+      renderHeader: _propTypes.default.func,
+      resizable: _propTypes.default.bool,
+      sortable: _propTypes.default.bool,
+      sortComparator: _propTypes.default.func,
+      sortingOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['asc', 'desc'])),
+      type: _propTypes.default.oneOf(['actions', 'boolean', 'custom', 'date', 'dateTime', 'number', 'singleSelect', 'string']),
+      valueFormatter: _propTypes.default.func,
+      valueGetter: _propTypes.default.func,
+      valueParser: _propTypes.default.func,
+      valueSetter: _propTypes.default.func,
+      width: _propTypes.default.number
+    })).isRequired
+  }).isRequired,
   renderedColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   row: _propTypes.default.object,
   rowHeight: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,

package/node/components/GridScrollbarFillerCell.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridScrollbarFillerCell = GridScrollbarFillerCell;
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
+var _constants = require("../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const classes = {
+  root: (0, _constants.getDataGridUtilityClass)('scrollbarFiller'),
+  header: (0, _constants.getDataGridUtilityClass)('scrollbarFiller--header'),
+  borderTop: (0, _constants.getDataGridUtilityClass)('scrollbarFiller--borderTop'),
+  pinnedRight: (0, _constants.getDataGridUtilityClass)('scrollbarFiller--pinnedRight')
+};
+const Style = (0, _styles.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__*/(0, _jsxRuntime.jsx)(Style, {
+    role: "presentation",
+    className: (0, _clsx.default)(classes.root, header && classes.header, borderTop && classes.borderTop, pinnedRight && classes.pinnedRight)
+  });
+}