material-react-table 0.4.9 → 0.5.2

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

@@ -1,6 +1,6 @@
-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 as TextField$1, Tooltip, InputAdornment, IconButton as IconButton$2, Menu, Divider as Divider$1, styled, MenuItem as MenuItem$2, TableCell as TableCell$3, TableSortLabel, Collapse, Checkbox, TableRow as TableRow$1, TableHead, alpha, TableBody as TableBody$1, TableFooter, Table, FormControlLabel, Switch, Button, TablePagination, useMediaQuery, Chip, Alert as Alert$1, Toolbar as Toolbar$2, Paper, LinearProgress, CircularProgress, TableContainer as TableContainer$1 } from '@mui/material';
+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';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
@@ -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
     })
@@ -191,7 +196,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     }));
   }
 
-  return React.createElement(TextField$1, {
+  return React.createElement(TextField, {
     fullWidth: true,
     id: "filter-" + column.id + "-column",
     inputProps: {
@@ -222,7 +227,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       }, React.createElement(Tooltip, {
         arrow: true,
         title: (_localization$filterT3 = localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT3 : ''
-      }, React.createElement("span", null, React.createElement(IconButton$2, {
+      }, React.createElement("span", null, React.createElement(IconButton, {
         "aria-label": localization.filterTextFieldClearButtonTitle,
         disabled: (filterValue == null ? void 0 : filterValue.length) === 0,
         onClick: handleClear,
@@ -234,10 +239,10 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   });
 };
 
-var MenuItem = /*#__PURE__*/styled(MenuItem$2)({
+var commonMenuItemStyles = {
   display: 'flex',
   gap: '0.75rem'
-});
+};
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
 
@@ -304,47 +309,43 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   }, !disableSortBy && column.canSort && [React.createElement(MenuItem, {
     key: 1,
     disabled: !column.isSorted,
-    onClick: handleClearSort
+    onClick: handleClearSort,
+    sx: commonMenuItemStyles
   }, React.createElement(ClearAllIcon, null), " ", localization.columnActionMenuItemClearSort), React.createElement(MenuItem, {
     key: 2,
     disabled: column.isSorted && !column.isSortedDesc,
-    onClick: handleSortAsc
+    onClick: handleSortAsc,
+    sx: commonMenuItemStyles
   }, React.createElement(SortIcon, null), ' ', (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header))), React.createElement(MenuItem, {
     key: 3,
     disabled: column.isSorted && column.isSortedDesc,
-    onClick: handleSortDesc
+    onClick: handleSortDesc,
+    sx: commonMenuItemStyles
   }, React.createElement(SortIcon, {
     style: {
       transform: 'rotate(180deg) scaleX(-1)'
     }
-  }), ' ', (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header)))], !disableFilters && column.canFilter && [React.createElement(Divider$1, {
+  }), ' ', (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header)))], !disableFilters && column.canFilter && [React.createElement(Divider, {
     key: 0
   }), React.createElement(MenuItem, {
     key: 1,
-    onClick: handleFilterByColumn
-  }, React.createElement(FilterListIcon, null), ' ', (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)))], enableColumnGrouping && column.canGroupBy && [React.createElement(Divider$1, {
+    onClick: handleFilterByColumn,
+    sx: commonMenuItemStyles
+  }, React.createElement(FilterListIcon, null), ' ', (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)))], enableColumnGrouping && column.canGroupBy && [React.createElement(Divider, {
     key: 1
   }), React.createElement(MenuItem, {
     key: 2,
-    onClick: handleGroupByColumn
-  }, React.createElement(DynamicFeedIcon, null), ' ', (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header)))], !disableColumnHiding && [React.createElement(Divider$1, {
+    onClick: handleGroupByColumn,
+    sx: commonMenuItemStyles
+  }, React.createElement(DynamicFeedIcon, null), ' ', (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header)))], !disableColumnHiding && [React.createElement(Divider, {
     key: 0
   }), React.createElement(MenuItem, {
     key: 1,
-    onClick: handleHideColumn
+    onClick: handleHideColumn,
+    sx: commonMenuItemStyles
   }, React.createElement(VisibilityOffIcon, null), ' ', (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header)))]);
 };
 
-var IconButton = /*#__PURE__*/styled(IconButton$2)({
-  opacity: 0.5,
-  transition: 'opacity 0.2s',
-  marginRight: '2px',
-  height: '1.6rem',
-  width: '1.6rem',
-  '&:hover': {
-    opacity: 1
-  }
-});
 var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
   var column = _ref.column;
 
@@ -370,7 +371,17 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }, React.createElement(IconButton, {
     "aria-label": localization.columnActionMenuButtonTitle,
     onClick: handleClick,
-    size: "small"
+    size: "small",
+    sx: {
+      opacity: 0.5,
+      transition: 'opacity 0.2s',
+      marginRight: '2px',
+      height: '1.6rem',
+      width: '1.6rem',
+      '&:hover': {
+        opacity: 1
+      }
+    }
   }, React.createElement(MoreVertIcon, null))), React.createElement(MRT_ColumnActionMenu, {
     anchorEl: anchorEl,
     column: column,
@@ -378,56 +389,27 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }));
 };
 
-var MRT_StyledTableHeadCell = /*#__PURE__*/styled(TableCell$3, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'densePadding' && prop !== 'enableColumnResizing';
-  }
-})(function (_ref) {
-  var densePadding = _ref.densePadding,
-      enableColumnResizing = _ref.enableColumnResizing;
+var commonTableHeadCellStyles = function commonTableHeadCellStyles(densePadding, enableColumnResizing) {
   return {
     fontWeight: 'bold',
     height: '100%',
-    padding: densePadding ? '0.5rem' : '1rem',
-    paddingTop: densePadding ? '0.75rem' : '1.25rem',
+    p: densePadding ? '0.5rem' : '1rem',
+    pt: densePadding ? '0.75rem' : '1.25rem',
     transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
     verticalAlign: 'text-top'
   };
-});
-var TableCellWrapper = /*#__PURE__*/styled('div')({
-  alignContent: 'space-between',
-  display: 'grid',
-  height: '100%'
-});
-var TableCellTopContents = /*#__PURE__*/styled('div')({
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'flex-start'
-});
-var CellFlexItem = /*#__PURE__*/styled('span')({
-  alignItems: 'center',
-  display: 'flex',
-  flexWrap: 'nowrap'
-});
-var Divider = /*#__PURE__*/styled(Divider$1)({
-  borderRightWidth: '2px',
-  borderRadius: '2px',
-  maxHeight: '2rem'
-});
-var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
-  var _column$columns$lengt, _column$columns, _mTableHeadCellProps$, _mcTableHeadCellProps, _localization$columnA, _localization$columnA2;
+};
+var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
+  var _column$columns$lengt, _column$columns, _localization$columnA, _localization$columnA2;
 
