material-react-table 0.9.1 → 0.9.4

package/dist/material-react-table.esm.js

@@ -5,6 +5,7 @@ import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, But
 import { rankItem, rankings } from '@tanstack/match-sorter-utils';
 import { useDrop, useDrag, DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { useVirtual } from 'react-virtual';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -1911,7 +1912,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       }, toolbarProps == null ? void 0 : toolbarProps.sx);
     }
   }), React.createElement(MRT_LinearProgressBar, {
-    alignTo: 'top',
+    alignTo: "top",
     tableInstance: tableInstance
   }), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
     tableInstance: tableInstance
@@ -2730,17 +2731,22 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
 
   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,
-      tableId = _tableInstance$option.tableId,
+      enableRowNumbers = _tableInstance$option.enableRowNumbers,
+      enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
       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;
 
@@ -2816,7 +2822,8 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         tableInstance: tableInstance
       });
     },
-    onDoubleClick: handleDoubleClick
+    onDoubleClick: handleDoubleClick,
+    title: (enableRowVirtualization || enableColumnResizing) && !(columnDef != null && columnDef.Cell) && !cell.getIsGrouped() && !columnDef.enableClickToCopy && typeof cell.getValue() === 'string' ? cell.getValue() : ''
   }, tableCellProps, {
     ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
@@ -2825,10 +2832,12 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : undefined,
         cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
+        overflow: 'hidden',
         p: isDensePadding ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
         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',
         transition: 'all 0.2s ease-in-out',
         whiteSpace: isDensePadding ? 'nowrap' : 'normal',
         zIndex: column.getIsPinned() ? 1 : undefined,
@@ -2846,7 +2855,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     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.createElement(MRT_EditCellTextField, {
@@ -2907,6 +2916,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,
@@ -2942,6 +2952,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.createElement(MRT_TableDetailPanel, {
@@ -2951,23 +2962,48 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
 };
 
 var MRT_TableBody = function MRT_TableBody(_ref) {
-  var tableInstance = _ref.tableInstance;
+  var tableInstance = _ref.tableInstance,
+      tableContainerRef = _ref.tableContainerRef;
   var getPaginationRowModel = tableInstance.getPaginationRowModel,
       getPrePaginationRowModel = tableInstance.getPrePaginationRowModel,
+      getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enablePagination = _tableInstance$option.enablePagination,
+      enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
       muiTableBodyProps = _tableInstance$option.muiTableBodyProps;
-  var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
+
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding;
+
   var tableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps({
     tableInstance: tableInstance
   }) : muiTableBodyProps;
-  return React.createElement(TableBody, Object.assign({}, tableBodyProps), rows.map(function (row) {
+  var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
+  var rowVirtualizer = enableRowVirtualization ? useVirtual({
+    overscan: isDensePadding ? 15 : 5,
+    size: rows.length,
+    parentRef: tableContainerRef
+  }) : {};
+  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;
+  return React.createElement(TableBody, Object.assign({}, tableBodyProps), enableRowVirtualization && paddingTop > 0 && React.createElement("tr", null, React.createElement("td", {
+    style: {
+      height: paddingTop + "px"
+    }
+  })), (enableRowVirtualization ? virtualRows : rows).map(function (rowOrVirtualRow, rowIndex) {
+    var row = enableRowVirtualization ? rows[rowOrVirtualRow.index] : rowOrVirtualRow;
     return React.createElement(MRT_TableBodyRow, {
       key: row.id,
       row: row,
+      rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex,
       tableInstance: tableInstance
     });
-  }));
+  }), enableRowVirtualization && paddingBottom > 0 && React.createElement("tr", null, React.createElement("td", {
+    style: {
+      height: paddingBottom + "px"
+    }
+  })));
 };
 
 var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
@@ -3061,8 +3097,11 @@ var MRT_TableFooter = function MRT_TableFooter(_ref) {
 };
 
 var MRT_Table = function MRT_Table(_ref) {
-  var tableInstance = _ref.tableInstance;
+  var tableContainerRef = _ref.tableContainerRef,
+      tableInstance = _ref.tableInstance;
   var _tableInstance$option = tableInstance.options,
+      enableColumnResizing = _tableInstance$option.enableColumnResizing,
+      enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
       enableStickyHeader = _tableInstance$option.enableStickyHeader,
       enableTableFooter = _tableInstance$option.enableTableFooter,
       enableTableHead = _tableInstance$option.enableTableHead,
@@ -3072,9 +3111,14 @@ var MRT_Table = function MRT_Table(_ref) {
   }) : muiTableProps;
   return React.createElement(Table, Object.assign({
     stickyHeader: enableStickyHeader
-  }, tableProps), enableTableHead && React.createElement(MRT_TableHead, {
+  }, tableProps, {
+    sx: _extends({
+      tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : undefined
+    }, tableProps == null ? void 0 : tableProps.sx)
+  }), enableTableHead && React.createElement(MRT_TableHead, {
     tableInstance: tableInstance
   }), React.createElement(MRT_TableBody, {
+    tableContainerRef: tableContainerRef,
     tableInstance: tableInstance
   }), enableTableFooter && React.createElement(MRT_TableFooter, {
     tableInstance: tableInstance
@@ -3087,8 +3131,8 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enableStickyHeader = _tableInstance$option.enableStickyHeader,
-      tableId = _tableInstance$option.tableId,
-      muiTableContainerProps = _tableInstance$option.muiTableContainerProps;
+      muiTableContainerProps = _tableInstance$option.muiTableContainerProps,
+      tableId = _tableInstance$option.tableId;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
@@ -3107,7 +3151,9 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
     var bottomToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB3 = (_document2 = document) == null ? void 0 : (_document2$getElement = _document2.getElementById("mrt-" + tableId + "-toolbar-bottom")) == null ? void 0 : _document2$getElement.offsetHeight) != null ? _document$getElementB3 : 0 : 0;
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
+  var tableContainerRef = React.useRef(null);
   return React.createElement(TableContainer, Object.assign({}, tableContainerProps, {
+    ref: tableContainerRef,
     sx: _extends({
       maxWidth: '100%',
       maxHeight: enableStickyHeader ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 2000px)" : undefined,
@@ -3117,6 +3163,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
       maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
     }
   }), React.createElement(MRT_Table, {
+    tableContainerRef: tableContainerRef,
     tableInstance: tableInstance
   }));
 };
@@ -3430,7 +3477,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,
@@ -3438,9 +3485,9 @@ var MaterialReactTable = (function (_ref) {
       columnResizeMode = _ref$columnResizeMode === void 0 ? 'onEnd' : _ref$columnResizeMode,
       _ref$defaultColumn = _ref.defaultColumn,
       defaultColumn = _ref$defaultColumn === void 0 ? {
-    minSize: 50,
+    minSize: 30,
     maxSize: 1000,
-    size: 150
+    size: 180
   } : _ref$defaultColumn,
       _ref$editingMode = _ref.editingMode,
       editingMode = _ref$editingMode === void 0 ? 'row' : _ref$editingMode,
@@ -3502,6 +3549,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);
@@ -3541,6 +3590,7 @@ var MaterialReactTable = (function (_ref) {
     positionPagination: positionPagination,
     positionToolbarActions: positionToolbarActions,
     positionToolbarAlertBanner: positionToolbarAlertBanner,
+    rowNumberMode: rowNumberMode,
     selectAllMode: selectAllMode
   }, rest));
 });