material-react-table 0.16.0 → 0.17.0

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

@@ -1,7 +1,7 @@
 import React, { useMemo, forwardRef, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
 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 { sortingFns, createTable, filterFns, 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, Grow, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
+import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
 import { useDrop, useDrag, DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -24,10 +24,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _objectDestructuringEmpty(obj) {
-  if (obj == null) throw new TypeError("Cannot destructure undefined");
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -100,11 +96,11 @@ var MRT_DefaultLocalization_EN = {
   sortedByColumnAsc: 'Sorted by {column} ascending',
   sortedByColumnDesc: 'Sorted by {column} descending',
   thenBy: ', then by ',
-  to: 'to',
   toggleDensity: 'Toggle density',
   toggleFullScreen: 'Toggle full screen',
   toggleSelectAll: 'Toggle select all',
   toggleSelectRow: 'Toggle select row',
+  toggleVisibility: 'Toggle visibility',
   ungroupByColumn: 'Ungroup by {column}',
   unpin: 'Unpin',
   unpinAll: 'Unpin all',
@@ -623,13 +619,13 @@ var createDataColumn = function createDataColumn(table, column, currentFilterFns
 var createDisplayColumn = function createDisplayColumn(table, column) {
   return table.createDisplayColumn(column);
 };
-var reorderColumn = function reorderColumn(movingColumn, receivingColumn, columnOrder, setColumnOrder) {
+var reorderColumn = function reorderColumn(movingColumn, receivingColumn, columnOrder) {
   if (movingColumn.getCanPin()) {
     movingColumn.pin(receivingColumn.getIsPinned());
   }
 
   columnOrder.splice(columnOrder.indexOf(receivingColumn.id), 0, columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0]);
-  setColumnOrder([].concat(columnOrder));
+  return [].concat(columnOrder);
 };
 var getLeadingDisplayColumnIds = function getLeadingDisplayColumnIds(props) {
   return [(props.positionActionsColumn === 'first' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', (props.enableExpanding || props.enableGrouping) && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].filter(Boolean);
@@ -653,12 +649,13 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var getState = instance.getState,
       _instance$options = instance.options,
       enableColumnOrdering = _instance$options.enableColumnOrdering,
-      onColumnVisibilityChanged = _instance$options.onColumnVisibilityChanged,
+      enableHiding = _instance$options.enableHiding,
+      enablePinning = _instance$options.enablePinning,
+      localization = _instance$options.localization,
       setColumnOrder = instance.setColumnOrder;
 
   var _getState = getState(),
-      columnOrder = _getState.columnOrder,
-      columnVisibility = _getState.columnVisibility;
+      columnOrder = _getState.columnOrder;
 
   var columnDef = column.columnDef,
       columnDefType = column.columnDefType;
@@ -666,7 +663,8 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var _useDrop = useDrop({
     accept: 'column',
     drop: function drop(movingColumn) {
-      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
+      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
     }
   }),
       dropRef = _useDrop[1];
@@ -699,12 +697,6 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     } else {
       column.toggleVisibility();
     }
-
-    onColumnVisibilityChanged == null ? void 0 : onColumnVisibilityChanged({
-      column: column,
-      columnVisibility: columnVisibility,
-      instance: instance
-    });
   };
 
   return React.createElement(React.Fragment, null, React.createElement(MenuItem, {
@@ -723,15 +715,23 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       flexWrap: 'nowrap',
       gap: '8px'
     }
-  }, columnDefType !== 'group' && enableColumnOrdering && columnDef.enableColumnOrdering !== false && !allColumns.some(function (col) {
+  }, columnDefType !== 'group' && enableColumnOrdering && !allColumns.some(function (col) {
     return col.columnDefType === 'group';
-  }) && React.createElement(MRT_GrabHandleButton, {
+  }) && (columnDef.enableColumnOrdering !== false ? React.createElement(MRT_GrabHandleButton, {
     ref: dragRef,
     instance: instance
-  }), !isSubMenu && column.getCanPin() && React.createElement(MRT_ColumnPinningButtons, {
+  }) : React.createElement(Box, {
+    sx: {
+      width: '28px'
+    }
+  })), enablePinning && !isSubMenu && (column.getCanPin() ? React.createElement(MRT_ColumnPinningButtons, {
     column: column,
     instance: instance
-  }), React.createElement(FormControlLabel, {
+  }) : React.createElement(Box, {
+    sx: {
+      width: '70px'
+    }
+  })), enableHiding ? React.createElement(FormControlLabel, {
     componentsProps: {
       typography: {
         sx: {
@@ -741,13 +741,22 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       }
     },
     checked: switchChecked,
-    control: React.createElement(Switch, null),
+    control: React.createElement(Tooltip, {
+      arrow: true,
+      enterDelay: 1000,
+      enterNextDelay: 1000,
+      title: localization.toggleVisibility
+    }, React.createElement(Switch, null)),
     disabled: isSubMenu && switchChecked || !column.getCanHide() || column.getIsGrouped(),
     label: columnDef.header,
     onChange: function onChange() {
       return handleToggleColumnHidden(column);
     }
-  }))), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
+  }) : React.createElement(Typography, {
+    sx: {
+      alignSelf: 'center'
+    }
+  }, columnDef.header))), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
     return React.createElement(MRT_ShowHideColumnsMenuItems, {
       allColumns: allColumns,
       key: i + "-" + c.id,
@@ -861,7 +870,7 @@ var commonListItemStyles = {
   alignItems: 'center'
 };
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
-  var _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
+  var _columnDef$enabledCol, _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
 
   var anchorEl = _ref.anchorEl,
       header = _ref.header,
@@ -871,12 +880,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       toggleAllColumnsVisible = instance.toggleAllColumnsVisible,
       setColumnOrder = instance.setColumnOrder,
       _instance$options = instance.options,
+      enableColumnFilterChangeMode = _instance$options.enableColumnFilterChangeMode,
       enableColumnFilters = _instance$options.enableColumnFilters,
       enableColumnResizing = _instance$options.enableColumnResizing,
       enableGrouping = _instance$options.enableGrouping,
       enableHiding = _instance$options.enableHiding,
       enablePinning = _instance$options.enablePinning,
       enableSorting = _instance$options.enableSorting,
+      enabledColumnFilterOptions = _instance$options.enabledColumnFilterOptions,
       _instance$options$ico = _instance$options.icons,
       ArrowRightIcon = _instance$options$ico.ArrowRightIcon,
       ClearAllIcon = _instance$options$ico.ClearAllIcon,
@@ -976,6 +987,9 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     setShowHideColumnsMenuAnchorEl(event.currentTarget);
   };
 
+  var isSelectFilter = !!columnDef.filterSelectOptions;
+  var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
+  var showFilterModeSubMenu = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
   return React.createElement(Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
@@ -1025,21 +1039,21 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header))), !columnDef.filterSelectOptions && React.createElement(IconButton, {
+  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header))), showFilterModeSubMenu && React.createElement(IconButton, {
     onClick: handleOpenFilterModeMenu,
     onMouseEnter: handleOpenFilterModeMenu,
     size: "small",
     sx: {
       p: 0
     }
-  }, React.createElement(ArrowRightIcon, null))), React.createElement(MRT_FilterOptionMenu, {
+  }, React.createElement(ArrowRightIcon, null))), showFilterModeSubMenu && React.createElement(MRT_FilterOptionMenu, {
     anchorEl: filterMenuAnchorEl,
     header: header,
     key: 2,
     onSelect: handleFilterByColumn,
     setAnchorEl: setFilterMenuAnchorEl,
     instance: instance
-  })], enableGrouping && column.getCanGroup() && [React.createElement(MenuItem, {
+  })].filter(Boolean), enableGrouping && column.getCanGroup() && [React.createElement(MenuItem, {
     divider: enablePinning,
     key: 0,
     onClick: handleGroupByColumn,
@@ -1648,11 +1662,13 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
   var instance = _ref.instance;
   var _instance$options = instance.options,
       enableColumnFilters = _instance$options.enableColumnFilters,
+      enableColumnOrdering = _instance$options.enableColumnOrdering,
       enableDensityToggle = _instance$options.enableDensityToggle,
       enableFilters = _instance$options.enableFilters,
       enableFullScreenToggle = _instance$options.enableFullScreenToggle,
       enableGlobalFilter = _instance$options.enableGlobalFilter,
       enableHiding = _instance$options.enableHiding,
+      enablePinning = _instance$options.enablePinning,
       positionGlobalFilter = _instance$options.positionGlobalFilter,
       renderToolbarInternalActions = _instance$options.renderToolbarInternalActions;
   return React.createElement(Box, {
@@ -1674,7 +1690,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
     instance: instance
   }), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
     instance: instance
-  }), enableHiding && React.createElement(MRT_ShowHideColumnsButton, {
+  }), (enableHiding || enableColumnOrdering || enablePinning) && React.createElement(MRT_ShowHideColumnsButton, {
     instance: instance
   }), enableDensityToggle && React.createElement(MRT_ToggleDensePaddingButton, {
     instance: instance
@@ -1692,7 +1708,8 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
       setPageSize = instance.setPageSize,
       _instance$options = instance.options,
       muiTablePaginationProps = _instance$options.muiTablePaginationProps,
-      enableToolbarInternalActions = _instance$options.enableToolbarInternalActions;
+      enableToolbarInternalActions = _instance$options.enableToolbarInternalActions,
+      rowCount = _instance$options.rowCount;
 
   var _getState = getState(),
       _getState$pagination = _getState.pagination,
@@ -1710,7 +1727,8 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
     setPageSize(+event.target.value);
   };
 
-  var showFirstLastPageButtons = getPrePaginationRowModel().rows.length / pageSize > 2;
+  var totalRowCount = rowCount != null ? rowCount : getPrePaginationRowModel().rows.length;
+  var showFirstLastPageButtons = totalRowCount / pageSize > 2;
   return React.createElement(TablePagination, Object.assign({
     SelectProps: {
       sx: {
@@ -1723,7 +1741,7 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
       }
     },
     component: "div",
-    count: getPrePaginationRowModel().rows.length,
+    count: totalRowCount,
     onPageChange: function onPageChange(_, newPage) {
       return setPageIndex(newPage);
     },
@@ -1977,7 +1995,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterB, _columnDef$enabledCol, _allowedColumnFilterO, _localization$filterM, _localization, _localization$clearFi, _columnDef$filterSele;
+  var _localization$filterB, _columnDef$enabledCol, _localization$filterM, _localization, _localization$clearFi, _columnDef$filterSele;
 
   var header = _ref.header,
       inputIndex = _ref.inputIndex,
@@ -2110,7 +2128,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))] : '';
   var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
   var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
-  var allowColumnChangeMode = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false;
+  var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
   return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
     fullWidth: true,
     id: filterId,
@@ -2122,7 +2140,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       },
       title: filterPlaceholder
     },