-  var column = _ref2.column;
+  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;
@@ -435,19 +417,33 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
   var mcTableHeadCellProps = column.muiTableHeadCellProps instanceof Function ? column.muiTableHeadCellProps(column) : column.muiTableHeadCellProps;
 
   var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps, column.getHeaderProps(), {
-    style: _extends({}, column.getHeaderProps().style, (_mTableHeadCellProps$ = mTableHeadCellProps == null ? void 0 : mTableHeadCellProps.style) != null ? _mTableHeadCellProps$ : {}, (_mcTableHeadCellProps = mcTableHeadCellProps == null ? void 0 : mcTableHeadCellProps.style) != null ? _mcTableHeadCellProps : {})
+    style: _extends({}, column.getHeaderProps().style, mTableHeadCellProps == null ? void 0 : mTableHeadCellProps.style, mcTableHeadCellProps == null ? void 0 : mcTableHeadCellProps.style)
   });
 
   var sortTooltip = column.isSorted ? column.isSortedDesc ? localization.columnActionMenuItemClearSort : (_localization$columnA = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA.replace('{column}', column.Header) : (_localization$columnA2 = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA2.replace('{column}', column.Header);
-  return React.createElement(MRT_StyledTableHeadCell, Object.assign({
-    align: isParentHeader ? 'center' : 'left',
-    densePadding: densePadding,
-    enableColumnResizing: enableColumnResizing
-  }, tableCellProps), React.createElement(TableCellWrapper, null, React.createElement(TableCellTopContents, {
-    style: {
-      justifyContent: isParentHeader ? 'center' : undefined
+  return React.createElement(TableCell, Object.assign({
+    align: isParentHeader ? 'center' : 'left'
+  }, tableCellProps, {
+    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding, enableColumnResizing), tableCellProps == null ? void 0 : tableCellProps.sx)
+  }), React.createElement(Box, {
+    sx: {
+      alignContent: 'space-between',
+      display: 'grid',
+      height: '100%'
+    }
+  }, React.createElement(Box, {
+    sx: {
+      alignItems: 'flex-start',
+      display: 'flex',
+      justifyContent: isParentHeader ? 'center' : 'space-between',
+      width: '100%'
     }
-  }, React.createElement(CellFlexItem, Object.assign({}, column.getSortByToggleProps(), {
+  }, React.createElement(Box, Object.assign({}, column.getSortByToggleProps(), {
+    sx: {
+      alignItems: 'center',
+      display: 'flex',
+      flexWrap: 'nowrap'
+    },
     title: undefined
   }), column.render('Header'), !isParentHeader && column.canSort && React.createElement(Tooltip, {
     arrow: true,
@@ -456,7 +452,13 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
     "aria-label": sortTooltip,
     active: column.isSorted,
     direction: column.isSortedDesc ? 'desc' : 'asc'
-  }))), React.createElement(CellFlexItem, null, !disableColumnActions && !isParentHeader && React.createElement(MRT_ToggleColumnActionMenuButton, {
+  }))), React.createElement(Box, {
+    sx: {
+      alignItems: 'center',
+      display: 'flex',
+      flexWrap: 'nowrap'
+    }
+  }, !disableColumnActions && !isParentHeader && React.createElement(MRT_ToggleColumnActionMenuButton, {
     column: column
   }), enableColumnResizing && !isParentHeader && React.createElement(Divider, Object.assign({
     flexItem: true,
@@ -464,32 +466,110 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
     onDoubleClick: function onDoubleClick() {
       return tableInstance.resetResizing();
     }
-  }, column.getResizerProps())))), !disableFilters && column.canFilter && React.createElement(Collapse, {
-    "in": showFilters
+  }, column.getResizerProps(), {
+    sx: {
+      borderRightWidth: '2px',
+      borderRadius: '2px',
+      maxHeight: '2rem'
+    }
+  })))), !disableFilters && column.canFilter && React.createElement(Collapse, {
+    "in": tableInstance.state.showFilters
   }, React.createElement(MRT_FilterTextField, {
     column: column
   }))));
 };
 
-var MRT_TableButtonCell = /*#__PURE__*/styled(TableCell$3, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'densePadding';
+var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
+  var _cell$column$muiTable;
+
+  var cell = _ref.cell;
+
+  var _useMRT = useMRT(),
+      muiTableBodyCellEditTextFieldProps = _useMRT.muiTableBodyCellEditTextFieldProps,
+      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
+      currentEditingRow = _useMRT.tableInstance.state.currentEditingRow;
+
+  var handleChange = function handleChange(event) {
+    if (currentEditingRow) {
+      cell.row.values[cell.column.id] = event.target.value;
+      setCurrentEditingRow(_extends({}, currentEditingRow));
+    }
+
+    cell.column.onCellEditChange == null ? void 0 : cell.column.onCellEditChange(event, cell);
+  };
+
+  var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps(cell) : muiTableBodyCellEditTextFieldProps;
+  var mcTableBodyCellEditTextFieldProps = cell.column.muiTableBodyCellEditTextFieldProps instanceof Function ? cell.column.muiTableBodyCellEditTextFieldProps(cell) : cell.column.muiTableBodyCellEditTextFieldProps;
+
+  var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps, {
+    style: _extends({}, muiTableBodyCellEditTextFieldProps == null ? void 0 : muiTableBodyCellEditTextFieldProps.style, (_cell$column$muiTable = cell.column.muiTableBodyCellEditTextFieldProps) == null ? void 0 : _cell$column$muiTable.style)
+  });
+
+  if (cell.column.editable && cell.column.Edit) {
+    return React.createElement(React.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
+      cell: cell
+    })));
   }
