material-react-table 0.4.8 → 0.5.1

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

@@ -241,10 +241,10 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   });
 };
 
-var MenuItem = /*#__PURE__*/material.styled(material.MenuItem)({
+var commonMenuItemStyles = {
   display: 'flex',
   gap: '0.75rem'
-});
+};
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
 
@@ -308,50 +308,46 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     onClose: function onClose() {
       return setAnchorEl(null);
     }
-  }, !disableSortBy && column.canSort && [React__default.createElement(MenuItem, {
+  }, !disableSortBy && column.canSort && [React__default.createElement(material.MenuItem, {
     key: 1,
     disabled: !column.isSorted,
-    onClick: handleClearSort
-  }, React__default.createElement(ClearAllIcon, null), " ", localization.columnActionMenuItemClearSort), React__default.createElement(MenuItem, {
+    onClick: handleClearSort,
+    sx: commonMenuItemStyles
+  }, React__default.createElement(ClearAllIcon, null), " ", localization.columnActionMenuItemClearSort), React__default.createElement(material.MenuItem, {
     key: 2,
     disabled: column.isSorted && !column.isSortedDesc,
-    onClick: handleSortAsc
-  }, React__default.createElement(SortIcon, null), ' ', (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header))), React__default.createElement(MenuItem, {
+    onClick: handleSortAsc,
+    sx: commonMenuItemStyles
+  }, React__default.createElement(SortIcon, null), ' ', (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header))), React__default.createElement(material.MenuItem, {
     key: 3,
     disabled: column.isSorted && column.isSortedDesc,
-    onClick: handleSortDesc
+    onClick: handleSortDesc,
+    sx: commonMenuItemStyles
   }, React__default.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__default.createElement(material.Divider, {
     key: 0
-  }), React__default.createElement(MenuItem, {
+  }), React__default.createElement(material.MenuItem, {
     key: 1,
-    onClick: handleFilterByColumn
+    onClick: handleFilterByColumn,
+    sx: commonMenuItemStyles
   }, React__default.createElement(FilterListIcon, null), ' ', (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)))], enableColumnGrouping && column.canGroupBy && [React__default.createElement(material.Divider, {
     key: 1
-  }), React__default.createElement(MenuItem, {
+  }), React__default.createElement(material.MenuItem, {
     key: 2,
-    onClick: handleGroupByColumn
+    onClick: handleGroupByColumn,
+    sx: commonMenuItemStyles
   }, React__default.createElement(DynamicFeedIcon, null), ' ', (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header)))], !disableColumnHiding && [React__default.createElement(material.Divider, {
     key: 0
-  }), React__default.createElement(MenuItem, {
+  }), React__default.createElement(material.MenuItem, {
     key: 1,
-    onClick: handleHideColumn
+    onClick: handleHideColumn,
+    sx: commonMenuItemStyles
   }, React__default.createElement(VisibilityOffIcon, null), ' ', (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header)))]);
 };
 
-var IconButton = /*#__PURE__*/material.styled(material.IconButton)({
-  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;
 
@@ -374,10 +370,20 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
     enterDelay: 1000,
     enterNextDelay: 1000,
     title: localization.columnActionMenuButtonTitle
-  }, React__default.createElement(IconButton, {
+  }, React__default.createElement(material.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__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
     anchorEl: anchorEl,
     column: column,
@@ -385,47 +391,20 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }));
 };
 