-    helperText: allowColumnChangeMode && !inputIndex && (allowedColumnFilterOptions === undefined || ((_allowedColumnFilterO = allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.length) != null ? _allowedColumnFilterO : 0) > 0) ? React.createElement("label", {
+    helperText: showChangeModeButton ? React.createElement("label", {
       htmlFor: filterId
     }, filterFn instanceof Function ? (_localization$filterM = localization.filterMode.replace('{filterType}', // @ts-ignore
     (_localization = localization["filter" + (filterFn.name.charAt(0).toUpperCase() + filterFn.name.slice(1))]) != null ? _localization : '')) != null ? _localization$filterM : '' : localization.filterMode.replace('{filterType}', // @ts-ignore
@@ -2144,7 +2162,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     value: filterValue != null ? filterValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: allowColumnChangeMode && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length)) ? React.createElement(InputAdornment, {
+      startAdornment: showChangeModeButton ? React.createElement(InputAdornment, {
         position: "start"
       }, React.createElement(Tooltip, {
         arrow: true,
@@ -2220,23 +2238,17 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
 var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
   var header = _ref.header,
       instance = _ref.instance;
-  var localization = instance.options.localization;
   return React.createElement(Box, {
     sx: {
       display: 'grid',
-      gridTemplateColumns: '6fr auto 5fr'
+      gridTemplateColumns: '6fr 6fr',
+      gap: '1rem'
     }
   }, React.createElement(MRT_FilterTextField, {
     header: header,
     inputIndex: 0,
     instance: instance
-  }), React.createElement(Box, {
-    sx: {
-      width: '100%',
-      minWidth: '5ch',
-      textAlign: 'center'
-    }
-  }, localization.to), React.createElement(MRT_FilterTextField, {
+  }), React.createElement(MRT_FilterTextField, {
     header: header,
     inputIndex: 1,
     instance: instance
@@ -2337,7 +2349,6 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
         touchAction: 'none',
         transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
         userSelect: 'none',
-        zIndex: 2000,
         '&:active': {
           backgroundColor: theme.palette.info.main,
           opacity: 1
@@ -2565,11 +2576,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
   var header = _ref.header,
       instance = _ref.instance;
-  var getState = instance.getState;
-
-  _objectDestructuringEmpty(instance.options);
-
-  var setColumnOrder = instance.setColumnOrder;
+  var getState = instance.getState,
+      setColumnOrder = instance.setColumnOrder;
 
   var _getState = getState(),
       columnOrder = _getState.columnOrder;
@@ -2579,7 +2587,8 @@ var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
   var _useDrop = useDrop({
     accept: 'column',
     drop: function drop(movingColumn) {
-      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
+      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
     }
   }),
       dropRef = _useDrop[1];
@@ -2846,7 +2855,8 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var _useDrop = useDrop({
     accept: 'column',
     drop: function drop(movingColumn) {
-      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
+      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
     }
   }),
       dropRef = _useDrop[1];
@@ -3334,7 +3344,8 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   }, tablePaperProps, {
     sx: _extends({
       transition: 'all 0.2s ease-in-out'
-    }, tablePaperProps == null ? void 0 : tablePaperProps.sx, {
+    }, tablePaperProps == null ? void 0 : tablePaperProps.sx),
+    style: _extends({}, tablePaperProps == null ? void 0 : tablePaperProps.style, {
       height: isFullScreen ? '100vh' : undefined,
       margin: isFullScreen ? '0' : undefined,
       maxHeight: isFullScreen ? '100vh' : undefined,
@@ -3368,29 +3379,6 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
     var initState = (_props$initialState = props.initialState) != null ? _props$initialState : {};
     initState.columnOrder = (_initState$columnOrde = initState.columnOrder) != null ? _initState$columnOrde : getDefaultColumnOrderIds(props);
-
-    if (!props.enablePersistentState || !props.tableId) {
-      return initState;
-    }
-
-    if (typeof window === 'undefined') {
-      if (process.env.NODE_ENV !== 'production') {
-        console.error('The MRT Persistent Table State feature is not supported if using SSR, but you can wrap your <MaterialReactTable /> in a MUI <NoSsr> tags to let it work');
-      }
-
-      return initState;
-    }
-
-    var storedState = props.persistentStateMode === 'localStorage' ? localStorage.getItem("mrt-" + tableId + "-table-state") : props.persistentStateMode === 'sessionStorage' ? sessionStorage.getItem("mrt-" + tableId + "-table-state") : '{}';
-
-    if (storedState) {
-      var parsedState = JSON.parse(storedState);
-
-      if (parsedState) {
-        return _extends({}, initState, parsedState);
-      }
-    }
-
     return initState;
   }, []);
 
@@ -3484,7 +3472,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       id: 'mrt-expand',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
-      size: 50
+      size: 60
     }), columnOrder.includes('mrt-select') && createDisplayColumn(table, {
       Cell: function Cell(_ref5) {
         var cell = _ref5.cell;
@@ -3503,7 +3491,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       id: 'mrt-select',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
-      size: 50
+      size: 60
     }), columnOrder.includes('mrt-row-numbers') && createDisplayColumn(table, {
       Cell: function Cell(_ref6) {
         var cell = _ref6.cell;
@@ -3518,7 +3506,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       id: 'mrt-row-numbers',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
-      size: 50
+      size: 60
     })].filter(Boolean);
   }, [columnOrder, 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]);
   var columns = useMemo(function () {
@@ -3574,27 +3562,26 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   });
 
   useEffect(function () {
-    if (typeof window === 'undefined' || !props.enablePersistentState) {
-      return;
-    }
-
-    if (!props.tableId && process.env.NODE_ENV !== 'production') {
-      console.warn('a unique tableId prop is required for persistent table state to work');
-      return;
-    }
-
-    var itemArgs = ["mrt-" + tableId + "-table-state", JSON.stringify(instance.getState())];
-
-    if (props.persistentStateMode === 'localStorage') {
-      var _localStorage;
-
-      (_localStorage = localStorage).setItem.apply(_localStorage, itemArgs);
-    } else if (props.persistentStateMode === 'sessionStorage') {
-      var _sessionStorage;
-
-      (_sessionStorage = sessionStorage).setItem.apply(_sessionStorage, itemArgs);
-    }
-  }, [props.enablePersistentState, props.tableId, props.persistentStateMode, instance]);
+    props == null ? void 0 : props.onColumnOrderChanged == null ? void 0 : props.onColumnOrderChanged({
+      columnOrder: instance.getState().columnOrder,
+      //@ts-ignore
+      instance: instance
+    });
+  }, [instance.getState().columnOrder]);
+  useEffect(function () {
+    props == null ? void 0 : props.onColumnPinningChanged == null ? void 0 : props.onColumnPinningChanged({
+      columnPinning: instance.getState().columnPinning,
+      //@ts-ignore
+      instance: instance
+    });
+  }, [instance.getState().columnPinning]);
+  useEffect(function () {
+    props == null ? void 0 : props.onColumnVisibilityChanged == null ? void 0 : props.onColumnVisibilityChanged({
+      columnPinning: instance.getState().columnVisibility,
+      //@ts-ignore
+      instance: instance
+    });
+  }, [instance.getState().columnVisibility]);
   return React.createElement(React.Fragment, null, React.createElement(Dialog, {
     PaperComponent: Box,
     TransitionComponent: Grow,
@@ -3613,7 +3600,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -3683,8 +3670,6 @@ var MaterialReactTable = (function (_ref) {
       enableToolbarTop = _ref$enableToolbarTop === void 0 ? true : _ref$enableToolbarTop,
       icons = _ref.icons,
       localization = _ref.localization,
-      _ref$persistentStateM = _ref.persistentStateMode,
-      persistentStateMode = _ref$persistentStateM === void 0 ? 'sessionStorage' : _ref$persistentStateM,
       _ref$positionActionsC = _ref.positionActionsColumn,
       positionActionsColumn = _ref$positionActionsC === void 0 ? 'first' : _ref$positionActionsC,
       _ref$positionGlobalFi = _ref.positionGlobalFilter,
@@ -3733,7 +3718,6 @@ var MaterialReactTable = (function (_ref) {
     enableToolbarTop: enableToolbarTop,
     icons: _extends({}, MRT_Default_Icons, icons),
     localization: _extends({}, MRT_DefaultLocalization_EN, localization),
-    persistentStateMode: persistentStateMode,
     positionActionsColumn: positionActionsColumn,
     positionGlobalFilter: positionGlobalFilter,
     positionPagination: positionPagination,