-})(function (_ref) {
-  var densePadding = _ref.densePadding;
+
+  return React.createElement(TextField, Object.assign({
+    margin: "dense",
+    onChange: handleChange,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    placeholder: cell.column.Header,
+    value: cell.value,
+    variant: "standard"
+  }, textFieldProps));
+};
+
+var commonTableBodyCellStyles = function commonTableBodyCellStyles(densePadding) {
+  return {
+    p: densePadding ? '0.5rem' : '1rem',
+    transition: 'all 0.2s ease-in-out',
+    whiteSpace: densePadding ? 'nowrap' : 'normal'
+  };
+};
+var commonTableBodyButtonCellStyles = function commonTableBodyButtonCellStyles(densePadding) {
   return {
-    padding: densePadding ? '1px' : '0.6rem',
+    p: densePadding ? '1px' : '0.6rem',
     textAlign: 'center',
     transition: 'all 0.2s ease-in-out'
   };
-});
+};
+var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
+  var cell = _ref.cell;
+
+  var _useMRT = useMRT(),
+      onCellClick = _useMRT.onCellClick,
+      muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
+      _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;
+
+  var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps, cell.getCellProps(), {
+    style: _extends({}, cell.getCellProps().style, mTableCellBodyProps == null ? void 0 : mTableCellBodyProps.style, mcTableCellBodyProps == null ? void 0 : mcTableCellBodyProps.style)
+  });
+
+  return React.createElement(TableCell, Object.assign({
+    onClick: function onClick(event) {
+      return onCellClick == null ? void 0 : onCellClick(event, cell);
+    }
+  }, tableCellProps, {
+    sx: _extends({}, commonTableBodyCellStyles(densePadding), tableCellProps == null ? void 0 : tableCellProps.sx)
+  }), (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React.createElement(MRT_EditCellTextField, {
+    cell: cell
+  }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
+};
 
 var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var row = _ref.row,
       selectAll = _ref.selectAll;
 
   var _useMRT = useMRT(),
-      densePadding = _useMRT.densePadding,
       localization = _useMRT.localization,
       onRowSelectChange = _useMRT.onRowSelectChange,
       onSelectAllChange = _useMRT.onSelectAllChange,
@@ -510,8 +590,8 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   };
 
   var checkboxProps = selectAll ? tableInstance.getToggleAllRowsSelectedProps() : row == null ? void 0 : row.getToggleRowSelectedProps();
-  return React.createElement(MRT_TableButtonCell, {
-    densePadding: densePadding
+  return React.createElement(TableCell, {
+    sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
   }, React.createElement(Tooltip, {
     arrow: true,
     enterDelay: 1000,
@@ -529,16 +609,16 @@ 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(MRT_TableButtonCell, Object.assign({
-    size: "small",
-    densePadding: densePadding
-  }, tableInstance.getToggleAllRowsExpandedProps()), React.createElement(IconButton$2, {
+  return React.createElement(TableCell, Object.assign({
+    size: "small"
+  }, tableInstance.getToggleAllRowsExpandedProps(), {
+    sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
+  }), React.createElement(IconButton, {
     "aria-label": localization.expandAllButtonTitle,
     title: localization.expandAllButtonTitle
   }, React.createElement(DoubleArrowDownIcon, {
@@ -550,8 +630,6 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
 };
 
 var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
-  var _mTableBodyCellrops$s;
-
   var width = _ref.width;
 
   var _useMRT = useMRT(),
@@ -560,30 +638,32 @@ var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
   var mTableBodyCellrops = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
 
   var tableCellProps = _extends({}, mTableBodyCellrops, {
-    style: _extends({
-      width: width
-    }, (_mTableBodyCellrops$s = mTableBodyCellrops == null ? void 0 : mTableBodyCellrops.style) != null ? _mTableBodyCellrops$s : {})
+    style: _extends({}, mTableBodyCellrops == null ? void 0 : mTableBodyCellrops.style)
   });
 
-  return React.createElement(TableCell$3, Object.assign({}, tableCellProps));
+  return React.createElement(TableCell, Object.assign({}, tableCellProps, {
+    sx: _extends({
+      width: width
+    }, tableCellProps == null ? void 0 : tableCellProps.sx)
+  }));
 };
 
 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(MRT_StyledTableHeadCell, {
-    densePadding: densePadding,
+  return React.createElement(TableCell, {
     style: {
       textAlign: 'center'
-    }
+    },
+    sx: _extends({}, commonTableHeadCellStyles(densePadding), {
+      textAlign: 'center'
+    })
   }, localization.actionsHeadColumnTitle);
 };
 
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
-  var _mTableHeadRowProps$s;
-
   var headerGroup = _ref.headerGroup;
 
   var _useMRT = useMRT(),
@@ -608,10 +688,12 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
   var mTableHeadRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps(headerGroup) : muiTableHeadRowProps;
 
   var tableRowProps = _extends({}, mTableHeadRowProps, headerGroup.getHeaderGroupProps(), {
-    style: _extends({}, headerGroup.getHeaderGroupProps().style, (_mTableHeadRowProps$s = mTableHeadRowProps == null ? void 0 : mTableHeadRowProps.style) != null ? _mTableHeadRowProps$s : {})
+    style: _extends({}, headerGroup.getHeaderGroupProps().style, mTableHeadRowProps == null ? void 0 : mTableHeadRowProps.style)
   });
 
-  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), enableRowNumbers && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(MRT_StyledTableHeadCell, null, "#")), (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, {
+  return React.createElement(TableRow, Object.assign({}, tableRowProps), enableRowNumbers && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(TableCell, {
+    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, {
     selectAll: true
@@ -639,107 +721,8 @@ var MRT_TableHead = function MRT_TableHead() {
   }));
 };
 
-var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
-  var _cell$column$muiTable;
-
-  var cell = _ref.cell;
-
-  var _useMRT = useMRT(),
-      currentEditingRow = _useMRT.currentEditingRow,
-      muiTableBodyCellEditTextFieldProps = _useMRT.muiTableBodyCellEditTextFieldProps,
-      setCurrentEditingRow = _useMRT.setCurrentEditingRow;
-
-  var handleChange = function handleChange(event) {
-    if (currentEditingRow) {
-      cell.row.values[cell.column.id] = event.target.value;
-      setCurrentEditingRow(_extends({}, currentEditingRow));
-    }
-
-    cell.column.onCellEditChange == null ? void 0 : cell.column.onCellEditChange(event, cell);
-  };
-
-  var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps(cell) : muiTableBodyCellEditTextFieldProps;
-  var mcTableBodyCellEditTextFieldProps = cell.column.muiTableBodyCellEditTextFieldProps instanceof Function ? cell.column.muiTableBodyCellEditTextFieldProps(cell) : cell.column.muiTableBodyCellEditTextFieldProps;
-
-  var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps, {
-    style: _extends({}, muiTableBodyCellEditTextFieldProps == null ? void 0 : muiTableBodyCellEditTextFieldProps.style, (_cell$column$muiTable = cell.column.muiTableBodyCellEditTextFieldProps) == null ? void 0 : _cell$column$muiTable.style)
-  });
-
-  if (cell.column.editable && cell.column.Edit) {
-    return React.createElement(React.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
-      cell: cell
-    })));
-  }
-
-  return React.createElement(TextField$1, Object.assign({
-    margin: "dense",
-    onChange: handleChange,
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
-    placeholder: cell.column.Header,
-    value: cell.value,
-    variant: "standard"
-  }, textFieldProps));
-};
-
-var MRT_StyledTableBodyCell = /*#__PURE__*/styled(TableCell$3, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'densePadding';
-  }
-})(function (_ref) {
-  var densePadding = _ref.densePadding;
-  return {
-    padding: densePadding ? '0.5rem' : '1rem',
-    transition: 'all 0.2s ease-in-out',
-    whiteSpace: densePadding ? 'nowrap' : 'normal'
-  };
-});
-var MRT_TableBodyCell = function MRT_TableBodyCell(_ref2) {
-  var _mTableCellBodyProps$, _mcTableCellBodyProps;
-
-  var cell = _ref2.cell;
-
-  var _useMRT = useMRT(),
-      onCellClick = _useMRT.onCellClick,
-      muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
-      densePadding = _useMRT.densePadding,
-      currentEditingRow = _useMRT.currentEditingRow;
-
-  var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
-  var mcTableCellBodyProps = cell.column.muiTableBodyCellProps instanceof Function ? cell.column.muiTableBodyCellProps(cell) : cell.column.muiTableBodyCellProps;
-
-  var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps, cell.getCellProps(), {
-    style: _extends({}, cell.getCellProps().style, (_mTableCellBodyProps$ = mTableCellBodyProps == null ? void 0 : mTableCellBodyProps.style) != null ? _mTableCellBodyProps$ : {}, (_mcTableCellBodyProps = mcTableCellBodyProps == null ? void 0 : mcTableCellBodyProps.style) != null ? _mcTableCellBodyProps : {})
-  });
-
-  return React.createElement(MRT_StyledTableBodyCell, Object.assign({
-    densePadding: densePadding,
-    onClick: function onClick(event) {
-      return onCellClick == null ? void 0 : onCellClick(event, cell);
-    }
-  }, tableCellProps), (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React.createElement(MRT_EditCellTextField, {
-    cell: cell
-  }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
-};
-
-var TableCell = /*#__PURE__*/styled(TableCell$3, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'isExpanded';
-  }
-})(function (_ref) {
-  var isExpanded = _ref.isExpanded;
-  return {
-    borderBottom: !isExpanded ? 'none' : undefined,
-    paddingBottom: isExpanded ? '1rem' : 0,
-    paddingTop: isExpanded ? '1rem' : 0,
-    transition: 'all 0.2s ease-in-out'
-  };
-});
-var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
-  var _mTableBodyRowProps$s;
-
-  var row = _ref2.row;
+var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
+  var row = _ref.row;
 
   var _useMRT = useMRT(),
       muiTableBodyRowProps = _useMRT.muiTableBodyRowProps,
@@ -748,49 +731,41 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
       renderDetailPanel = _useMRT.renderDetailPanel,
       tableInstance = _useMRT.tableInstance;
 
-  var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
-
-  var tableRowProps = _extends({}, mTableBodyRowProps, row.getRowProps(), {
-    style: _extends({}, row.getRowProps().style, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
-  });
-
+  var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
   var tableCellProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps(row) : muiTableDetailPanelProps;
-  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), React.createElement(TableCell, Object.assign({
+  return React.createElement(TableRow, Object.assign({}, tableRowProps), React.createElement(TableCell, Object.assign({
     colSpan: tableInstance.visibleColumns.length + 10,
-    isExpanded: row.isExpanded,
     onClick: function onClick(event) {
       return onDetailPanelClick == null ? void 0 : onDetailPanelClick(event, row);
     }
-  }, tableCellProps), React.createElement(Collapse, {
+  }, tableCellProps, {
+    sx: _extends({
+      borderBottom: !row.isExpanded ? 'none' : undefined,
+      pb: row.isExpanded ? '1rem' : 0,
+      pt: row.isExpanded ? '1rem' : 0,
+      transition: 'all 0.2s ease-in-out'
+    }, tableCellProps == null ? void 0 : tableCellProps.sx)
+  }), React.createElement(Collapse, {
     "in": row.isExpanded
   }, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
 };
 
-var TableCell$1 = /*#__PURE__*/styled(MRT_TableButtonCell, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'depth';
-  }
-})(function (_ref) {
-  var depth = _ref.depth;
-  return {
-    paddingLeft: depth + 0.5 + "rem",
-    textAlign: 'left'
-  };
-});
-var MRT_ExpandButton = function MRT_ExpandButton(_ref2) {
-  var row = _ref2.row;
+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$1, {
+  return React.createElement(TableCell, {
     size: "small",
-    densePadding: densePadding,
-    depth: row.depth
-  }, React.createElement(IconButton$2, Object.assign({
+    sx: _extends({}, commonTableBodyButtonCellStyles(densePadding), {
+      pl: row.depth + 0.5 + "rem",
+      textAlign: 'left'
+    })
+  }, React.createElement(IconButton, Object.assign({
     "aria-label": localization.expandButtonTitle,
     disabled: !row.canExpand && !renderDetailPanel,
     title: localization.expandButtonTitle
@@ -802,10 +777,6 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref2) {
   })));
 };
 
-var MenuItem$1 = /*#__PURE__*/styled(MenuItem$2)({
-  display: 'flex',
-  gap: '0.75rem'
-});
 var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
   var _renderRowActionMenuI;
 
@@ -827,7 +798,11 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     onClose: function onClose() {
       return setAnchorEl(null);
     }
-  }, enableRowEditing && React.createElement(MenuItem$1, {
+  }, enableRowEditing && React.createElement(MenuItem, {
+    sx: {
+      display: 'flex',
+      gap: '0.75rem'
+    },
     onClick: handleEdit
   }, React.createElement(EditIcon, null), " ", localization.rowActionMenuItemEdit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
     return setAnchorEl(null);
@@ -1594,10 +1569,6 @@ try {
 }
 });
 
-var EditActionButtonWrappers = /*#__PURE__*/styled('div')({
-  display: 'flex',
-  gap: '0.75rem'
-});
 var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
   var row = _ref.row;
 
@@ -1606,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;
@@ -1640,23 +1611,28 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
     };
   }();
 
-  return React.createElement(EditActionButtonWrappers, null, React.createElement(Tooltip, {
+  return React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      gap: '0.75rem'
+    }
+  }, React.createElement(Tooltip, {
     arrow: true,
     title: localization.rowActionButtonCancel
-  }, React.createElement(IconButton$2, {
+  }, React.createElement(IconButton, {
     "aria-label": localization.rowActionButtonCancel,
     onClick: handleCancel
   }, React.createElement(CancelIcon, null))), React.createElement(Tooltip, {
     arrow: true,
     title: localization.rowActionButtonSave
-  }, React.createElement(IconButton$2, {
+  }, React.createElement(IconButton, {
     "aria-label": localization.rowActionButtonSave,
     color: "info",
     onClick: handleSave
   }, React.createElement(SaveIcon, null))));
 };
 
-var IconButton$1 = /*#__PURE__*/styled(IconButton$2)({
+var commonIconButtonStyles = {
   opacity: 0.5,
   transition: 'opacity 0.2s',
   marginRight: '2px',
@@ -1665,13 +1641,13 @@ var IconButton$1 = /*#__PURE__*/styled(IconButton$2)({
   '&:hover': {
     opacity: 1
   }
-});
+};
 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,
@@ -1697,22 +1673,28 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
     setAnchorEl(null);
   };
 
-  return React.createElement(MRT_TableButtonCell, {
-    densePadding: densePadding
-  }, renderRowActions ? React.createElement(React.Fragment, null, renderRowActions(row, tableInstance)) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React.createElement(MRT_EditActionButtons, {
+  return React.createElement(TableCell, {
+    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",
     arrow: true,
     title: localization.rowActionMenuItemEdit
-  }, React.createElement(IconButton$1, {
+  }, React.createElement(IconButton, {
+    sx: commonIconButtonStyles,
     onClick: handleEdit
-  }, React.createElement(EditIcon, null))) : renderRowActionMenuItems ? React.createElement(React.Fragment, null, React.createElement(IconButton$1, {
+  }, 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,
-    title: localization.rowActionMenuButtonTitle,
     onClick: handleOpenRowActionMenu,
-    size: "small"
-  }, React.createElement(MoreHorizIcon, null)), React.createElement(MRT_RowActionMenu, {
+    size: "small",
+    sx: commonIconButtonStyles
+  }, React.createElement(MoreHorizIcon, null))), React.createElement(MRT_RowActionMenu, {
     anchorEl: anchorEl,
     handleEdit: handleEdit,
     row: row,
@@ -1720,21 +1702,8 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
   })) : null);
 };
 
-var TableRow = /*#__PURE__*/styled(TableRow$1, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'isSelected';
-  }
-})(function (_ref) {
-  var isSelected = _ref.isSelected,
-      theme = _ref.theme;
-  return {
-    backgroundColor: isSelected ? alpha(theme.palette.primary.light, 0.1) : 'transparent'
-  };
-});
-var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
-  var _mTableBodyRowProps$s;
-
-  var row = _ref2.row;
+var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
+  var row = _ref.row;
 
   var _useMRT = useMRT(),
       anyRowsCanExpand = _useMRT.anyRowsCanExpand,
@@ -1745,21 +1714,29 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
       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;
 
   var tableRowProps = _extends({}, mTableBodyRowProps, row.getRowProps(), {
-    style: _extends({}, row.getRowProps().style, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
+    style: _extends({}, row.getRowProps().style, mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style)
   });
 
   return React.createElement(React.Fragment, null, React.createElement(TableRow, Object.assign({
-    isSelected: row.isSelected,
     hover: true,
     onClick: function onClick(event) {
       return onRowClick == null ? void 0 : onRowClick(event, row);
     }
-  }, tableRowProps), enableRowNumbers && React.createElement(MRT_StyledTableBodyCell, null, row.index + 1), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React.createElement(MRT_ToggleRowActionMenuButton, {
+  }, tableRowProps, {
+    sx: function sx(theme) {
+      return _extends({
+        backgroundColor: row.isSelected ? alpha(theme.palette.primary.light, 0.1) : 'transparent'
+      }, tableRowProps == null ? void 0 : tableRowProps.sx);
+    }
+  }), enableRowNumbers && React.createElement(TableCell, {
+    sx: _extends({}, commonTableBodyCellStyles(densePadding))
+  }, row.index + 1), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
   }), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_ExpandButton, {
     row: row
@@ -1777,12 +1754,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
   }));
 };
 
-var TableBody = /*#__PURE__*/styled(TableBody$1)({
-  overflowY: 'hidden'
-});
 var MRT_TableBody = function MRT_TableBody() {
-  var _muiTableBodyProps$st;
-
   var _useMRT = useMRT(),
       tableInstance = _useMRT.tableInstance,
       muiTableBodyProps = _useMRT.muiTableBodyProps,
@@ -1791,10 +1763,14 @@ var MRT_TableBody = function MRT_TableBody() {
   var rows = manualPagination ? tableInstance.rows : tableInstance.page;
 
   var tableBodyProps = _extends({}, muiTableBodyProps, tableInstance.getTableBodyProps(), {
-    style: _extends({}, tableInstance.getTableBodyProps().style, (_muiTableBodyProps$st = muiTableBodyProps == null ? void 0 : muiTableBodyProps.style) != null ? _muiTableBodyProps$st : {})
+    style: _extends({}, tableInstance.getTableBodyProps().style, muiTableBodyProps == null ? void 0 : muiTableBodyProps.style)
   });
 
-  return React.createElement(TableBody, Object.assign({}, tableBodyProps), rows.map(function (row) {
+  return React.createElement(TableBody, Object.assign({}, tableBodyProps, {
+    sx: _extends({
+      overflowY: 'hidden'
+    }, tableBodyProps == null ? void 0 : tableBodyProps.sx)
+  }), rows.map(function (row) {
     tableInstance.prepareRow(row);
     return React.createElement(MRT_TableBodyRow, {
       key: row.getRowProps().key,
@@ -1803,49 +1779,38 @@ var MRT_TableBody = function MRT_TableBody() {
   }));
 };
 
-var TableCell$2 = /*#__PURE__*/styled(TableCell$3, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'densePadding' && prop !== 'enableColumnResizing';
-  }
-})(function (_ref) {
-  var densePadding = _ref.densePadding,
-      enableColumnResizing = _ref.enableColumnResizing;
-  return {
-    fontWeight: 'bold',
-    verticalAlign: 'text-top',
-    padding: densePadding ? '0.5rem' : '1rem',
-    transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out"
-  };
-});
-var MRT_TableFooterCell = function MRT_TableFooterCell(_ref2) {
-  var _column$columns$lengt, _column$columns, _mTableFooterCellProp, _mcTableFooterCellPro;
+var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
+  var _column$columns$lengt, _column$columns;
 
-  var column = _ref2.column;
+  var column = _ref.column;
 
   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;
   var mcTableFooterCellProps = column.muiTableFooterCellProps instanceof Function ? column.muiTableFooterCellProps(column) : column.muiTableFooterCellProps;
 
   var tableCellProps = _extends({}, mTableFooterCellProps, mcTableFooterCellProps, column.getFooterProps(), {
-    style: _extends({}, column.getFooterProps().style, (_mTableFooterCellProp = mTableFooterCellProps == null ? void 0 : mTableFooterCellProps.style) != null ? _mTableFooterCellProp : {}, (_mcTableFooterCellPro = mcTableFooterCellProps == null ? void 0 : mcTableFooterCellProps.style) != null ? _mcTableFooterCellPro : {})
+    style: _extends({}, column.getFooterProps().style, mTableFooterCellProps == null ? void 0 : mTableFooterCellProps.style, mcTableFooterCellProps == null ? void 0 : mcTableFooterCellProps.style)
   });
 
-  return React.createElement(TableCell$2, Object.assign({
+  return React.createElement(TableCell, Object.assign({
     align: isParentHeader ? 'center' : 'left',
-    densePadding: densePadding,
-    enableColumnResizing: enableColumnResizing,
     variant: "head"
-  }, tableCellProps), column.render('Footer'));
+  }, tableCellProps, {
+    sx: _extends({
+      fontWeight: 'bold',
+      verticalAlign: 'text-top',
+      p: densePadding ? '0.5rem' : '1rem',
+      transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out"
+    }, tableCellProps == null ? void 0 : tableCellProps.sx)
+  }), column.render('Footer'));
 };
 
 var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
-  var _mTableFooterRowProps;
-
   var footerGroup = _ref.footerGroup;
 
   var _useMRT = useMRT(),
@@ -1867,10 +1832,10 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
   var mTableFooterRowProps = muiTableFooterRowProps instanceof Function ? muiTableFooterRowProps(footerGroup) : muiTableFooterRowProps;
 
   var tableRowProps = _extends({}, mTableFooterRowProps, footerGroup.getFooterGroupProps(), {
-    style: _extends({}, footerGroup.getFooterGroupProps().style, (_mTableFooterRowProps = mTableFooterRowProps == null ? void 0 : mTableFooterRowProps.style) != null ? _mTableFooterRowProps : {})
+    style: _extends({}, footerGroup.getFooterGroupProps().style, mTableFooterRowProps == null ? void 0 : mTableFooterRowProps.style)
   });
 
-  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), enableRowNumbers && React.createElement(MRT_TableSpacerCell, null), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React.createElement(MRT_TableSpacerCell, null), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_TableSpacerCell, {
+  return React.createElement(TableRow, Object.assign({}, tableRowProps), enableRowNumbers && React.createElement(MRT_TableSpacerCell, null), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React.createElement(MRT_TableSpacerCell, null), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_TableSpacerCell, {
     width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
   }), enableSelection && React.createElement(MRT_TableSpacerCell, {
     width: "1rem"
@@ -1896,8 +1861,6 @@ var MRT_TableFooter = function MRT_TableFooter() {
 };
 
 var MRT_Table = function MRT_Table() {
-  var _muiTableProps$style;
-
   var _useMRT = useMRT(),
       tableInstance = _useMRT.tableInstance,
       muiTableProps = _useMRT.muiTableProps,
@@ -1905,21 +1868,17 @@ var MRT_Table = function MRT_Table() {
       hideTableFooter = _useMRT.hideTableFooter;
 
   var tableProps = _extends({}, muiTableProps, tableInstance.getTableProps(), {
-    style: _extends({}, tableInstance.getTableProps().style, (_muiTableProps$style = muiTableProps == null ? void 0 : muiTableProps.style) != null ? _muiTableProps$style : {})
+    style: _extends({}, tableInstance.getTableProps().style, muiTableProps == null ? void 0 : muiTableProps.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));
 };
 
-var TextField = /*#__PURE__*/styled(TextField$1)({
-  justifySelf: 'end'
-});
 var MRT_SearchTextField = function MRT_SearchTextField() {
   var _useMRT = useMRT(),
       _useMRT$icons = _useMRT.icons,
       SearchIcon = _useMRT$icons.SearchIcon,
       CloseIcon = _useMRT$icons.CloseIcon,
-      showSearch = _useMRT.showSearch,
       localization = _useMRT.localization,
       muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
       onGlobalFilterChange = _useMRT.onGlobalFilterChange,
@@ -1942,7 +1901,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",
@@ -1961,7 +1920,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
       })),
       endAdornment: React.createElement(InputAdornment, {
         position: "end"
-      }, React.createElement(IconButton$2, {
+      }, React.createElement(IconButton, {
         "aria-label": localization.searchTextFieldClearButtonTitle,
         disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
         onClick: handleClear,
@@ -1971,30 +1930,34 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
         fontSize: "small"
       })))
     }
-  }, muiSearchTextFieldProps)));
+  }, muiSearchTextFieldProps, {
+    sx: _extends({
+      justifySelf: 'end'
+    }, muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.sx)
+  })));
 };
 
-var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
+var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_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;
+      FullscreenExitIcon = _useMRT$icons.FullscreenExitIcon,
+      FullscreenIcon = _useMRT$icons.FullscreenIcon,
+      localization = _useMRT.localization,
+      setFullScreen = _useMRT.setFullScreen,
+      fullScreen = _useMRT.tableInstance.state.fullScreen;
 
   return React.createElement(Tooltip, {
     arrow: true,
-    title: localization.toggleFilterButtonTitle
-  }, React.createElement(IconButton$2, Object.assign({
+    title: localization.toggleFullScreenButtonTitle
+  }, React.createElement(IconButton, Object.assign({
     "aria-label": localization.toggleFilterButtonTitle,
     onClick: function onClick() {
-      return setShowFilters(!showFilters);
+      return setFullScreen(!fullScreen);
     },
     size: "small"
-  }, rest), showFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
+  }, rest), fullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
 };
 
 var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
@@ -2019,9 +1982,9 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     }
   };
 
-  return React.createElement(React.Fragment, null, React.createElement(MenuItem$2, {
-    style: {
-      paddingLeft: (column.depth + 0.5) * 2 + "rem"
+  return React.createElement(React.Fragment, null, React.createElement(MenuItem, {
+    sx: {
+      pl: (column.depth + 0.5) * 2 + "rem"
     }
   }, React.createElement(FormControlLabel, {
     checked: switchChecked,
@@ -2038,11 +2001,6 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   }));
 };
 
-var MenuButtons = /*#__PURE__*/styled('div')({
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 0.5rem 0.5rem 0.5rem'
-});
 var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
   var rest = _extends({}, _ref);
 
@@ -2062,7 +2020,7 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
   return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
     arrow: true,
     title: localization.showHideColumnsButtonTitle
-  }, React.createElement(IconButton$2, Object.assign({
+  }, React.createElement(IconButton, Object.assign({
     "aria-label": localization.showHideColumnsButtonTitle,
     onClick: handleClick,
     size: "small"
@@ -2072,7 +2030,13 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
     onClose: function onClose() {
       return setAnchorEl(null);
     }
-  }, React.createElement(MenuButtons, null, React.createElement(Button, {
+  }, React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      p: '0 0.5rem 0.5rem 0.5rem'
+    }
+  }, React.createElement(Button, {
     disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
     onClick: function onClick() {
       return tableInstance.toggleHideAllColumns(true);
@@ -2082,7 +2046,7 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
     onClick: function onClick() {
       return tableInstance.toggleHideAllColumns(false);
     }
-  }, localization.columnShowHideMenuShowAll)), React.createElement(Divider$1, null), tableInstance.columns.map(function (column, index) {
+  }, localization.columnShowHideMenuShowAll)), React.createElement(Divider, null), tableInstance.columns.map(function (column, index) {
     return React.createElement(MRT_ShowHideColumnsMenu, {
       key: index + "-" + column.id,
       column: column
@@ -2094,17 +2058,17 @@ 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,
     title: localization.toggleDensePaddingSwitchTitle
-  }, React.createElement(IconButton$2, Object.assign({
+  }, React.createElement(IconButton, Object.assign({
     "aria-label": localization.toggleDensePaddingSwitchTitle,
     onClick: function onClick() {
       return setDensePadding(!densePadding);
@@ -2113,6 +2077,29 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
   }, rest), densePadding ? React.createElement(DensitySmallIcon, null) : React.createElement(DensityMediumIcon, null)));
 };
 
+var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
+  var rest = _extends({}, _ref);
+
+  var _useMRT = useMRT(),
+      _useMRT$icons = _useMRT.icons,
+      FilterListIcon = _useMRT$icons.FilterListIcon,
+      FilterListOffIcon = _useMRT$icons.FilterListOffIcon,
+      localization = _useMRT.localization,
+      setShowFilters = _useMRT.setShowFilters,
+      showFilters = _useMRT.tableInstance.state.showFilters;
+
+  return React.createElement(Tooltip, {
+    arrow: true,
+    title: localization.toggleFilterButtonTitle
+  }, React.createElement(IconButton, Object.assign({
+    "aria-label": localization.toggleFilterButtonTitle,
+    onClick: function onClick() {
+      return setShowFilters(!showFilters);
+    },
+    size: "small"
+  }, rest), showFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
+};
+
 var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
   var rest = _extends({}, _ref);
 
@@ -2123,7 +2110,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);
@@ -2137,40 +2124,12 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
   return React.createElement(Tooltip, {
     arrow: true,
     title: localization.toggleSearchButtonTitle
-  }, React.createElement(IconButton$2, Object.assign({
+  }, React.createElement(IconButton, Object.assign({
     size: "small",
     onClick: handleToggleSearch
   }, rest), showSearch ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
 };
 
-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;
-
-  return React.createElement(Tooltip, {
-    arrow: true,
-    title: localization.toggleFullScreenButtonTitle
-  }, React.createElement(IconButton$2, Object.assign({
-    "aria-label": localization.toggleFilterButtonTitle,
-    onClick: function onClick() {
-      return setFullScreen(!fullScreen);
-    },
-    size: "small"
-  }, rest), fullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
-};
-
-var ToolbarButtonsContainer = /*#__PURE__*/styled('div')({
-  display: 'flex',
-  gap: '0.5rem',
-  alignItems: 'center'
-});
 var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons() {
   var _useMRT = useMRT(),
       disableFilters = _useMRT.disableFilters,
@@ -2191,7 +2150,14 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons() {
     }));
   }
 
-  return React.createElement(ToolbarButtonsContainer, null, !disableGlobalFilter && React.createElement(MRT_ToggleSearchButton, null), !disableFilters && React.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React.createElement(MRT_ToggleDensePaddingButton, null), !disableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, null));
+  return React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      gap: '0.5rem',
+      alignItems: 'center',
+      p: '0 0.5rem'
+    }
+  }, !disableGlobalFilter && React.createElement(MRT_ToggleSearchButton, null), !disableFilters && React.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React.createElement(MRT_ToggleDensePaddingButton, null), !disableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, null));
 };
 
 var MRT_TablePagination = function MRT_TablePagination() {
@@ -2221,35 +2187,16 @@ var MRT_TablePagination = function MRT_TablePagination() {
       }
     },
     showFirstButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
-    showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
-    style: {
-      padding: 0,
+    showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2
+  }, tablePaginationProps, {
+    sx: _extends({
+      p: 0,
       position: 'relative',
       zIndex: 2
-    }
-  }, tablePaginationProps));
+    }, tablePaginationProps == null ? void 0 : tablePaginationProps.sx)
+  }));
 };
 
-var Alert = /*#__PURE__*/styled(Alert$1, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'displayAbsolute' && prop !== 'toolbarPosition';
-  }
-})(function (_ref) {
-  var displayAbsolute = _ref.displayAbsolute,
-      toolbarPosition = _ref.toolbarPosition;
-  return {
-    borderRadius: 0,
-    fontSize: '1rem',
-    left: 0,
-    marginLeft: !displayAbsolute ? '-0.5rem' : undefined,
-    padding: toolbarPosition === 'bottom' ? '0 1rem' : '0.5rem 1.25rem',
-    position: displayAbsolute ? 'absolute' : 'relative',
-    right: 0,
-    top: 0,
-    width: "calc(100% - " + (displayAbsolute ? '2.5rem' : '1.5rem') + ")",
-    zIndex: 2
-  };
-});
 var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
   var _localization$toolbar, _localization$toolbar2;
 
