material-react-table 0.9.3 → 0.9.6

package/dist/MaterialReactTable.d.ts

@@ -1,6 +1,7 @@
 import { ChangeEvent, Dispatch, FC, FocusEvent, MouseEvent, ReactNode, SetStateAction } from 'react';
 import { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import { Cell, Column, ColumnDef, FilterFn, FilterFnOption, Header, HeaderGroup, Overwrite, ReactTableGenerics, Row, TableGenerics, TableInstance, TableState, UseTableInstanceOptions, VisibilityState } from '@tanstack/react-table';
+import { Options as VirtualizerOptions } from 'react-virtual';
 import { MRT_Localization } from './localization';
 import { MRT_Icons } from './icons';
 import { MRT_FILTER_OPTION } from './enums';
@@ -402,8 +403,10 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
             tableInstance: MRT_TableInstance<D>;
         }>;
     }) => ReactNode;
+    rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     tableId?: string;
+    virtualizerProps?: VirtualizerOptions<HTMLDivElement>;
 };
-declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensePaddingToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGrouping, enableHiding, enableMultiRowSelection, enablePagination, enablePinning, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, persistentStateMode, positionActionsColumn, positionPagination, positionGlobalFilter, positionToolbarActions, positionToolbarAlertBanner, selectAllMode, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
+declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensePaddingToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGrouping, enableHiding, enableMultiRowSelection, enablePagination, enablePinning, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, persistentStateMode, positionActionsColumn, positionPagination, positionGlobalFilter, positionToolbarActions, positionToolbarAlertBanner, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
 export default _default;

package/dist/body/MRT_TableBodyCell.d.ts

@@ -3,6 +3,7 @@ import type { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
     cell: MRT_Cell;
     enableHover?: boolean;
+    rowIndex: number;
     tableInstance: MRT_TableInstance;
 }
 export declare const MRT_TableBodyCell: FC<Props>;

package/dist/body/MRT_TableBodyRow.d.ts

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
     row: MRT_Row;
+    rowIndex: number;
     tableInstance: MRT_TableInstance;
 }
 export declare const MRT_TableBodyRow: FC<Props>;

package/dist/material-react-table.cjs.development.js

@@ -6108,7 +6108,7 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
 };
 
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _ref2, _ref3, _columnDef$minSize, _columnDef$header$len, _columnDef$header;
+  var _ref2, _ref3, _columnDef$header$len, _columnDef$header;
 
   var dragRef = _ref.dragRef,
       dropRef = _ref.dropRef,
@@ -6165,6 +6165,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   }, tableCellProps, {
     ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
+      var _columnDef$minSize;
+
       return _extends({
         backgroundColor: column.getIsPinned() && columnDefType !== 'group' ? material.alpha(material.lighten(theme.palette.background["default"], 0.04), 0.95) : 'inherit',
         backgroundImage: 'inherit',
@@ -6181,12 +6183,11 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         verticalAlign: 'text-top',
         zIndex: column.getIsResizing() ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
-      }, tableCellProps == null ? void 0 : tableCellProps.sx);
-    },
-    style: {
-      maxWidth: "min(" + column.getSize() + "px, fit-content)",
-      minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
-      width: header.getSize()
+      }, tableCellProps == null ? void 0 : tableCellProps.sx, {
+        maxWidth: "min(" + column.getSize() + "px, fit-content)",
+        minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
+        width: header.getSize()
+      });
     }
   }), header.isPlaceholder ? null : columnDefType === 'display' ? headerElement : React__default.createElement(material.Box, {
     ref: previewRef,
@@ -6971,22 +6972,23 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
 };
 
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var _columnDef$minSize, _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
+  var _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
 
   var cell = _ref.cell,
       enableHover = _ref.enableHover,
+      rowIndex = _ref.rowIndex,
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       editingMode = _tableInstance$option.editingMode,
       enableClickToCopy = _tableInstance$option.enableClickToCopy,
       enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
-      enableColumnResizing = _tableInstance$option.enableColumnResizing,
       enableEditing = _tableInstance$option.enableEditing,
-      enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
+      enableRowNumbers = _tableInstance$option.enableRowNumbers,
       muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
       onMrtCellClick = _tableInstance$option.onMrtCellClick,
+      rowNumberMode = _tableInstance$option.rowNumberMode,
       tableId = _tableInstance$option.tableId,
       setColumnOrder = tableInstance.setColumnOrder,
       setCurrentEditingCell = tableInstance.setCurrentEditingCell;
@@ -7063,11 +7065,12 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         tableInstance: tableInstance
       });
     },
