material-react-table 0.5.0 → 0.5.3

package/dist/MaterialReactTable.d.ts

@@ -49,10 +49,11 @@ export declare type MRT_Row<D extends {} = {}> = Row<D> & UseExpandedRowProps<D>
 };
 export declare type MRT_Cell<D extends {} = {}, _V = any> = Cell<D> & UseGroupByCellProps<D> & UseRowStateCellProps<D> & {};
 export declare type MRT_TableState<D extends {} = {}> = TableState<D> & UseColumnOrderState<D> & UseExpandedState<D> & UseFiltersState<D> & UseGlobalFiltersState<D> & UseGroupByState<D> & UsePaginationState<D> & UseResizeColumnsState<D> & UseRowSelectState<D> & UseRowStateState<D> & UseSortByState<D> & {
-    densePadding?: boolean;
-    fullScreen?: boolean;
-    showFilters?: boolean;
-    showSearchTextField?: boolean;
+    currentEditingRow: MRT_Row<D> | null;
+    densePadding: boolean;
+    fullScreen: boolean;
+    showFilters: boolean;
+    showSearch: boolean;
 };
 export declare type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> & UseExpandedOptions<D> & UseFiltersOptions<D> & UseGlobalFiltersOptions<D> & UseGroupByOptions<D> & UsePaginationOptions<D> & UseResizeColumnsOptions<D> & UseRowSelectOptions<D> & UseRowStateOptions<D> & UseSortByOptions<D> & MRT_TableOptions<D> & {
     disableColumnActions?: boolean;
@@ -80,19 +81,19 @@ export declare type MaterialReactTableProps<D extends {} = {}> = UseTableOptions
     muiSearchTextFieldProps?: TextFieldProps;
     muiTableBodyCellEditTextFieldProps?: TextFieldProps | ((cell?: MRT_Cell<D>) => TextFieldProps);
     muiTableBodyCellProps?: TableCellProps | ((cell?: MRT_Cell<D>) => TableCellProps);
-    muiTableBodyProps?: TableBodyProps;
+    muiTableBodyProps?: TableBodyProps | ((tableInstance: MRT_TableInstance<D>) => TableBodyProps);
     muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
-    muiTableContainerProps?: TableContainerProps | ((table: MRT_TableInstance<D>) => TableContainerProps);
+    muiTableContainerProps?: TableContainerProps | ((tableInstance: MRT_TableInstance<D>) => TableContainerProps);
     muiTableDetailPanelProps?: TableCellProps | ((row: Row<D>) => TableCellProps);
     muiTableFooterCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
-    muiTableFooterProps?: TableFooterProps;
+    muiTableFooterProps?: TableFooterProps | ((tableInstance: MRT_TableInstance<D>) => TableFooterProps);
     muiTableFooterRowProps?: TableRowProps | ((footerGroup: MRT_HeaderGroup<D>) => TableRowProps);
     muiTableHeadCellFilterTextFieldProps?: TextFieldProps | ((column: Column<D>) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
-    muiTableHeadProps?: TableHeadProps;
+    muiTableHeadProps?: TableHeadProps | ((tableInstance: MRT_TableInstance<D>) => TableHeadProps);
     muiTableHeadRowProps?: TableRowProps | ((row: MRT_HeaderGroup<D>) => TableRowProps);
     muiTablePaginationProps?: Partial<TablePaginationProps> | ((tableInstance: MRT_TableInstance<D>) => Partial<TablePaginationProps>);
-    muiTableProps?: TableProps;
+    muiTableProps?: TableProps | ((tableInstance: MRT_TableInstance<D>) => TableProps);
     muiTableToolbarAlertBannerProps?: AlertProps | ((tableInstance: MRT_TableInstance<D>) => AlertProps);
     muiTableToolbarBottomProps?: ToolbarProps | ((tableInstance: MRT_TableInstance<D>) => ToolbarProps);
     muiTableToolbarTopProps?: ToolbarProps | ((tableInstance: MRT_TableInstance<D>) => ToolbarProps);

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

@@ -109,19 +109,6 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
 
   var hooks = [reactTable.useFilters, reactTable.useGlobalFilter, reactTable.useGroupBy, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect];
   if (props.enableColumnResizing) hooks.unshift(reactTable.useResizeColumns, reactTable.useFlexLayout);
-  var tableInstance = reactTable.useTable.apply(void 0, [props].concat(hooks));
-  var anyRowsCanExpand = React.useMemo( // @ts-ignore
-  function () {
-    return tableInstance.rows.some(function (row) {
-      return row.canExpand;
-    });
-  }, [tableInstance.rows]);
-  var anyRowsExpanded = React.useMemo( // @ts-ignore
-  function () {
-    return tableInstance.rows.some(function (row) {
-      return row.isExpanded;
-    });
-  }, [tableInstance.rows]);
 
   var _useState = React.useState(null),
       currentEditingRow = _useState[0],
@@ -139,24 +126,42 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
       showFilters = _useState4[0],
       setShowFilters = _useState4[1];
 
-  var _useState5 = React.useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showSearchTextField) != null ? _props$initialState$s2 : false),
+  var _useState5 = React.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 = reactTable.useTable.apply(void 0, [_extends({}, props, {
+    useControlledState: function useControlledState(state) {
+      return React.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 = React.useMemo(function () {
+    return tableInstance.rows.some(function (row) {
+      return row.canExpand;
+    });
+  }, [tableInstance.rows]);
+  var anyRowsExpanded = React.useMemo(function () {
+    return tableInstance.rows.some(function (row) {
+      return row.isExpanded;
+    });
+  }, [tableInstance.rows]);
   return React__default.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
     })
@@ -407,13 +412,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;
@@ -428,7 +431,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   return React__default.createElement(material.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__default.createElement(material.Box, {
     sx: {
       alignContent: 'space-between',
@@ -477,7 +480,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       maxHeight: '2rem'
     }
   })))), !disableFilters && column.canFilter && React__default.createElement(material.Collapse, {
-    "in": showFilters
+    "in": tableInstance.state.showFilters
   }, React__default.createElement(MRT_FilterTextField, {
     column: column
   }))));