@@ -2284,41 +2231,27 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
     "in": !!selectMessage || !!groupedByMessage,
     timeout: displayAbsolute ? 0 : 200
   }, React.createElement(Alert, Object.assign({
-    displayAbsolute: displayAbsolute,
+    color: "info",
     icon: false,
-    color: "info"
-  }, alertProps), selectMessage, groupedByMessage));
+    sx: _extends({
+      borderRadius: 0,
+      fontSize: '1rem',
+      left: 0,
+      p: 0,
+      position: displayAbsolute ? 'absolute' : 'relative',
+      right: 0,
+      minHeight: '3.5rem',
+      top: 0,
+      width: '100%',
+      zIndex: 2
+    }, alertProps == null ? void 0 : alertProps.sx)
+  }, alertProps), React.createElement(Box, {
+    sx: {
+      p: '0.5rem 1rem'
+    }
+  }, selectMessage, groupedByMessage)));
 };
 
-var Toolbar = /*#__PURE__*/styled(Toolbar$2, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'fullScreen';
-  }
-})(function (_ref) {
-  var fullScreen = _ref.fullScreen,
-      theme = _ref.theme;
-  return {
-    backgroundColor: theme.palette.background["default"],
-    backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
-    display: 'grid',
-    padding: '0 0.5rem !important',
-    position: fullScreen ? 'sticky' : undefined,
-    top: fullScreen ? '0' : undefined,
-    width: 'calc(100% - 1rem)',
-    zIndex: 1
-  };
-});
-var ToolbarTopRow = /*#__PURE__*/styled('div')({
-  padding: '0.5rem',
-  display: 'flex',
-  justifyContent: 'space-between'
-});
-var ToolbarActionsContainer = /*#__PURE__*/styled('div')({
-  display: 'flex',
-  gap: '0.5rem',
-  position: 'relative',
-  zIndex: 3
-});
 var MRT_ToolbarTop = function MRT_ToolbarTop() {
   var _renderToolbarCustomA;
 
@@ -2329,91 +2262,75 @@ 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;
 
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
   return React.createElement(Toolbar, Object.assign({
-    fullScreen: fullScreen,
     variant: "dense"
-  }, toolbarProps), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, null), React.createElement(ToolbarTopRow, null, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React.createElement("span", null), React.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React.createElement(MRT_SearchTextField, null), !hideToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, null))), React.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)));
+  }, toolbarProps, {
+    sx: function sx(theme) {
+      return _extends({
+        backgroundColor: theme.palette.background["default"],
+        backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
+        display: 'grid',
+        p: '0 !important',
+        position: tableInstance.state.fullScreen ? 'sticky' : undefined,
+        top: tableInstance.state.fullScreen ? '0' : undefined,
+        width: '100%',
+        zIndex: 1
+      }, toolbarProps == null ? void 0 : toolbarProps.sx);
+    }
+  }), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, null), React.createElement(Box, {
+    sx: {
+      p: '0.5rem',
+      display: 'flex',
+      justifyContent: 'space-between'
+    }
+  }, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React.createElement("span", null), React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      gap: '0.5rem',
+      position: 'relative',
+      zIndex: 3
+    }
+  }, !disableGlobalFilter && React.createElement(MRT_SearchTextField, null), !hideToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, null))), React.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)));
 };
 