-    onDoubleClick: handleDoubleClick,
-    title: (enableRowVirtualization || enableColumnResizing) && !(columnDef != null && columnDef.Cell) && !cell.getIsGrouped() && !columnDef.enableClickToCopy && typeof cell.getValue() === 'string' ? cell.getValue() : ''
+    onDoubleClick: handleDoubleClick
   }, tableCellProps, {
     ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
+      var _columnDef$minSize;
+
       return _extends({
         backgroundColor: column.getIsPinned() ? material.alpha(material.lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
         boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : undefined,
@@ -7078,25 +7081,24 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         pl: column.id === 'mrt-expand' ? row.depth + (isDensePadding ? 0.5 : 0.75) + "rem" : undefined,
         position: column.getIsPinned() ? 'sticky' : 'relative',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
-        textOverflow: 'ellipsis',
+        textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
         transition: 'all 0.2s ease-in-out',
         whiteSpace: isDensePadding ? 'nowrap' : 'normal',
         zIndex: column.getIsPinned() ? 1 : undefined,
         '&:hover': {
           backgroundColor: enableHover && enableEditing && editingMode !== 'row' ? theme.palette.mode === 'dark' ? material.lighten(theme.palette.background["default"], 0.13) + " !important" : material.darken(theme.palette.background["default"], 0.07) + " !important" : undefined
         }
-      }, tableCellProps == null ? void 0 : tableCellProps.sx);
-    },
-    style: {
-      maxWidth: "min(" + column.getSize() + "px, fit-content)",
-      minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
-      width: column.getSize()
+      }, tableCellProps == null ? void 0 : tableCellProps.sx, {
+        maxWidth: "min(" + column.getSize() + "px, fit-content)",
+        minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
+        width: column.getSize()
+      });
     }
   }), React__default.createElement(React__default.Fragment, null, isLoading || showSkeletons ? React__default.createElement(material.Skeleton, Object.assign({
     animation: "wave",
     height: 20,
     width: skeletonWidth
-  }, muiTableBodyCellSkeletonProps)) : columnDefType === 'display' ? columnDef.Cell == null ? void 0 : columnDef.Cell({
+  }, muiTableBodyCellSkeletonProps)) : enableRowNumbers && rowNumberMode === 'static' && column.id === 'mrt-row-numbers' ? rowIndex + 1 : columnDefType === 'display' ? columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
     tableInstance: tableInstance
   }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : isEditing ? React__default.createElement(MRT_EditCellTextField, {
@@ -7117,7 +7119,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
   var row = _ref.row,
       tableInstance = _ref.tableInstance;
-  var getVisibleFlatColumns = tableInstance.getVisibleFlatColumns,
+  var getVisibleLeafColumns = tableInstance.getVisibleLeafColumns,
       _tableInstance$option = tableInstance.options,
       muiTableBodyRowProps = _tableInstance$option.muiTableBodyRowProps,
       muiTableDetailPanelProps = _tableInstance$option.muiTableDetailPanelProps,
@@ -7132,7 +7134,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
     tableInstance: tableInstance
   }) : muiTableDetailPanelProps;
   return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(material.TableCell, Object.assign({
-    colSpan: getVisibleFlatColumns().length + 10,
+    colSpan: getVisibleLeafColumns().length,
     onClick: function onClick(event) {
       return onMrtDetailPanelClick == null ? void 0 : onMrtDetailPanelClick({
         event: event,
@@ -7145,7 +7147,8 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
       borderBottom: !row.getIsExpanded() ? 'none' : undefined,
       pb: row.getIsExpanded() ? '1rem' : 0,
       pt: row.getIsExpanded() ? '1rem' : 0,
-      transition: 'all 0.2s ease-in-out'
+      transition: 'all 0.2s ease-in-out',
+      width: tableInstance.getTotalSize() + "px"
     }, tableCellProps == null ? void 0 : tableCellProps.sx)
   }), React__default.createElement(material.Collapse, {
     "in": row.getIsExpanded()
@@ -7157,6 +7160,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
 
 var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   var row = _ref.row,
+      rowIndex = _ref.rowIndex,
       tableInstance = _ref.tableInstance;
   var getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
       _tableInstance$option = tableInstance.options,
@@ -7192,6 +7196,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       cell: cell,
       key: cell.id,
       enableHover: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false,
+      rowIndex: rowIndex,
       tableInstance: tableInstance
     });
   })), renderDetailPanel && !row.getIsGrouped() && React__default.createElement(MRT_TableDetailPanel, {
@@ -7209,7 +7214,8 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
       _tableInstance$option = tableInstance.options,
       enablePagination = _tableInstance$option.enablePagination,
       enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
-      muiTableBodyProps = _tableInstance$option.muiTableBodyProps;
+      muiTableBodyProps = _tableInstance$option.muiTableBodyProps,
+      virtualizerProps = _tableInstance$option.virtualizerProps;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
@@ -7218,11 +7224,11 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
     tableInstance: tableInstance
   }) : muiTableBodyProps;
   var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