@@ -489,9 +492,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) {
@@ -547,8 +550,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;
@@ -573,7 +577,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,
@@ -595,7 +598,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
 
   var checkboxProps = selectAll ? tableInstance.getToggleAllRowsSelectedProps() : row == null ? void 0 : row.getToggleRowSelectedProps();
   return React__default.createElement(material.TableCell, {
-    sx: commonTableBodyButtonCellStyles(densePadding)
+    sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
   }, React__default.createElement(material.Tooltip, {
     arrow: true,
     enterDelay: 1000,
@@ -613,16 +616,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__default.createElement(material.TableCell, Object.assign({
     size: "small"
   }, tableInstance.getToggleAllRowsExpandedProps(), {
-    sx: commonTableBodyButtonCellStyles(densePadding)
+    sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
   }), React__default.createElement(material.IconButton, {
     "aria-label": localization.expandAllButtonTitle,
     title: localization.expandAllButtonTitle
@@ -655,8 +657,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__default.createElement(material.TableCell, {
     style: {
@@ -673,7 +675,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,
@@ -698,7 +699,7 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
   });
 
   return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), enableRowNumbers && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(material.TableCell, {
-    sx: _extends({}, commonTableHeadCellStyles(densePadding))
+    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding))
   }, "#")), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(MRT_TableHeadCellActions, null)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React__default.createElement(MRT_ExpandAllButton, null) : React__default.createElement(MRT_TableSpacerCell, {
     width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
   }) : null, enableSelection ? !isParentHeader ? React__default.createElement(MRT_SelectCheckbox, {
@@ -760,10 +761,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__default.createElement(material.TableCell, {
     size: "small",
@@ -1583,9 +1584,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;
@@ -1649,11 +1650,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,
@@ -1680,8 +1681,8 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
   };
 
   return React__default.createElement(material.TableCell, {
-    sx: commonTableBodyButtonCellStyles(densePadding)
-  }, renderRowActions ? React__default.createElement(React__default.Fragment, null, renderRowActions(row, tableInstance)) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React__default.createElement(MRT_EditActionButtons, {
+    sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
+  }, renderRowActions ? React__default.createElement(React__default.Fragment, null, renderRowActions(row, tableInstance)) : row.id === ((_tableInstance$state$ = tableInstance.state.currentEditingRow) == null ? void 0 : _tableInstance$state$.id) ? React__default.createElement(MRT_EditActionButtons, {
     row: row
   }) : !renderRowActionMenuItems && enableRowEditing ? React__default.createElement(material.Tooltip, {
     placement: "right",
@@ -1690,13 +1691,17 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
   }, React__default.createElement(material.IconButton, {
     sx: commonIconButtonStyles,
     onClick: handleEdit
-  }, React__default.createElement(EditIcon, null))) : renderRowActionMenuItems ? React__default.createElement(React__default.Fragment, null, React__default.createElement(material.IconButton, {
+  }, React__default.createElement(EditIcon, null))) : renderRowActionMenuItems ? React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: localization.rowActionMenuButtonTitle
+  }, React__default.createElement(material.IconButton, {
     "aria-label": localization.rowActionMenuButtonTitle,
     onClick: handleOpenRowActionMenu,
     size: "small",
-    sx: commonIconButtonStyles,
-    title: localization.rowActionMenuButtonTitle
-  }, React__default.createElement(MoreHorizIcon, null)), React__default.createElement(MRT_RowActionMenu, {
+    sx: commonIconButtonStyles
+  }, React__default.createElement(MoreHorizIcon, null))), React__default.createElement(MRT_RowActionMenu, {
     anchorEl: anchorEl,
     handleEdit: handleEdit,
     row: row,
@@ -1709,7 +1714,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,
@@ -1717,7 +1721,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;
 
@@ -1731,7 +1736,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 ? material.alpha(theme.palette.primary.light, 0.1) : 'transparent'
@@ -1764,9 +1768,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__default.createElement(material.TableBody, Object.assign({}, tableBodyProps, {
@@ -1789,8 +1794,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;
@@ -1855,7 +1860,8 @@ var MRT_TableFooter = function MRT_TableFooter() {
       muiTableFooterProps = _useMRT.muiTableFooterProps,
       tableInstance = _useMRT.tableInstance;
 
-  return React__default.createElement(material.TableFooter, Object.assign({}, muiTableFooterProps), tableInstance.footerGroups.map(function (footerGroup) {
+  var tableFooterProps = muiTableFooterProps instanceof Function ? muiTableFooterProps(tableInstance) : muiTableFooterProps;
+  return React__default.createElement(material.TableFooter, Object.assign({}, tableFooterProps), tableInstance.footerGroups.map(function (footerGroup) {
     return React__default.createElement(MRT_TableFooterRow, {
       key: footerGroup.getFooterGroupProps().key,
       footerGroup: footerGroup
@@ -1870,8 +1876,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__default.createElement(material.Table, Object.assign({}, tableProps), !hideTableHead && React__default.createElement(MRT_TableHead, null), React__default.createElement(MRT_TableBody, null), !hideTableFooter && React__default.createElement(MRT_TableFooter, null));
@@ -1882,7 +1890,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,
@@ -1905,7 +1912,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
   };
 
   return React__default.createElement(material.Collapse, {
-    "in": showSearch,
+    "in": tableInstance.state.showSearch,
     orientation: "horizontal"
   }, React__default.createElement(material.TextField, Object.assign({
     id: "global-search-text-field",
@@ -1945,12 +1952,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__default.createElement(material.Tooltip, {
     arrow: true,
@@ -2062,12 +2069,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__default.createElement(material.Tooltip, {
     arrow: true,
@@ -2085,12 +2092,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__default.createElement(material.Tooltip, {
     arrow: true,
@@ -2114,7 +2121,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);
@@ -2266,7 +2273,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;
@@ -2281,8 +2287,8 @@ var MRT_ToolbarTop = function MRT_ToolbarTop() {
         backgroundImage: "linear-gradient(" + material.alpha(theme.palette.common.white, 0.05) + "," + material.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);
@@ -2309,7 +2315,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;
@@ -2322,12 +2327,12 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
       return _extends({
         backgroundColor: theme.palette.background["default"],
         backgroundImage: "linear-gradient(" + material.alpha(theme.palette.common.white, 0.05) + "," + material.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);
@@ -2337,7 +2342,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,
@@ -2345,6 +2349,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
       muiTableContainerProps = _useMRT.muiTableContainerProps,
       tableInstance = _useMRT.tableInstance;
 
+  var fullScreen = tableInstance.state.fullScreen;
   var originalBodyOverflowStyle = React.useRef();
   React.useEffect(function () {
     if (typeof window !== 'undefined') {
@@ -2357,8 +2362,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]);
@@ -2381,7 +2388,12 @@ var MRT_TableContainer = function MRT_TableContainer() {
   }), !hideToolbarTop && React__default.createElement(MRT_ToolbarTop, null), React__default.createElement(material.Collapse, {
     "in": isFetching || isLoading,
     unmountOnExit: true
-  }, React__default.createElement(material.LinearProgress, null)), React__default.createElement(MRT_Table, null), !hideToolbarBottom && React__default.createElement(MRT_ToolbarBottom, null));
+  }, React__default.createElement(material.LinearProgress, null)), React__default.createElement(material.Box, {
+    sx: {
+      maxWidth: '100%',
+      overflowX: 'auto'
+    }
+  }, React__default.createElement(MRT_Table, null)), !hideToolbarBottom && React__default.createElement(MRT_ToolbarBottom, null));
 };
 
 var MRT_DefaultLocalization_EN = {