-var Toolbar$1 = /*#__PURE__*/styled(Toolbar$2, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'fullScreen';
-  }
-})(function (_ref) {
-  var fullScreen = _ref.fullScreen,
-      theme = _ref.theme;
-  return {
-    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,
-    display: 'flex',
-    justifyContent: 'space-between',
-    overflowY: 'hidden',
-    padding: '0 0.5rem !important',
-    position: fullScreen ? 'fixed' : undefined,
-    width: 'calc(100% - 1rem)',
-    zIndex: 1
-  };
-});
 var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
   var _useMRT = useMRT(),
       hideToolbarInternalActions = _useMRT.hideToolbarInternalActions,
       manualPagination = _useMRT.manualPagination,
       muiTableToolbarBottomProps = _useMRT.muiTableToolbarBottomProps,
       positionPagination = _useMRT.positionPagination,
-      fullScreen = _useMRT.fullScreen,
       positionToolbarActions = _useMRT.positionToolbarActions,
       positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
       tableInstance = _useMRT.tableInstance;
 
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
-  return React.createElement(Toolbar$1, Object.assign({
-    fullScreen: fullScreen,
+  return React.createElement(Toolbar, Object.assign({
     variant: "dense"
-  }, toolbarProps), !hideToolbarInternalActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarInternalButtons, null) : React.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null));
+  }, toolbarProps, {
+    sx: function sx(theme) {
+      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: tableInstance.state.fullScreen ? '0' : undefined,
+        display: 'flex',
+        justifyContent: 'space-between',
+        overflowY: 'hidden',
+        p: '0 0.5rem !important',
+        position: tableInstance.state.fullScreen ? 'fixed' : undefined,
+        width: 'calc(100% - 1rem)',
+        zIndex: 1
+      }, toolbarProps == null ? void 0 : toolbarProps.sx);
+    }
+  }), !hideToolbarInternalActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarInternalButtons, null) : React.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null));
 };
 
