material-react-table 0.5.0 → 0.5.3

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useContext, createContext, Fragment, useRef, useEffect } from 'react';
+import React, { useState, useMemo, useContext, createContext, Fragment, useRef, useEffect } from 'react';
 import { useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns, useFlexLayout, useAsyncDebounce } from 'react-table';
 import { TextField, Tooltip, InputAdornment, IconButton, Menu, MenuItem, Divider, TableCell, Box, TableSortLabel, Collapse, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, FormControlLabel, Switch, Button, TablePagination, useMediaQuery, Chip, Alert, Toolbar, TableContainer, Paper, LinearProgress } from '@mui/material';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -102,19 +102,6 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
 
   var hooks = [useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect];
   if (props.enableColumnResizing) hooks.unshift(useResizeColumns, useFlexLayout);
-  var tableInstance = useTable.apply(void 0, [props].concat(hooks));
-  var anyRowsCanExpand = useMemo( // @ts-ignore
-  function () {
-    return tableInstance.rows.some(function (row) {
-      return row.canExpand;
-    });
-  }, [tableInstance.rows]);
-  var anyRowsExpanded = useMemo( // @ts-ignore
-  function () {
-    return tableInstance.rows.some(function (row) {
-      return row.isExpanded;
-    });
-  }, [tableInstance.rows]);
 
   var _useState = useState(null),
       currentEditingRow = _useState[0],
@@ -132,24 +119,42 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
       showFilters = _useState4[0],
       setShowFilters = _useState4[1];
 
-  var _useState5 = useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showSearchTextField) != null ? _props$initialState$s2 : false),
+  var _useState5 = useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showSearch) != null ? _props$initialState$s2 : false),
       showSearch = _useState5[0],
       setShowSearch = _useState5[1];
 
+  var tableInstance = useTable.apply(void 0, [_extends({}, props, {
+    useControlledState: function useControlledState(state) {
+      return useMemo(function () {
+        return _extends({}, state, {
+          currentEditingRow: currentEditingRow,
+          densePadding: densePadding,
+          fullScreen: fullScreen,
+          showFilters: showFilters,
+          showSearch: showSearch
+        }, props == null ? void 0 : props.useControlledState == null ? void 0 : props.useControlledState(state));
+      }, [currentEditingRow, densePadding, fullScreen, showFilters, showSearch, state]);
+    }
+  })].concat(hooks));
+  var anyRowsCanExpand = useMemo(function () {
+    return tableInstance.rows.some(function (row) {
+      return row.canExpand;
+    });
+  }, [tableInstance.rows]);
+  var anyRowsExpanded = useMemo(function () {
+    return tableInstance.rows.some(function (row) {
+      return row.isExpanded;
+    });
+  }, [tableInstance.rows]);
   return React.createElement(MaterialReactTableContext.Provider, {
     value: _extends({}, props, {
       anyRowsCanExpand: anyRowsCanExpand,
       anyRowsExpanded: anyRowsExpanded,
-      currentEditingRow: currentEditingRow,
-      densePadding: densePadding,
       setCurrentEditingRow: setCurrentEditingRow,
       setDensePadding: setDensePadding,
-      fullScreen: fullScreen,
       setFullScreen: setFullScreen,
       setShowFilters: setShowFilters,
       setShowSearch: setShowSearch,
-      showFilters: showFilters,
-      showSearch: showSearch,
       //@ts-ignore
       tableInstance: tableInstance
     })
@@ -400,13 +405,11 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var column = _ref.column;
 
   var _useMRT = useMRT(),
-      densePadding = _useMRT.densePadding,
       disableColumnActions = _useMRT.disableColumnActions,
       disableFilters = _useMRT.disableFilters,
       enableColumnResizing = _useMRT.enableColumnResizing,
       localization = _useMRT.localization,
       muiTableHeadCellProps = _useMRT.muiTableHeadCellProps,
-      showFilters = _useMRT.showFilters,
       tableInstance = _useMRT.tableInstance;
 
   var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
@@ -421,7 +424,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   return React.createElement(TableCell, Object.assign({
     align: isParentHeader ? 'center' : 'left'
   }, tableCellProps, {
-    sx: _extends({}, commonTableHeadCellStyles(densePadding, enableColumnResizing), tableCellProps == null ? void 0 : tableCellProps.sx)
+    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding, enableColumnResizing), tableCellProps == null ? void 0 : tableCellProps.sx)
   }), React.createElement(Box, {
     sx: {
       alignContent: 'space-between',
@@ -470,7 +473,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       maxHeight: '2rem'
     }
   })))), !disableFilters && column.canFilter && React.createElement(Collapse, {
-    "in": showFilters
+    "in": tableInstance.state.showFilters
   }, React.createElement(MRT_FilterTextField, {
     column: column
   }))));