-var MRT_StyledTableHeadCell = /*#__PURE__*/material.styled(material.TableCell, {
-  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__*/material.styled('div')({
-  alignContent: 'space-between',
-  display: 'grid',
-  height: '100%'
-});
-var TableCellTopContents = /*#__PURE__*/material.styled('div')({
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'flex-start'
-});
-var CellFlexItem = /*#__PURE__*/material.styled('span')({
-  alignItems: 'center',
-  display: 'flex',
-  flexWrap: 'nowrap'
-});
-var Divider = /*#__PURE__*/material.styled(material.Divider)({
-  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,
@@ -442,19 +421,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__default.createElement(MRT_StyledTableHeadCell, Object.assign({
-    align: isParentHeader ? 'center' : 'left',
-    densePadding: densePadding,
-    enableColumnResizing: enableColumnResizing
-  }, tableCellProps), React__default.createElement(TableCellWrapper, null, React__default.createElement(TableCellTopContents, {
-    style: {
-      justifyContent: isParentHeader ? 'center' : undefined
+  return React__default.createElement(material.TableCell, Object.assign({
+    align: isParentHeader ? 'center' : 'left'
+  }, tableCellProps, {
+    sx: _extends({}, commonTableHeadCellStyles(densePadding, enableColumnResizing), tableCellProps == null ? void 0 : tableCellProps.sx)
+  }), React__default.createElement(material.Box, {
+    sx: {
+      alignContent: 'space-between',
+      display: 'grid',
+      height: '100%'
+    }
+  }, React__default.createElement(material.Box, {
+    sx: {
+      alignItems: 'flex-start',
+      display: 'flex',
+      justifyContent: isParentHeader ? 'center' : 'space-between',
+      width: '100%'
     }
-  }, React__default.createElement(CellFlexItem, Object.assign({}, column.getSortByToggleProps(), {
+  }, React__default.createElement(material.Box, Object.assign({}, column.getSortByToggleProps(), {
+    sx: {
+      alignItems: 'center',
+      display: 'flex',
+      flexWrap: 'nowrap'
+    },
     title: undefined
   }), column.render('Header'), !isParentHeader && column.canSort && React__default.createElement(material.Tooltip, {
     arrow: true,
@@ -463,33 +456,117 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
     "aria-label": sortTooltip,
     active: column.isSorted,
     direction: column.isSortedDesc ? 'desc' : 'asc'
-  }))), React__default.createElement(CellFlexItem, null, !disableColumnActions && !isParentHeader && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
+  }))), React__default.createElement(material.Box, {
+    sx: {
+      alignItems: 'center',
+      display: 'flex',
+      flexWrap: 'nowrap'
+    }
+  }, !disableColumnActions && !isParentHeader && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
     column: column
-  }), enableColumnResizing && !isParentHeader && React__default.createElement(Divider, Object.assign({
+  }), enableColumnResizing && !isParentHeader && React__default.createElement(material.Divider, Object.assign({
     flexItem: true,
     orientation: "vertical",
     onDoubleClick: function onDoubleClick() {
       return tableInstance.resetResizing();
     }
-  }, column.getResizerProps())))), !disableFilters && column.canFilter && React__default.createElement(material.Collapse, {
+  }, column.getResizerProps(), {
+    sx: {
+      borderRightWidth: '2px',
+      borderRadius: '2px',
+      maxHeight: '2rem'
+    }
+  })))), !disableFilters && column.canFilter && React__default.createElement(material.Collapse, {
     "in": showFilters
   }, React__default.createElement(MRT_FilterTextField, {
     column: column
   }))));
 };
 
-var MRT_TableButtonCell = /*#__PURE__*/material.styled(material.TableCell, {
-  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(),
+      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__default.createElement(React__default.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
+      cell: cell
+    })));
   }