-var TableContainer = /*#__PURE__*/styled(TableContainer$1, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'fullScreen';
-  }
-})(function (_ref) {
-  var fullScreen = _ref.fullScreen;
-  return {
-    bottom: fullScreen ? '0' : undefined,
-    height: fullScreen ? '100%' : undefined,
-    left: fullScreen ? '0' : undefined,
-    margin: fullScreen ? '0' : undefined,
-    position: fullScreen ? 'fixed' : undefined,
-    right: fullScreen ? '0' : undefined,
-    top: fullScreen ? '0' : undefined,
-    transition: 'all 0.2s ease-in-out',
-    width: fullScreen ? '100vw' : undefined,
-    zIndex: fullScreen ? 1200 : 1
-  };
-});
-var CircularProgressWrapper = /*#__PURE__*/styled('div')(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    alignItems: 'center',
-    backgroundColor: alpha(theme.palette.background.paper, 0.5),
-    display: 'grid',
-    height: '100%',
-    justifyContent: 'center',
-    margin: 'auto',
-    position: 'absolute',
-    width: 'calc(100% - 2rem)'
-  };
-});
 var MRT_TableContainer = function MRT_TableContainer() {
   var _useMRT = useMRT(),
-      fullScreen = _useMRT.fullScreen,
       hideToolbarBottom = _useMRT.hideToolbarBottom,
       hideToolbarTop = _useMRT.hideToolbarTop,
       isFetching = _useMRT.isFetching,
@@ -2421,6 +2338,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') {
@@ -2442,12 +2360,24 @@ var MRT_TableContainer = function MRT_TableContainer() {
   }, [fullScreen]);
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
   return React.createElement(TableContainer, Object.assign({
-    component: Paper,
-    fullScreen: fullScreen
-  }, tableContainerProps), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), isFetching && React.createElement(LinearProgress, null), isLoading && React.createElement(CircularProgressWrapper, null, React.createElement(CircularProgress, {
-    "aria-busy": "true",
-    "aria-label": "Loading data"
-  })), React.createElement(MRT_Table, null), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, null));
+    component: Paper
+  }, tableContainerProps, {
+    sx: _extends({
+      bottom: fullScreen ? '0' : undefined,
+      height: fullScreen ? '100%' : undefined,
+      left: fullScreen ? '0' : undefined,
+      m: fullScreen ? '0' : undefined,
+      position: fullScreen ? 'fixed' : undefined,
+      right: fullScreen ? '0' : undefined,
+      top: fullScreen ? '0' : undefined,
+      transition: 'all 0.2s ease-in-out',
+      width: fullScreen ? '100vw' : undefined,
+      zIndex: fullScreen ? 1200 : 1
+    }, tableContainerProps == null ? void 0 : tableContainerProps.sx)
+  }), !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));
 };
 
 var MRT_DefaultLocalization_EN = {