material-react-table 0.12.0 → 0.13.0

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

@@ -1,5 +1,5 @@
 import React, { useMemo, forwardRef, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
-import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityMedium, DensitySmall, KeyboardDoubleArrowDown, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
+import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { createTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useTableInstance } from '@tanstack/react-table';
 import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
 import { rankItem, rankings } from '@tanstack/match-sorter-utils';
@@ -101,7 +101,7 @@ var MRT_DefaultLocalization_EN = {
   sortedByColumnDesc: 'Sorted by {column} descending',
   thenBy: ', then by ',
   to: 'to',
-  toggleDensePadding: 'Toggle dense padding',
+  toggleDensity: 'Toggle density',
   toggleFullScreen: 'Toggle full screen',
   toggleSelectAll: 'Toggle select all',
   toggleSelectRow: 'Toggle select row',
@@ -117,9 +117,9 @@ var MRT_Default_Icons = {
   CheckBoxIcon: CheckBox,
   ClearAllIcon: ClearAll,
   CloseIcon: Close,
+  DensityLargeIcon: DensityLarge,
   DensityMediumIcon: DensityMedium,
   DensitySmallIcon: DensitySmall,
-  KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDown,
   DragHandleIcon: DragHandle,
   DynamicFeedIcon: DynamicFeed,
   EditIcon: Edit,
@@ -131,6 +131,7 @@ var MRT_Default_Icons = {
   FilterListOffIcon: FilterListOff,
   FullscreenExitIcon: FullscreenExit,
   FullscreenIcon: Fullscreen,
+  KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDown,
   MoreHorizIcon: MoreHoriz,
   MoreVertIcon: MoreVert,
   PushPinIcon: PushPin,
@@ -156,7 +157,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
       toggleAllRowsExpanded = instance.toggleAllRowsExpanded;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   return React.createElement(Tooltip, {
     arrow: true,
@@ -170,8 +171,8 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
       return toggleAllRowsExpanded(!getIsAllRowsExpanded());
     },
     sx: {
-      height: isDensePadding ? '1.75rem' : '2.25rem',
-      width: isDensePadding ? '1.75rem' : '2.25rem'
+      height: density === 'compact' ? '1.75rem' : '2.25rem',
+      width: density === 'compact' ? '1.75rem' : '2.25rem'
     }
   }, React.createElement(KeyboardDoubleArrowDownIcon, {
     style: {
@@ -192,7 +193,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       renderDetailPanel = _instance$options.renderDetailPanel;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var handleToggleExpand = function handleToggleExpand(event) {
     row.toggleExpanded();
@@ -213,8 +214,8 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     disabled: !row.getCanExpand() && !renderDetailPanel,
     onClick: handleToggleExpand,
     sx: {
-      height: isDensePadding ? '1.75rem' : '2.25rem',
-      width: isDensePadding ? '1.75rem' : '2.25rem'
+      height: density === 'compact' ? '1.75rem' : '2.25rem',
+      width: density === 'compact' ? '1.75rem' : '2.25rem'
     }
   }, React.createElement(ExpandMoreIcon, {
     style: {
@@ -352,7 +353,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
       setCurrentGlobalFilterFn = instance.setCurrentGlobalFilterFn;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding,
+      density = _getState.density,
       currentFilterFns = _getState.currentFilterFns,
       currentGlobalFilterFn = _getState.currentGlobalFilterFn;
 
@@ -459,7 +460,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
     },
     open: !!anchorEl,
     MenuListProps: {
-      dense: isDensePadding
+      dense: density === 'compact'
     }
   }, filterOptions.map(function (_ref4, index) {
     var option = _ref4.option,
@@ -755,7 +756,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       enableColumnOrdering = _instance$options.enableColumnOrdering;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding,
+      density = _getState.density,
       columnOrder = _getState.columnOrder,
       columnPinning = _getState.columnPinning;
 
@@ -789,7 +790,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       return setAnchorEl(null);
     },
     MenuListProps: {
-      dense: isDensePadding
+      dense: density === 'compact'
     }
   }, React.createElement(Box, {
     sx: {
@@ -873,7 +874,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   var _getState = getState(),
       columnSizing = _getState.columnSizing,
       columnVisibility = _getState.columnVisibility,
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var _useState = useState(null),
       filterMenuAnchorEl = _useState[0],
@@ -959,7 +960,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       return setAnchorEl(null);
     },
     MenuListProps: {
-      dense: isDensePadding
+      dense: density === 'compact'
     }
   }, enableSorting && column.getCanSort() && [React.createElement(MenuItem, {
     disabled: !column.getIsSorted(),
@@ -1111,7 +1112,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
       renderRowActionMenuItems = _instance$options.renderRowActionMenuItems;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   return React.createElement(Menu, {
     anchorEl: anchorEl,
@@ -1120,7 +1121,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
       return setAnchorEl(null);
     },
     MenuListProps: {
-      dense: isDensePadding
+      dense: density === 'compact'
     }
   }, enableEditing && React.createElement(MenuItem, {
     onClick: handleEdit,
@@ -1276,7 +1277,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       selectAllMode = _instance$options.selectAllMode;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var handleSelectChange = function handleSelectChange(event) {
     if (selectAll) {
@@ -1321,11 +1322,11 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
     },
     onChange: handleSelectChange,
-    size: isDensePadding ? 'small' : 'medium'
+    size: density === 'compact' ? 'small' : 'medium'
   }, checkboxProps, {
     sx: _extends({
-      height: isDensePadding ? '1.75rem' : '2.25rem',
-      width: isDensePadding ? '1.75rem' : '2.25rem'
+      height: density === 'compact' ? '1.75rem' : '2.25rem',
+      width: density === 'compact' ? '1.75rem' : '2.25rem'
     }, checkboxProps == null ? void 0 : checkboxProps.sx)
   })));
 };
@@ -1403,31 +1404,33 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
   var getState = instance.getState,
       _instance$options = instance.options,
       _instance$options$ico = _instance$options.icons,
+      DensityLargeIcon = _instance$options$ico.DensityLargeIcon,
       DensityMediumIcon = _instance$options$ico.DensityMediumIcon,
       DensitySmallIcon = _instance$options$ico.DensitySmallIcon,
       localization = _instance$options.localization,
-      onIsDensePaddingChanged = _instance$options.onIsDensePaddingChanged,
-      setIsDensePadding = instance.setIsDensePadding;
+      onDensityChanged = _instance$options.onDensityChanged,
+      setDensity = instance.setDensity;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var handleToggleDensePadding = function handleToggleDensePadding(event) {
-    onIsDensePaddingChanged == null ? void 0 : onIsDensePaddingChanged({
+    var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
+    onDensityChanged == null ? void 0 : onDensityChanged({
       event: event,
-      isDensePadding: !isDensePadding,
+      density: nextDensity,
       instance: instance
     });
-    setIsDensePadding(!isDensePadding);
+    setDensity(nextDensity);
   };
 
   return React.createElement(Tooltip, {
     arrow: true,
-    title: localization.toggleDensePadding
+    title: localization.toggleDensity
   }, React.createElement(IconButton, Object.assign({
-    "aria-label": localization.toggleDensePadding,
+    "aria-label": localization.toggleDensity,
     onClick: handleToggleDensePadding
-  }, rest), isDensePadding ? React.createElement(DensitySmallIcon, null) : React.createElement(DensityMediumIcon, null)));
+  }, rest), density === 'compact' ? React.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React.createElement(DensityMediumIcon, null) : React.createElement(DensityLargeIcon, null)));
 };
 
 var _excluded$3 = ["instance"];
@@ -2402,7 +2405,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       muiTableHeadCellProps = _instance$options.muiTableHeadCellProps;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var column = header.column;
   var columnDef = column.columnDef,
@@ -2451,10 +2454,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         height: '100%',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
         overflow: 'visible',
-        p: isDensePadding ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
+        p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
         pb: columnDefType === 'display' ? 0 : undefined,
         position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
-        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.75rem',
+        pt: columnDefType !== 'data' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         verticalAlign: 'text-top',
@@ -2781,7 +2784,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       columnOrder = _getState.columnOrder,
       currentEditingCell = _getState.currentEditingCell,
       currentEditingRow = _getState.currentEditingRow,
-      isDensePadding = _getState.isDensePadding,
+      density = _getState.density,
       isLoading = _getState.isLoading,
       showSkeletons = _getState.showSkeletons;
 
@@ -2861,13 +2864,13 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         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,
+        p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
+        pl: column.id === 'mrt-expand' ? row.depth + (density === 'compact' ? 0.5 : density === 'comfortable' ? 0.75 : 1.25) + "rem" : undefined,
         position: column.getIsPinned() ? 'sticky' : 'relative',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
         transition: 'all 0.2s ease-in-out',
-        whiteSpace: isDensePadding ? 'nowrap' : 'normal',
+        whiteSpace: density === 'compact' ? 'nowrap' : 'normal',
         zIndex: column.getIsPinned() ? 1 : undefined,
         '&:hover': {
           backgroundColor: enableHover && enableEditing && editingMode !== 'row' ? theme.palette.mode === 'dark' ? lighten(theme.palette.background["default"], 0.13) + " !important" : darken(theme.palette.background["default"], 0.07) + " !important" : undefined
@@ -3005,14 +3008,14 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
       virtualizerProps = _instance$options.virtualizerProps;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var tableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps({
     instance: instance
   }) : muiTableBodyProps;
   var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
   var rowVirtualizer = enableRowVirtualization ? useVirtual(_extends({
-    overscan: isDensePadding ? 15 : 5,
+    overscan: density === 'compact' ? 15 : 5,
     size: rows.length,
     parentRef: tableContainerRef
   }, virtualizerProps)) : {};
@@ -3049,7 +3052,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
       enableColumnResizing = _instance$options.enableColumnResizing;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var column = footer.column;
   var columnDef = column.columnDef,
@@ -3077,7 +3080,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         fontWeight: 'bold',
         maxWidth: column.getSize() + "px",
         minWidth: column.getSize() + "px",
-        p: isDensePadding ? '0.5rem' : '1rem',
+        p: density === 'compact' ? '0.5rem' : density === 'comfortable' ? '1rem' : '1.5rem',
         transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
         width: column.getSize(),
         verticalAlign: 'text-top'
@@ -3254,7 +3257,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onIsDensePaddi, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
+  var _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
 
   var _useState = useState(props.tableId),
       tableId = _useState[0],
@@ -3308,9 +3311,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       currentEditingRow = _useState3[0],
       setCurrentEditingRow = _useState3[1];
 
-  var _useState4 = useState((_initialState$isDense = initialState == null ? void 0 : initialState.isDensePadding) != null ? _initialState$isDense : false),
-      isDensePadding = _useState4[0],
-      setIsDensePadding = _useState4[1];
+  var _useState4 = useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
+      density = _useState4[0],
+      setDensity = _useState4[1];
 
   var _useState5 = useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
       isFullScreen = _useState5[0],
@@ -3358,10 +3361,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       })
     );
   }, []);
-  var displayColumns = useMemo(function () {
+
+  var _useMemo = useMemo(function () {
     var _props$localization, _props$localization2, _props$localization3, _props$localization5;
 
-    return [showActionColumn && createDisplayColumn(table, {
+    var leadingDisplayColumns = [showActionColumn && createDisplayColumn(table, {
       Cell: function Cell(_ref3) {
         var cell = _ref3.cell;
         return React.createElement(MRT_ToggleRowActionMenuButton, {
@@ -3427,11 +3431,23 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 50
     })].filter(Boolean);
-  }, [props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, table]);
+    var trailingDisplayColumns = [];
+
+    if (props.enableRowActions && props.positionActionsColumn === 'last') {
+      trailingDisplayColumns.push.apply(trailingDisplayColumns, leadingDisplayColumns.splice(leadingDisplayColumns.findIndex(function (col) {
+        return col.id === 'mrt-row-actions';
+      }), 1));
+    }
+
+    return [leadingDisplayColumns, trailingDisplayColumns];
+  }, [props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn, table]),
+      leadingDisplayColumns = _useMemo[0],
+      trailingDisplayColumns = _useMemo[1];
+
   var columns = useMemo(function () {
-    return [].concat(displayColumns, props.columns.map(function (column) {
+    return [].concat(leadingDisplayColumns, props.columns.map(function (column) {
       return column.columns ? createGroup(table, column, currentFilterFns) : createDataColumn(table, column, currentFilterFns);
-    }));
+    }), trailingDisplayColumns);
   }, [table, props.columns, currentFilterFns]);
   var data = useMemo(function () {
     var _props$state, _props$state2;
@@ -3456,7 +3472,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       currentEditingRow: currentEditingRow,
       currentFilterFns: currentFilterFns,
       currentGlobalFilterFn: currentGlobalFilterFn,
-      isDensePadding: isDensePadding,
+      density: density,
       isFullScreen: isFullScreen,
       showFilters: showFilters,
       showGlobalFilter: showGlobalFilter
@@ -3466,7 +3482,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     setCurrentEditingRow: (_props$onCurrentEditi2 = props.onCurrentEditingRowChange) != null ? _props$onCurrentEditi2 : setCurrentEditingRow,
     setCurrentFilterFns: (_props$onCurrentFilte = props.onCurrentFilterFnsChange) != null ? _props$onCurrentFilte : setCurrentFilterFns,
     setCurrentGlobalFilterFn: (_props$onCurrentGloba = props.onCurrentGlobalFilterFnChange) != null ? _props$onCurrentGloba : setCurrentGlobalFilterFn,
-    setIsDensePadding: (_props$onIsDensePaddi = props.onIsDensePaddingChange) != null ? _props$onIsDensePaddi : setIsDensePadding,
+    setDensity: (_props$onDensityChang = props.onDensityChange) != null ? _props$onDensityChang : setDensity,
     setIsFullScreen: (_props$onIsFullScreen = props.onIsFullScreenChange) != null ? _props$onIsFullScreen : setIsFullScreen,
     setShowFilters: (_props$onShowFiltersC = props.onShowFiltersChange) != null ? _props$onShowFiltersC : setShowFilters,
     setShowGlobalFilter: (_props$onShowGlobalFi = props.onShowGlobalFilterChange) != null ? _props$onShowGlobalFi : setShowGlobalFilter