-})(function (_ref) {
-  var densePadding = _ref.densePadding;
+
+  return React__default.createElement(material.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 {
-    padding: densePadding ? '1px' : '0.6rem',
+    p: densePadding ? '0.5rem' : '1rem',
+    transition: 'all 0.2s ease-in-out',
+    whiteSpace: densePadding ? 'nowrap' : 'normal'
+  };
+};
+var commonTableBodyButtonCellStyles = function commonTableBodyButtonCellStyles(densePadding) {
+  return {
+    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,
+      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 == null ? void 0 : mTableCellBodyProps.style, mcTableCellBodyProps == null ? void 0 : mcTableCellBodyProps.style)
+  });
+
+  return React__default.createElement(material.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__default.createElement(MRT_EditCellTextField, {
+    cell: cell
+  }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React__default.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
+};
 
 var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var row = _ref.row,
@@ -517,8 +594,8 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   };
 
   var checkboxProps = selectAll ? tableInstance.getToggleAllRowsSelectedProps() : row == null ? void 0 : row.getToggleRowSelectedProps();
-  return React__default.createElement(MRT_TableButtonCell, {
-    densePadding: densePadding
+  return React__default.createElement(material.TableCell, {
+    sx: commonTableBodyButtonCellStyles(densePadding)
   }, React__default.createElement(material.Tooltip, {
     arrow: true,
     enterDelay: 1000,
@@ -542,10 +619,11 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
       densePadding = _useMRT.densePadding,
       DoubleArrowDownIcon = _useMRT.icons.DoubleArrowDownIcon;
 
-  return React__default.createElement(MRT_TableButtonCell, Object.assign({
-    size: "small",
-    densePadding: densePadding
-  }, tableInstance.getToggleAllRowsExpandedProps()), React__default.createElement(material.IconButton, {
+  return React__default.createElement(material.TableCell, Object.assign({
+    size: "small"
+  }, tableInstance.getToggleAllRowsExpandedProps(), {
+    sx: commonTableBodyButtonCellStyles(densePadding)
+  }), React__default.createElement(material.IconButton, {
     "aria-label": localization.expandAllButtonTitle,
     title: localization.expandAllButtonTitle
   }, React__default.createElement(DoubleArrowDownIcon, {
@@ -557,8 +635,6 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
 };
 
 var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
-  var _mTableBodyCellrops$s;
-
   var width = _ref.width;
 
   var _useMRT = useMRT(),
@@ -567,12 +643,14 @@ 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__default.createElement(material.TableCell, Object.assign({}, tableCellProps));
+  return React__default.createElement(material.TableCell, Object.assign({}, tableCellProps, {
+    sx: _extends({
+      width: width
+    }, tableCellProps == null ? void 0 : tableCellProps.sx)
+  }));
 };
 
 var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
@@ -580,21 +658,22 @@ var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
       densePadding = _useMRT.densePadding,
       localization = _useMRT.localization;
 
-  return React__default.createElement(MRT_StyledTableHeadCell, {
-    densePadding: densePadding,
+  return React__default.createElement(material.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(),
       anyRowsCanExpand = _useMRT.anyRowsCanExpand,
+      densePadding = _useMRT.densePadding,
       disableExpandAll = _useMRT.disableExpandAll,
       enableRowActions = _useMRT.enableRowActions,
       enableRowEditing = _useMRT.enableRowEditing,
@@ -615,10 +694,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__default.createElement(material.TableRow, Object.assign({}, tableRowProps), enableRowNumbers && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(MRT_StyledTableHeadCell, null, "#")), (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, {
+  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))
+  }, "#")), (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, {
     selectAll: true
@@ -646,107 +727,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__default.createElement(React__default.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
-      cell: cell
-    })));
-  }
-
-  return React__default.createElement(material.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 MRT_StyledTableBodyCell = /*#__PURE__*/material.styled(material.TableCell, {
-  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__default.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__default.createElement(MRT_EditCellTextField, {
-    cell: cell
-  }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React__default.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
-};
-
-var TableCell = /*#__PURE__*/material.styled(material.TableCell, {
-  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,
@@ -755,37 +737,27 @@ 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__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(TableCell, Object.assign({
+  return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(material.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__default.createElement(material.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__default.createElement(material.Collapse, {
     "in": row.isExpanded
   }, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
 };
 
-var TableCell$1 = /*#__PURE__*/material.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,
@@ -793,10 +765,12 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref2) {
       localization = _useMRT.localization,
       renderDetailPanel = _useMRT.renderDetailPanel;
 
-  return React__default.createElement(TableCell$1, {
+  return React__default.createElement(material.TableCell, {
     size: "small",
-    densePadding: densePadding,
-    depth: row.depth
+    sx: _extends({}, commonTableBodyButtonCellStyles(densePadding), {
+      pl: row.depth + 0.5 + "rem",
+      textAlign: 'left'
+    })
   }, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.expandButtonTitle,
     disabled: !row.canExpand && !renderDetailPanel,
@@ -809,10 +783,6 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref2) {
   })));
 };
 
-var MenuItem$1 = /*#__PURE__*/material.styled(material.MenuItem)({
-  display: 'flex',
-  gap: '0.75rem'
-});
 var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
   var _renderRowActionMenuI;
 
@@ -834,7 +804,11 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     onClose: function onClose() {
       return setAnchorEl(null);
     }
-  }, enableRowEditing && React__default.createElement(MenuItem$1, {
+  }, enableRowEditing && React__default.createElement(material.MenuItem, {
+    sx: {
+      display: 'flex',
+      gap: '0.75rem'
+    },
     onClick: handleEdit
   }, React__default.createElement(EditIcon, null), " ", localization.rowActionMenuItemEdit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
     return setAnchorEl(null);
@@ -1601,10 +1575,6 @@ try {
 }
 });
 
-var EditActionButtonWrappers = /*#__PURE__*/material.styled('div')({
-  display: 'flex',
-  gap: '0.75rem'
-});
 var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
   var row = _ref.row;
 
@@ -1647,7 +1617,12 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
     };
   }();
 
-  return React__default.createElement(EditActionButtonWrappers, null, React__default.createElement(material.Tooltip, {
+  return React__default.createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      gap: '0.75rem'
+    }
+  }, React__default.createElement(material.Tooltip, {
     arrow: true,
     title: localization.rowActionButtonCancel
   }, React__default.createElement(material.IconButton, {
@@ -1663,7 +1638,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
   }, React__default.createElement(SaveIcon, null))));
 };
 
-var IconButton$1 = /*#__PURE__*/material.styled(material.IconButton)({
+var commonIconButtonStyles = {
   opacity: 0.5,
   transition: 'opacity 0.2s',
   marginRight: '2px',
@@ -1672,7 +1647,7 @@ var IconButton$1 = /*#__PURE__*/material.styled(material.IconButton)({
   '&:hover': {
     opacity: 1
   }
-});
+};
 var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
   var row = _ref.row;
 
@@ -1704,21 +1679,23 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
     setAnchorEl(null);
   };
 
-  return React__default.createElement(MRT_TableButtonCell, {
-    densePadding: densePadding
+  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, {
     row: row
   }) : !renderRowActionMenuItems && enableRowEditing ? React__default.createElement(material.Tooltip, {
     placement: "right",
     arrow: true,
     title: localization.rowActionMenuItemEdit
-  }, React__default.createElement(IconButton$1, {
+  }, 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(IconButton$1, {
+  }, React__default.createElement(EditIcon, null))) : renderRowActionMenuItems ? React__default.createElement(React__default.Fragment, null, React__default.createElement(material.IconButton, {
     "aria-label": localization.rowActionMenuButtonTitle,
-    title: localization.rowActionMenuButtonTitle,
     onClick: handleOpenRowActionMenu,
-    size: "small"
+    size: "small",
+    sx: commonIconButtonStyles,
+    title: localization.rowActionMenuButtonTitle
   }, React__default.createElement(MoreHorizIcon, null)), React__default.createElement(MRT_RowActionMenu, {
     anchorEl: anchorEl,
     handleEdit: handleEdit,
@@ -1727,24 +1704,12 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
   })) : null);
 };
 
-var TableRow = /*#__PURE__*/material.styled(material.TableRow, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'isSelected';
-  }
-})(function (_ref) {
-  var isSelected = _ref.isSelected,
-      theme = _ref.theme;
-  return {
-    backgroundColor: isSelected ? material.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,
+      densePadding = _useMRT.densePadding,
       enableRowActions = _useMRT.enableRowActions,
       enableRowEditing = _useMRT.enableRowEditing,
       enableRowNumbers = _useMRT.enableRowNumbers,
@@ -1757,16 +1722,24 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
   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__default.createElement(React__default.Fragment, null, React__default.createElement(TableRow, Object.assign({
-    isSelected: row.isSelected,
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TableRow, Object.assign({
     hover: true,
     onClick: function onClick(event) {
       return onRowClick == null ? void 0 : onRowClick(event, row);
     }
-  }, tableRowProps), enableRowNumbers && React__default.createElement(MRT_StyledTableBodyCell, null, row.index + 1), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
+  }, tableRowProps, {
+    //@ts-ignore
+    sx: function sx(theme) {
+      return _extends({
+        backgroundColor: row.isSelected ? material.alpha(theme.palette.primary.light, 0.1) : 'transparent'
+      }, tableRowProps == null ? void 0 : tableRowProps.sx);
+    }
+  }), enableRowNumbers && React__default.createElement(material.TableCell, {
+    sx: _extends({}, commonTableBodyCellStyles(densePadding))
+  }, row.index + 1), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
   }), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(MRT_ExpandButton, {
     row: row
@@ -1779,17 +1752,12 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
     });
   }), (enableRowActions || enableRowEditing) && positionActionsColumn === 'last' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
-  })), renderDetailPanel && React__default.createElement(MRT_TableDetailPanel, {
+  })), renderDetailPanel && !row.isGrouped && React__default.createElement(MRT_TableDetailPanel, {
     row: row
   }));
 };
 
-var TableBody = /*#__PURE__*/material.styled(material.TableBody)({
-  overflowY: 'hidden'
-});
 var MRT_TableBody = function MRT_TableBody() {
-  var _muiTableBodyProps$st;
-
   var _useMRT = useMRT(),
       tableInstance = _useMRT.tableInstance,
       muiTableBodyProps = _useMRT.muiTableBodyProps,
@@ -1798,10 +1766,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__default.createElement(TableBody, Object.assign({}, tableBodyProps), rows.map(function (row) {
+  return React__default.createElement(material.TableBody, Object.assign({}, tableBodyProps, {
+    sx: _extends({
+      overflowY: 'hidden'
+    }, tableBodyProps == null ? void 0 : tableBodyProps.sx)
+  }), rows.map(function (row) {
     tableInstance.prepareRow(row);
     return React__default.createElement(MRT_TableBodyRow, {
       key: row.getRowProps().key,
@@ -1810,24 +1782,10 @@ var MRT_TableBody = function MRT_TableBody() {
   }));
 };
 
-var TableCell$2 = /*#__PURE__*/material.styled(material.TableCell, {
-  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,
@@ -1839,20 +1797,23 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref2) {
   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__default.createElement(TableCell$2, Object.assign({
+  return React__default.createElement(material.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(),
@@ -1874,7 +1835,7 @@ 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__default.createElement(material.TableRow, Object.assign({}, tableRowProps), enableRowNumbers && React__default.createElement(MRT_TableSpacerCell, null), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React__default.createElement(MRT_TableSpacerCell, null), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(MRT_TableSpacerCell, {
@@ -1903,8 +1864,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,
@@ -1912,15 +1871,12 @@ 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__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));
 };
 
-var TextField = /*#__PURE__*/material.styled(material.TextField)({
-  justifySelf: 'end'
-});
 var MRT_SearchTextField = function MRT_SearchTextField() {
   var _useMRT = useMRT(),
       _useMRT$icons = _useMRT.icons,
@@ -1951,7 +1907,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
   return React__default.createElement(material.Collapse, {
     "in": showSearch,
     orientation: "horizontal"
-  }, React__default.createElement(TextField, Object.assign({
+  }, React__default.createElement(material.TextField, Object.assign({
     id: "global-search-text-field",
     placeholder: localization.searchTextFieldPlaceholder,
     onChange: function onChange(event) {
@@ -1978,30 +1934,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,
+      fullScreen = _useMRT.fullScreen,
       _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;
 
   return React__default.createElement(material.Tooltip, {
     arrow: true,
-    title: localization.toggleFilterButtonTitle
+    title: localization.toggleFullScreenButtonTitle
   }, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.toggleFilterButtonTitle,
     onClick: function onClick() {
-      return setShowFilters(!showFilters);
+      return setFullScreen(!fullScreen);
     },
     size: "small"
-  }, rest), showFilters ? React__default.createElement(FilterListOffIcon, null) : React__default.createElement(FilterListIcon, null)));
+  }, rest), fullScreen ? React__default.createElement(FullscreenExitIcon, null) : React__default.createElement(FullscreenIcon, null)));
 };
 
 var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
@@ -2027,8 +1987,8 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   };
 
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.MenuItem, {
-    style: {
-      paddingLeft: (column.depth + 0.5) * 2 + "rem"
+    sx: {
+      pl: (column.depth + 0.5) * 2 + "rem"
     }
   }, React__default.createElement(material.FormControlLabel, {
     checked: switchChecked,
@@ -2045,11 +2005,6 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   }));
 };
 
-var MenuButtons = /*#__PURE__*/material.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);
 
@@ -2079,7 +2034,13 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
     onClose: function onClose() {
       return setAnchorEl(null);
     }
-  }, React__default.createElement(MenuButtons, null, React__default.createElement(material.Button, {
+  }, React__default.createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      p: '0 0.5rem 0.5rem 0.5rem'
+    }
+  }, React__default.createElement(material.Button, {
     disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
     onClick: function onClick() {
       return tableInstance.toggleHideAllColumns(true);
@@ -2120,6 +2081,29 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
   }, rest), densePadding ? React__default.createElement(DensitySmallIcon, null) : React__default.createElement(DensityMediumIcon, null)));
 };
 
+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;
+
+  return React__default.createElement(material.Tooltip, {
+    arrow: true,
+    title: localization.toggleFilterButtonTitle
+  }, React__default.createElement(material.IconButton, Object.assign({
+    "aria-label": localization.toggleFilterButtonTitle,
+    onClick: function onClick() {
+      return setShowFilters(!showFilters);
+    },
+    size: "small"
+  }, rest), showFilters ? React__default.createElement(FilterListOffIcon, null) : React__default.createElement(FilterListIcon, null)));
+};
+
 var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
   var rest = _extends({}, _ref);
 
@@ -2150,34 +2134,6 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
   }, rest), showSearch ? React__default.createElement(SearchOffIcon, null) : React__default.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__default.createElement(material.Tooltip, {
-    arrow: true,
-    title: localization.toggleFullScreenButtonTitle
-  }, React__default.createElement(material.IconButton, Object.assign({
-    "aria-label": localization.toggleFilterButtonTitle,
-    onClick: function onClick() {
-      return setFullScreen(!fullScreen);
-    },
-    size: "small"
-  }, rest), fullScreen ? React__default.createElement(FullscreenExitIcon, null) : React__default.createElement(FullscreenIcon, null)));
-};
-
-var ToolbarButtonsContainer = /*#__PURE__*/material.styled('div')({
-  display: 'flex',
-  gap: '0.5rem',
-  alignItems: 'center'
-});
 var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons() {
   var _useMRT = useMRT(),
       disableFilters = _useMRT.disableFilters,
@@ -2198,7 +2154,14 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons() {
     }));
   }
 
-  return React__default.createElement(ToolbarButtonsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_ToggleSearchButton, null), !disableFilters && React__default.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React__default.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React__default.createElement(MRT_ToggleDensePaddingButton, null), !disableFullScreenToggle && React__default.createElement(MRT_FullScreenToggleButton, null));
+  return React__default.createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      gap: '0.5rem',
+      alignItems: 'center',
+      p: '0 0.5rem'
+    }
+  }, !disableGlobalFilter && React__default.createElement(MRT_ToggleSearchButton, null), !disableFilters && React__default.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React__default.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React__default.createElement(MRT_ToggleDensePaddingButton, null), !disableFullScreenToggle && React__default.createElement(MRT_FullScreenToggleButton, null));
 };
 
 var MRT_TablePagination = function MRT_TablePagination() {
@@ -2228,35 +2191,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__*/material.styled(material.Alert, {
-  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;
 
@@ -2290,42 +2234,28 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
   return React__default.createElement(material.Collapse, {
     "in": !!selectMessage || !!groupedByMessage,
     timeout: displayAbsolute ? 0 : 200
-  }, React__default.createElement(Alert, Object.assign({
-    displayAbsolute: displayAbsolute,
+  }, React__default.createElement(material.Alert, Object.assign({
+    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__default.createElement(material.Box, {
+    sx: {
+      p: '0.5rem 1rem'
+    }
+  }, selectMessage, groupedByMessage)));
 };
 
-var Toolbar = /*#__PURE__*/material.styled(material.Toolbar, {
-  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(" + material.alpha(theme.palette.common.white, 0.05) + "," + material.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__*/material.styled('div')({
-  padding: '0.5rem',
-  display: 'flex',
-  justifyContent: 'space-between'
-});
-var ToolbarActionsContainer = /*#__PURE__*/material.styled('div')({
-  display: 'flex',
-  gap: '0.5rem',
-  position: 'relative',
-  zIndex: 3
-});
 var MRT_ToolbarTop = function MRT_ToolbarTop() {
   var _renderToolbarCustomA;
 
@@ -2342,32 +2272,37 @@ var MRT_ToolbarTop = function MRT_ToolbarTop() {
       tableInstance = _useMRT.tableInstance;
 
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
-  return React__default.createElement(Toolbar, Object.assign({
-    fullScreen: fullScreen,
+  return React__default.createElement(material.Toolbar, Object.assign({
     variant: "dense"
-  }, toolbarProps), positionToolbarAlertBanner === 'top' && React__default.createElement(MRT_ToolbarAlertBanner, null), React__default.createElement(ToolbarTopRow, null, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React__default.createElement("span", null), React__default.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_SearchTextField, null), !hideToolbarInternalActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarInternalButtons, null))), React__default.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null)));
+  }, toolbarProps, {
+    sx: function sx(theme) {
+      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) + ")",
+        display: 'grid',
+        p: '0 !important',
+        position: fullScreen ? 'sticky' : undefined,
+        top: fullScreen ? '0' : undefined,
+        width: '100%',
+        zIndex: 1
+      }, toolbarProps == null ? void 0 : toolbarProps.sx);
+    }
+  }), positionToolbarAlertBanner === 'top' && React__default.createElement(MRT_ToolbarAlertBanner, null), React__default.createElement(material.Box, {
+    sx: {
+      p: '0.5rem',
+      display: 'flex',
+      justifyContent: 'space-between'
+    }
+  }, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React__default.createElement("span", null), React__default.createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      gap: '0.5rem',
+      position: 'relative',
+      zIndex: 3
+    }
+  }, !disableGlobalFilter && React__default.createElement(MRT_SearchTextField, null), !hideToolbarInternalActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarInternalButtons, null))), React__default.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null)));
 };
 