-  var rowVirtualizer = enableRowVirtualization ? useVirtual({
+  var rowVirtualizer = enableRowVirtualization ? useVirtual(_extends({
     overscan: isDensePadding ? 15 : 5,
     size: rows.length,
     parentRef: tableContainerRef
-  }) : {};
+  }, virtualizerProps)) : {};
   var virtualRows = rowVirtualizer.virtualItems;
   var paddingTop = (virtualRows == null ? void 0 : virtualRows.length) > 0 ? virtualRows[0].start : 0;
   var paddingBottom = (virtualRows == null ? void 0 : virtualRows.length) > 0 ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end : 0;
@@ -7230,11 +7236,12 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
     style: {
       height: paddingTop + "px"
     }
-  })), (enableRowVirtualization ? virtualRows : rows).map(function (rowOrVirtualRow) {
+  })), (enableRowVirtualization ? virtualRows : rows).map(function (rowOrVirtualRow, rowIndex) {
     var row = enableRowVirtualization ? rows[rowOrVirtualRow.index] : rowOrVirtualRow;
     return React__default.createElement(MRT_TableBodyRow, {
       key: row.id,
       row: row,
+      rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex,
       tableInstance: tableInstance
     });
   }), enableRowVirtualization && paddingBottom > 0 && React__default.createElement("tr", null, React__default.createElement("td", {
@@ -7351,7 +7358,7 @@ var MRT_Table = function MRT_Table(_ref) {
     stickyHeader: enableStickyHeader
   }, tableProps, {
     sx: _extends({
-      tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : undefined
+      tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
     }, tableProps == null ? void 0 : tableProps.sx)
   }), enableTableHead && React__default.createElement(MRT_TableHead, {
     tableInstance: tableInstance
@@ -7715,7 +7722,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionGlobalFilter", "positionToolbarActions", "positionToolbarAlertBanner", "selectAllMode"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionGlobalFilter", "positionToolbarActions", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -7723,7 +7730,7 @@ var MaterialReactTable = (function (_ref) {
       columnResizeMode = _ref$columnResizeMode === void 0 ? 'onEnd' : _ref$columnResizeMode,
       _ref$defaultColumn = _ref.defaultColumn,
       defaultColumn = _ref$defaultColumn === void 0 ? {
-    minSize: 30,
+    minSize: 40,
     maxSize: 1000,
     size: 180
   } : _ref$defaultColumn,
@@ -7787,6 +7794,8 @@ var MaterialReactTable = (function (_ref) {
       positionToolbarActions = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
       _ref$positionToolbarA2 = _ref.positionToolbarAlertBanner,
       positionToolbarAlertBanner = _ref$positionToolbarA2 === void 0 ? 'top' : _ref$positionToolbarA2,
+      _ref$rowNumberMode = _ref.rowNumberMode,
+      rowNumberMode = _ref$rowNumberMode === void 0 ? 'original' : _ref$rowNumberMode,
       _ref$selectAllMode = _ref.selectAllMode,
       selectAllMode = _ref$selectAllMode === void 0 ? 'all' : _ref$selectAllMode,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
@@ -7826,6 +7835,7 @@ var MaterialReactTable = (function (_ref) {
     positionPagination: positionPagination,
     positionToolbarActions: positionToolbarActions,
     positionToolbarAlertBanner: positionToolbarAlertBanner,
+    rowNumberMode: rowNumberMode,
     selectAllMode: selectAllMode
   }, rest));
 });