@@ -482,9 +485,9 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   var cell = _ref.cell;
 
   var _useMRT = useMRT(),
-      currentEditingRow = _useMRT.currentEditingRow,
       muiTableBodyCellEditTextFieldProps = _useMRT.muiTableBodyCellEditTextFieldProps,
-      setCurrentEditingRow = _useMRT.setCurrentEditingRow;
+      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
+      currentEditingRow = _useMRT.tableInstance.state.currentEditingRow;
 
   var handleChange = function handleChange(event) {
     if (currentEditingRow) {
@@ -540,8 +543,9 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var _useMRT = useMRT(),
       onCellClick = _useMRT.onCellClick,
       muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
-      densePadding = _useMRT.densePadding,
-      currentEditingRow = _useMRT.currentEditingRow;
+      _useMRT$tableInstance = _useMRT.tableInstance.state,
+      currentEditingRow = _useMRT$tableInstance.currentEditingRow,
+      densePadding = _useMRT$tableInstance.densePadding;
 
   var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
   var mcTableCellBodyProps = cell.column.muiTableBodyCellProps instanceof Function ? cell.column.muiTableBodyCellProps(cell) : cell.column.muiTableBodyCellProps;
@@ -566,7 +570,6 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       selectAll = _ref.selectAll;
 
   var _useMRT = useMRT(),
-      densePadding = _useMRT.densePadding,
       localization = _useMRT.localization,
       onRowSelectChange = _useMRT.onRowSelectChange,
       onSelectAllChange = _useMRT.onSelectAllChange,
@@ -588,7 +591,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
 
   var checkboxProps = selectAll ? tableInstance.getToggleAllRowsSelectedProps() : row == null ? void 0 : row.getToggleRowSelectedProps();
   return React.createElement(TableCell, {
-    sx: commonTableBodyButtonCellStyles(densePadding)
+    sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
   }, React.createElement(Tooltip, {
     arrow: true,
     enterDelay: 1000,
@@ -606,16 +609,15 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
 
 var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
   var _useMRT = useMRT(),
-      tableInstance = _useMRT.tableInstance,
-      localization = _useMRT.localization,
       anyRowsExpanded = _useMRT.anyRowsExpanded,
-      densePadding = _useMRT.densePadding,
-      DoubleArrowDownIcon = _useMRT.icons.DoubleArrowDownIcon;
+      DoubleArrowDownIcon = _useMRT.icons.DoubleArrowDownIcon,
+      localization = _useMRT.localization,
+      tableInstance = _useMRT.tableInstance;
 
   return React.createElement(TableCell, Object.assign({
     size: "small"
   }, tableInstance.getToggleAllRowsExpandedProps(), {
-    sx: commonTableBodyButtonCellStyles(densePadding)
+    sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
   }), React.createElement(IconButton, {
     "aria-label": localization.expandAllButtonTitle,
     title: localization.expandAllButtonTitle
@@ -648,8 +650,8 @@ var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
 
 var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
   var _useMRT = useMRT(),
-      densePadding = _useMRT.densePadding,
-      localization = _useMRT.localization;
+      localization = _useMRT.localization,
+      densePadding = _useMRT.tableInstance.state.densePadding;
 
   return React.createElement(TableCell, {
     style: {
@@ -666,7 +668,6 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
 
   var _useMRT = useMRT(),
       anyRowsCanExpand = _useMRT.anyRowsCanExpand,
-      densePadding = _useMRT.densePadding,
       disableExpandAll = _useMRT.disableExpandAll,
       enableRowActions = _useMRT.enableRowActions,
       enableRowEditing = _useMRT.enableRowEditing,
@@ -691,7 +692,7 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
   });
 
   return React.createElement(TableRow, Object.assign({}, tableRowProps), enableRowNumbers && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(TableCell, {
-    sx: _extends({}, commonTableHeadCellStyles(densePadding))
+    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding))
   }, "#")), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(MRT_TableHeadCellActions, null)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React.createElement(MRT_ExpandAllButton, null) : React.createElement(MRT_TableSpacerCell, {
     width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
   }) : null, enableSelection ? !isParentHeader ? React.createElement(MRT_SelectCheckbox, {
@@ -753,10 +754,10 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   var row = _ref.row;
 
   var _useMRT = useMRT(),
-      densePadding = _useMRT.densePadding,
       ExpandMoreIcon = _useMRT.icons.ExpandMoreIcon,
       localization = _useMRT.localization,
-      renderDetailPanel = _useMRT.renderDetailPanel;
+      renderDetailPanel = _useMRT.renderDetailPanel,
+      densePadding = _useMRT.tableInstance.state.densePadding;
 
   return React.createElement(TableCell, {
     size: "small",
@@ -1576,9 +1577,9 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
       CancelIcon = _useMRT$icons.CancelIcon,
       SaveIcon = _useMRT$icons.SaveIcon,
       localization = _useMRT.localization,
-      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
       onRowEditSubmit = _useMRT.onRowEditSubmit,
-      currentEditingRow = _useMRT.currentEditingRow;
+      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
+      currentEditingRow = _useMRT.tableInstance.state.currentEditingRow;
 
   var handleCancel = function handleCancel() {
     row.values = row.original;
@@ -1642,11 +1643,11 @@ var commonIconButtonStyles = {
   }
 };
 var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
+  var _tableInstance$state$;
+
   var row = _ref.row;
 
   var _useMRT = useMRT(),
-      currentEditingRow = _useMRT.currentEditingRow,
-      densePadding = _useMRT.densePadding,
       enableRowEditing = _useMRT.enableRowEditing,
       _useMRT$icons = _useMRT.icons,
       EditIcon = _useMRT$icons.EditIcon,
@@ -1673,8 +1674,8 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
   };
 
   return React.createElement(TableCell, {
-    sx: commonTableBodyButtonCellStyles(densePadding)
-  }, renderRowActions ? React.createElement(React.Fragment, null, renderRowActions(row, tableInstance)) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React.createElement(MRT_EditActionButtons, {
+    sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
+  }, renderRowActions ? React.createElement(React.Fragment, null, renderRowActions(row, tableInstance)) : row.id === ((_tableInstance$state$ = tableInstance.state.currentEditingRow) == null ? void 0 : _tableInstance$state$.id) ? React.createElement(MRT_EditActionButtons, {
     row: row
   }) : !renderRowActionMenuItems && enableRowEditing ? React.createElement(Tooltip, {
     placement: "right",
@@ -1683,13 +1684,17 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
   }, React.createElement(IconButton, {
     sx: commonIconButtonStyles,
     onClick: handleEdit
-  }, React.createElement(EditIcon, null))) : renderRowActionMenuItems ? React.createElement(React.Fragment, null, React.createElement(IconButton, {
+  }, React.createElement(EditIcon, null))) : renderRowActionMenuItems ? React.createElement(React.Fragment, null, React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: localization.rowActionMenuButtonTitle
+  }, React.createElement(IconButton, {
     "aria-label": localization.rowActionMenuButtonTitle,
     onClick: handleOpenRowActionMenu,
     size: "small",
-    sx: commonIconButtonStyles,
-    title: localization.rowActionMenuButtonTitle
-  }, React.createElement(MoreHorizIcon, null)), React.createElement(MRT_RowActionMenu, {
+    sx: commonIconButtonStyles
+  }, React.createElement(MoreHorizIcon, null))), React.createElement(MRT_RowActionMenu, {
     anchorEl: anchorEl,
     handleEdit: handleEdit,
     row: row,
@@ -1702,7 +1707,6 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
 
   var _useMRT = useMRT(),
       anyRowsCanExpand = _useMRT.anyRowsCanExpand,
-      densePadding = _useMRT.densePadding,
       enableRowActions = _useMRT.enableRowActions,
       enableRowEditing = _useMRT.enableRowEditing,
       enableRowNumbers = _useMRT.enableRowNumbers,
@@ -1710,7 +1714,8 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       muiTableBodyRowProps = _useMRT.muiTableBodyRowProps,
       onRowClick = _useMRT.onRowClick,
       positionActionsColumn = _useMRT.positionActionsColumn,
-      renderDetailPanel = _useMRT.renderDetailPanel;
+      renderDetailPanel = _useMRT.renderDetailPanel,
+      densePadding = _useMRT.tableInstance.state.densePadding;
 
   var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
 
@@ -1724,7 +1729,6 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       return onRowClick == null ? void 0 : onRowClick(event, row);
     }
   }, tableRowProps, {
-    //@ts-ignore
     sx: function sx(theme) {
       return _extends({
         backgroundColor: row.isSelected ? alpha(theme.palette.primary.light, 0.1) : 'transparent'
@@ -1757,9 +1761,10 @@ var MRT_TableBody = function MRT_TableBody() {
       manualPagination = _useMRT.manualPagination;
 
   var rows = manualPagination ? tableInstance.rows : tableInstance.page;
+  var mTableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps(tableInstance) : muiTableBodyProps;
 
-  var tableBodyProps = _extends({}, muiTableBodyProps, tableInstance.getTableBodyProps(), {
-    style: _extends({}, tableInstance.getTableBodyProps().style, muiTableBodyProps == null ? void 0 : muiTableBodyProps.style)
+  var tableBodyProps = _extends({}, mTableBodyProps, tableInstance.getTableBodyProps(), {
+    style: _extends({}, tableInstance.getTableBodyProps().style, mTableBodyProps == null ? void 0 : mTableBodyProps.style)
   });
 
   return React.createElement(TableBody, Object.assign({}, tableBodyProps, {
@@ -1782,8 +1787,8 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
 
   var _useMRT = useMRT(),
       muiTableFooterCellProps = _useMRT.muiTableFooterCellProps,
-      densePadding = _useMRT.densePadding,
-      enableColumnResizing = _useMRT.enableColumnResizing;
+      enableColumnResizing = _useMRT.enableColumnResizing,
+      densePadding = _useMRT.tableInstance.state.densePadding;
 
   var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
   var mTableFooterCellProps = muiTableFooterCellProps instanceof Function ? muiTableFooterCellProps(column) : muiTableFooterCellProps;
@@ -1848,7 +1853,8 @@ var MRT_TableFooter = function MRT_TableFooter() {
       muiTableFooterProps = _useMRT.muiTableFooterProps,
       tableInstance = _useMRT.tableInstance;
 
-  return React.createElement(TableFooter, Object.assign({}, muiTableFooterProps), tableInstance.footerGroups.map(function (footerGroup) {
+  var tableFooterProps = muiTableFooterProps instanceof Function ? muiTableFooterProps(tableInstance) : muiTableFooterProps;
+  return React.createElement(TableFooter, Object.assign({}, tableFooterProps), tableInstance.footerGroups.map(function (footerGroup) {
     return React.createElement(MRT_TableFooterRow, {
       key: footerGroup.getFooterGroupProps().key,
       footerGroup: footerGroup
@@ -1863,8 +1869,10 @@ var MRT_Table = function MRT_Table() {
       hideTableHead = _useMRT.hideTableHead,
       hideTableFooter = _useMRT.hideTableFooter;
 
-  var tableProps = _extends({}, muiTableProps, tableInstance.getTableProps(), {
-    style: _extends({}, tableInstance.getTableProps().style, muiTableProps == null ? void 0 : muiTableProps.style)
+  var mTableProps = muiTableProps instanceof Function ? muiTableProps(tableInstance) : muiTableProps;
+
+  var tableProps = _extends({}, mTableProps, tableInstance.getTableProps(), {
+    style: _extends({}, tableInstance.getTableProps().style, mTableProps == null ? void 0 : mTableProps.style)
   });
 
   return React.createElement(Table, Object.assign({}, tableProps), !hideTableHead && React.createElement(MRT_TableHead, null), React.createElement(MRT_TableBody, null), !hideTableFooter && React.createElement(MRT_TableFooter, null));
@@ -1875,7 +1883,6 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
       _useMRT$icons = _useMRT.icons,
       SearchIcon = _useMRT$icons.SearchIcon,
       CloseIcon = _useMRT$icons.CloseIcon,
-      showSearch = _useMRT.showSearch,
       localization = _useMRT.localization,
       muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
       onGlobalFilterChange = _useMRT.onGlobalFilterChange,
@@ -1898,7 +1905,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
   };
 
   return React.createElement(Collapse, {
-    "in": showSearch,
+    "in": tableInstance.state.showSearch,
     orientation: "horizontal"
   }, React.createElement(TextField, Object.assign({
     id: "global-search-text-field",
@@ -1938,12 +1945,12 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
   var rest = _extends({}, _ref);
 
   var _useMRT = useMRT(),
-      fullScreen = _useMRT.fullScreen,
       _useMRT$icons = _useMRT.icons,
       FullscreenExitIcon = _useMRT$icons.FullscreenExitIcon,
       FullscreenIcon = _useMRT$icons.FullscreenIcon,
       localization = _useMRT.localization,
-      setFullScreen = _useMRT.setFullScreen;
+      setFullScreen = _useMRT.setFullScreen,
+      fullScreen = _useMRT.tableInstance.state.fullScreen;
 
   return React.createElement(Tooltip, {
     arrow: true,
@@ -2055,12 +2062,12 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
   var rest = _extends({}, _ref);
 
   var _useMRT = useMRT(),
-      densePadding = _useMRT.densePadding,
       setDensePadding = _useMRT.setDensePadding,
       localization = _useMRT.localization,
       _useMRT$icons = _useMRT.icons,
       DensityMediumIcon = _useMRT$icons.DensityMediumIcon,
-      DensitySmallIcon = _useMRT$icons.DensitySmallIcon;
+      DensitySmallIcon = _useMRT$icons.DensitySmallIcon,
+      densePadding = _useMRT.tableInstance.state.densePadding;
 
   return React.createElement(Tooltip, {
     arrow: true,
@@ -2078,12 +2085,12 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
   var rest = _extends({}, _ref);
 
   var _useMRT = useMRT(),
-      localization = _useMRT.localization,
-      setShowFilters = _useMRT.setShowFilters,
-      showFilters = _useMRT.showFilters,
       _useMRT$icons = _useMRT.icons,
       FilterListIcon = _useMRT$icons.FilterListIcon,
-      FilterListOffIcon = _useMRT$icons.FilterListOffIcon;
+      FilterListOffIcon = _useMRT$icons.FilterListOffIcon,
+      localization = _useMRT.localization,
+      setShowFilters = _useMRT.setShowFilters,
+      showFilters = _useMRT.tableInstance.state.showFilters;
 
   return React.createElement(Tooltip, {
     arrow: true,
@@ -2107,7 +2114,7 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
       localization = _useMRT.localization,
       muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
       setShowSearch = _useMRT.setShowSearch,
-      showSearch = _useMRT.showSearch;
+      showSearch = _useMRT.tableInstance.state.showSearch;
 
   var handleToggleSearch = function handleToggleSearch() {
     setShowSearch(!showSearch);
@@ -2259,7 +2266,6 @@ var MRT_ToolbarTop = function MRT_ToolbarTop() {
       muiTableToolbarTopProps = _useMRT.muiTableToolbarTopProps,
       positionPagination = _useMRT.positionPagination,
       positionToolbarActions = _useMRT.positionToolbarActions,
-      fullScreen = _useMRT.fullScreen,
       positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
       renderToolbarCustomActions = _useMRT.renderToolbarCustomActions,
       tableInstance = _useMRT.tableInstance;
@@ -2274,8 +2280,8 @@ var MRT_ToolbarTop = function MRT_ToolbarTop() {
         backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
         display: 'grid',
         p: '0 !important',
-        position: fullScreen ? 'sticky' : undefined,
-        top: fullScreen ? '0' : undefined,
+        position: tableInstance.state.fullScreen ? 'sticky' : undefined,
+        top: tableInstance.state.fullScreen ? '0' : undefined,
         width: '100%',
         zIndex: 1
       }, toolbarProps == null ? void 0 : toolbarProps.sx);
@@ -2302,7 +2308,6 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
       manualPagination = _useMRT.manualPagination,
       muiTableToolbarBottomProps = _useMRT.muiTableToolbarBottomProps,
       positionPagination = _useMRT.positionPagination,
-      fullScreen = _useMRT.fullScreen,
       positionToolbarActions = _useMRT.positionToolbarActions,
       positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
       tableInstance = _useMRT.tableInstance;
@@ -2315,12 +2320,12 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
       return _extends({
         backgroundColor: theme.palette.background["default"],
         backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
-        bottom: fullScreen ? '0' : undefined,
+        bottom: tableInstance.state.fullScreen ? '0' : undefined,
         display: 'flex',
         justifyContent: 'space-between',
         overflowY: 'hidden',
         p: '0 0.5rem !important',
-        position: fullScreen ? 'fixed' : undefined,
+        position: tableInstance.state.fullScreen ? 'fixed' : undefined,
         width: 'calc(100% - 1rem)',
         zIndex: 1
       }, toolbarProps == null ? void 0 : toolbarProps.sx);
@@ -2330,7 +2335,6 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
 
 var MRT_TableContainer = function MRT_TableContainer() {
   var _useMRT = useMRT(),
-      fullScreen = _useMRT.fullScreen,
       hideToolbarBottom = _useMRT.hideToolbarBottom,
       hideToolbarTop = _useMRT.hideToolbarTop,
       isFetching = _useMRT.isFetching,
@@ -2338,6 +2342,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
       muiTableContainerProps = _useMRT.muiTableContainerProps,
       tableInstance = _useMRT.tableInstance;
 
+  var fullScreen = tableInstance.state.fullScreen;
   var originalBodyOverflowStyle = useRef();
   useEffect(function () {
     if (typeof window !== 'undefined') {
@@ -2350,8 +2355,10 @@ var MRT_TableContainer = function MRT_TableContainer() {
     if (typeof window !== 'undefined') {
       if (fullScreen) {
         document.body.style.overflow = 'hidden';
-      } else if (originalBodyOverflowStyle.current) {
-        document.body.style.overflow = originalBodyOverflowStyle.current;
+      } else {
+        var _originalBodyOverflow;
+
+        document.body.style.overflow = (_originalBodyOverflow = originalBodyOverflowStyle.current) != null ? _originalBodyOverflow : 'auto';
       }
     }
   }, [fullScreen]);
@@ -2374,7 +2381,12 @@ var MRT_TableContainer = function MRT_TableContainer() {
   }), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), React.createElement(Collapse, {
     "in": isFetching || isLoading,
     unmountOnExit: true
-  }, React.createElement(LinearProgress, null)), React.createElement(MRT_Table, null), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, null));
+  }, React.createElement(LinearProgress, null)), React.createElement(Box, {
+    sx: {
+      maxWidth: '100%',
+      overflowX: 'auto'
+    }
+  }, React.createElement(MRT_Table, null)), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, null));
 };
 
 var MRT_DefaultLocalization_EN = {