-var Toolbar$1 = /*#__PURE__*/material.styled(material.Toolbar, {
-  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(" + material.alpha(theme.palette.common.white, 0.05) + "," + material.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,
@@ -2380,44 +2315,26 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
       tableInstance = _useMRT.tableInstance;
 
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
-  return React__default.createElement(Toolbar$1, Object.assign({
-    fullScreen: fullScreen,
+  return React__default.createElement(material.Toolbar, Object.assign({
     variant: "dense"
-  }, toolbarProps), !hideToolbarInternalActions && positionToolbarActions === 'bottom' ? React__default.createElement(MRT_ToolbarInternalButtons, null) : React__default.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React__default.createElement(MRT_ToolbarAlertBanner, null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null));
+  }, toolbarProps, {
+    sx: function sx(theme) {
+      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,
+        display: 'flex',
+        justifyContent: 'space-between',
+        overflowY: 'hidden',
+        p: '0 0.5rem !important',
+        position: fullScreen ? 'fixed' : undefined,
+        width: 'calc(100% - 1rem)',
+        zIndex: 1
+      }, toolbarProps == null ? void 0 : toolbarProps.sx);
+    }
+  }), !hideToolbarInternalActions && positionToolbarActions === 'bottom' ? React__default.createElement(MRT_ToolbarInternalButtons, null) : React__default.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React__default.createElement(MRT_ToolbarAlertBanner, null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null));
 };
 
-var TableContainer = /*#__PURE__*/material.styled(material.TableContainer, {
-  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__*/material.styled('div')(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    alignItems: 'center',
-    backgroundColor: material.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,
@@ -2448,13 +2365,25 @@ var MRT_TableContainer = function MRT_TableContainer() {
     }
   }, [fullScreen]);
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
-  return React__default.createElement(TableContainer, Object.assign({
-    component: material.Paper,
-    fullScreen: fullScreen
-  }, tableContainerProps), !hideToolbarTop && React__default.createElement(MRT_ToolbarTop, null), isFetching && React__default.createElement(material.LinearProgress, null), isLoading && React__default.createElement(CircularProgressWrapper, null, React__default.createElement(material.CircularProgress, {
-    "aria-busy": "true",
-    "aria-label": "Loading data"
-  })), React__default.createElement(MRT_Table, null), !hideToolbarBottom && React__default.createElement(MRT_ToolbarBottom, null));
+  return React__default.createElement(material.TableContainer, Object.assign({
+    component: material.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__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));
 };
 
 var MRT_DefaultLocalization_EN = {