material-react-table 0.3.0 → 0.3.4

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

@@ -1,6 +1,6 @@
-import React, { useMemo, useContext, createContext, useState } from 'react';
-import { useTable, useFlexLayout, useResizeColumns, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useAsyncDebounce } from 'react-table';
-import { TextField as TextField$1, InputAdornment, IconButton as IconButton$1, Menu, Divider as Divider$1, styled, MenuItem as MenuItem$1, TableSortLabel, Collapse, TableCell as TableCell$2, Checkbox, FormControlLabel, Switch, Typography, TableRow, TablePagination, TableHead, LinearProgress, CircularProgress, TableBody as TableBody$1, TableFooter, Table, Toolbar as Toolbar$1, TableContainer, Paper } from '@mui/material';
+import React, { useMemo, useState, useContext, createContext } from 'react';
+import { useTable, useResizeColumns, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, 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$4, TableSortLabel, Collapse, Checkbox, TableRow as TableRow$1, TableHead, alpha, TableBody as TableBody$1, TableFooter, Table, FormControlLabel, Switch, Typography, TablePagination, Toolbar as Toolbar$2, TableContainer, Paper, LinearProgress, CircularProgress } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import FilterIcon from '@mui/icons-material/FilterList';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -8,10 +8,52 @@ import ClearAllIcon from '@mui/icons-material/ClearAll';
 import SortIcon from '@mui/icons-material/Sort';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
-import ArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
-import ViewColumnIcon from '@mui/icons-material/ViewColumn';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import MuiArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import MuiExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import EditIcon from '@mui/icons-material/Edit';
+import SaveIcon from '@mui/icons-material/Save';
+import CancelIcon from '@mui/icons-material/Cancel';
 import SearchIcon from '@mui/icons-material/Search';
+import FilterListOffIcon from '@mui/icons-material/FilterListOff';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import SearchOffIcon from '@mui/icons-material/SearchOff';
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+        args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+      }
+
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+
+      _next(undefined);
+    });
+  };
+}
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -76,97 +118,50 @@ var useMRTCalcs = function useMRTCalcs(_ref) {
   };
 };
 
-var showoverrideWarnings = function showoverrideWarnings(props) {
-  if (props.overrideTableBodyCellComponent) {
-    showWarning('TableCell', 'props');
-  }
-
-  if (props.overrideTableBodyComponent) {
-    showWarning('TableBody', 'tableBodyProps');
-  }
-
-  if (props.overrideTableBodyRowComponent) {
-    showWarning('TableRow', 'props');
-  }
-
-  if (props.overrideTableDetailPanelComponent) {
-    showWarning('Detail Panel', 'tableDetailPanelProps');
-  }
-
-  if (props.overrideTableFooterComponent) {
-    showWarning('TableFooter', 'tableFooterProps');
-  }
-
-  if (props.overrideTableFooterCellComponent) {
-    showWarning('TableCell', 'props');
-  }
-
-  if (props.overrideTableFooterRowComponent) {
-    showWarning('TableRow', 'props');
-  }
-
-  if (props.overrideTableHeadComponent) {
-    showWarning('TableHead', 'tableHeadProps');
-  }
-
-  if (props.overrideTableHeadRowComponent) {
-    showWarning('TableRow', 'props');
-  }
-
-  if (props.overrideTablePaginationComponent) {
-    showWarning('', 'props');
-  }
-
-  if (props.overrideTableToolbarComponent) {
-    showWarning('TableBodyCell', 'props');
-  }
-};
-
-var showWarning = function showWarning(componentName, propsName) {
-  console.warn("Caution.\nYou are overriding the built-in Mui " + componentName + " Component in material-react-table.\n\nYou should only use this as a last resort!\n\nConsider customizing the Mui " + componentName + " Component instead with " + propsName + ".");
-};
-
-var _excluded = ["children", "columns", "data", "defaultColumn", "getRowId", "getSubRows", "initialState", "stateReducer", "surpressoverrideWarnings"];
-
 var MaterialReactTableContext = /*#__PURE__*/function () {
   return createContext({});
 }();
 
-var MaterialReactTableProvider = function MaterialReactTableProvider(_ref) {
-  var children = _ref.children,
-      columns = _ref.columns,
-      data = _ref.data,
-      defaultColumn = _ref.defaultColumn,
-      getRowId = _ref.getRowId,
-      getSubRows = _ref.getSubRows,
-      initialState = _ref.initialState,
-      stateReducer = _ref.stateReducer,
-      surpressoverrideWarnings = _ref.surpressoverrideWarnings,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
+  var _props$defaultShowSea, _props$defaultShowFil, _props$defaultDensePa;
 
-  var tableInstance = useTable({
-    columns: columns,
-    data: data,
-    defaultColumn: defaultColumn,
-    getRowId: getRowId,
-    getSubRows: getSubRows,
-    initialState: initialState,
-    stateReducer: stateReducer
-  }, useFlexLayout, useResizeColumns, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect);
+  var hooks = [useResizeColumns, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect];
+  if (props.enableColumnResizing) hooks.unshift(useFlexLayout);
+  var tableInstance = useTable.apply(void 0, [props].concat(hooks));
   var mrtCalcs = useMRTCalcs({
     tableInstance: tableInstance
   });
 
-  if (process.env.NODE_ENV !== 'production' && !surpressoverrideWarnings) {
-    showoverrideWarnings(rest);
-  }
+  var _useState = useState((_props$defaultShowSea = props.defaultShowSearchTextField) != null ? _props$defaultShowSea : false),
+      showSearch = _useState[0],
+      setShowSearch = _useState[1];
+
+  var _useState2 = useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
+      showFilters = _useState2[0],
+      setShowFilters = _useState2[1];
+
+  var _useState3 = useState((_props$defaultDensePa = props.defaultDensePadding) != null ? _props$defaultDensePa : false),
+      densePadding = _useState3[0],
+      setDensePadding = _useState3[1];
+
+  var _useState4 = useState(null),
+      currentEditingRow = _useState4[0],
+      setCurrentEditingRow = _useState4[1];
 
   return React.createElement(MaterialReactTableContext.Provider, {
-    value: _extends({
-      //@ts-ignore
+    value: _extends({}, mrtCalcs, props, {
+      currentEditingRow: currentEditingRow,
+      densePadding: densePadding,
+      setCurrentEditingRow: setCurrentEditingRow,
+      setDensePadding: setDensePadding,
+      setShowFilters: setShowFilters,
+      setShowSearch: setShowSearch,
+      showFilters: showFilters,
+      showSearch: showSearch,
+      // @ts-ignore
       tableInstance: tableInstance
-    }, mrtCalcs, rest)
-  }, children);
+    })
+  }, props.children);
 };
 var useMaterialReactTable = function useMaterialReactTable() {
   return (//@ts-ignore
@@ -174,7 +169,9 @@ var useMaterialReactTable = function useMaterialReactTable() {
   );
 };
 
-var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
+var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
+  var _localization$filterT, _localization$filterT2, _localization$filterT3, _localization$filterT4;
+
   var column = _ref.column;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
@@ -193,9 +190,22 @@ var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
     column.setFilter(undefined);
   };
 
+  if (column.Filter) {
+    return React.createElement(React.Fragment, null, column.Filter == null ? void 0 : column.Filter({
+      column: column
+    }));
+  }
+
   return React.createElement(TextField$1, {
+    fullWidth: true,
+    id: "filter-" + column.id + "-column",
+    inputProps: {
+      style: {
+        textOverflow: 'ellipsis'
+      }
+    },
     margin: "dense",
-    placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
+    placeholder: localization == null ? void 0 : (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)),
     onChange: function onChange(e) {
       setFilterValue(e.target.value);
       handleChange(e.target.value);
@@ -206,38 +216,47 @@ var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
     value: filterValue != null ? filterValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: React.createElement(InputAdornment, {
+      startAdornment: React.createElement(Tooltip, {
+        arrow: true,
+        title: (_localization$filterT2 = localization == null ? void 0 : (_localization$filterT3 = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT3.replace('{column}', String(column.Header))) != null ? _localization$filterT2 : ''
+      }, React.createElement(InputAdornment, {
         position: "start"
-      }, React.createElement(FilterIcon, null)),
+      }, React.createElement(FilterIcon, null))),
       endAdornment: React.createElement(InputAdornment, {
         position: "end"
-      }, React.createElement(IconButton$1, {
+      }, React.createElement(Tooltip, {
+        arrow: true,
+        title: (_localization$filterT4 = localization == null ? void 0 : localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT4 : ''
+      }, React.createElement("span", null, React.createElement(IconButton$2, {
         "aria-label": localization == null ? void 0 : localization.filterTextFieldClearButtonTitle,
         disabled: (filterValue == null ? void 0 : filterValue.length) === 0,
         onClick: handleClear,
-        size: "small",
-        title: localization == null ? void 0 : localization.filterTextFieldClearButtonTitle
+        size: "small"
       }, React.createElement(CloseIcon, {
         fontSize: "small"
-      })))
+      })))))
     }
   });
 };
 
-var MenuItem = /*#__PURE__*/styled(MenuItem$1)({
+var MenuItem = /*#__PURE__*/styled(MenuItem$2)({
   display: 'flex',
   gap: '0.75rem'
 });
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
+  var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
+
   var anchorEl = _ref.anchorEl,
       column = _ref.column,
       setAnchorEl = _ref.setAnchorEl;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      enableColumnHiding = _useMaterialReactTabl.enableColumnHiding,
+      disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
       enableColumnGrouping = _useMaterialReactTabl.enableColumnGrouping,
-      enableSorting = _useMaterialReactTabl.enableSorting,
-      localization = _useMaterialReactTabl.localization;
+      disableSortBy = _useMaterialReactTabl.disableSortBy,
+      localization = _useMaterialReactTabl.localization,
+      disableFilters = _useMaterialReactTabl.disableFilters,
+      setShowFilters = _useMaterialReactTabl.setShowFilters;
 
   var handleClearSort = function handleClearSort() {
     column.clearSortBy();
@@ -264,13 +283,24 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     setAnchorEl(null);
   };
 
+  var handleFilterByColumn = function handleFilterByColumn() {
+    setShowFilters(true);
+    setTimeout(function () {
+      var _document$getElementB, _column$muiTableHeadC, _column$muiTableHeadC2;
+
+      return (_document$getElementB = document.getElementById( // @ts-ignore
+      (_column$muiTableHeadC = (_column$muiTableHeadC2 = column.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _column$muiTableHeadC2.id) != null ? _column$muiTableHeadC : "filter-" + column.id + "-column")) == null ? void 0 : _document$getElementB.focus();
+    }, 200);
+    setAnchorEl(null);
+  };
+
   return React.createElement(Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
     }
-  }, enableSorting && [React.createElement(MenuItem, {
+  }, !disableSortBy && column.canSort && [React.createElement(MenuItem, {
     key: 1,
     disabled: !column.isSorted,
     onClick: handleClearSort
@@ -278,7 +308,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     key: 2,
     disabled: column.isSorted && !column.isSortedDesc,
     onClick: handleSortAsc
-  }, React.createElement(SortIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemSortAsc), React.createElement(MenuItem, {
+  }, React.createElement(SortIcon, null), ' ', localization == null ? void 0 : (_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
@@ -286,25 +316,30 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     style: {
       transform: 'rotate(180deg) scaleX(-1)'
     }
-  }), ' ', localization == null ? void 0 : localization.columnActionMenuItemSortDesc), React.createElement(Divider$1, {
-    key: 4
-  })], enableColumnHiding && React.createElement(MenuItem, {
-    onClick: handleHideColumn
-  }, React.createElement(VisibilityOffIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemHideColumn), enableColumnGrouping && column.canGroupBy && React.createElement(MenuItem, {
-    disabled: column.isGrouped,
-    onClick: handleGroupByColumn
-  }, React.createElement(DynamicFeedIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemGroupBy), enableColumnGrouping && column.canGroupBy && React.createElement(MenuItem, {
-    disabled: !column.isGrouped,
+  }), ' ', localization == null ? void 0 : (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header)))], !disableFilters && column.canFilter && [React.createElement(Divider$1, {
+    key: 0
+  }), React.createElement(MenuItem, {
+    key: 1,
+    onClick: handleFilterByColumn
+  }, React.createElement(FilterIcon, null), ' ', localization == null ? void 0 : (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)))], enableColumnGrouping && column.canGroupBy && [React.createElement(Divider$1, {
+    key: 1
+  }), React.createElement(MenuItem, {
+    key: 2,
     onClick: handleGroupByColumn
-  }, React.createElement(DynamicFeedIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemUnGroupBy));
+  }, React.createElement(DynamicFeedIcon, null), ' ', localization == null ? void 0 : (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header)))], !disableColumnHiding && [React.createElement(Divider$1, {
+    key: 0
+  }), React.createElement(MenuItem, {
+    key: 1,
+    onClick: handleHideColumn
+  }, React.createElement(VisibilityOffIcon, null), ' ', localization == null ? void 0 : (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header)))]);
 };
 
-var IconButton = /*#__PURE__*/styled(IconButton$1)({
-  opacity: 0.2,
+var IconButton = /*#__PURE__*/styled(IconButton$2)({
+  opacity: 0.5,
   transition: 'opacity 0.2s',
   marginRight: '2px',
-  height: '2rem',
-  width: '2rem',
+  height: '1.6rem',
+  width: '1.6rem',
   '&:hover': {
     opacity: 1
   }
@@ -327,9 +362,9 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
 
   return React.createElement(React.Fragment, null, React.createElement(IconButton, {
     "aria-label": localization == null ? void 0 : localization.columnActionMenuButtonTitle,
-    title: localization == null ? void 0 : localization.columnActionMenuButtonTitle,
     onClick: handleClick,
-    size: "small"
+    size: "small",
+    title: localization == null ? void 0 : localization.columnActionMenuButtonTitle
   }, React.createElement(MoreVertIcon, null)), React.createElement(MRT_ColumnActionMenu, {
     anchorEl: anchorEl,
     column: column,
@@ -337,18 +372,34 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }));
 };
 
-var TableCell = /*#__PURE__*/styled(TableCell$2)({
-  fontWeight: 'bold'
+var StyledTableHeadCell = /*#__PURE__*/styled(TableCell$4, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'densePadding' && prop !== 'enableColumnResizing';
+  }
+})(function (_ref) {
+  var densePadding = _ref.densePadding,
+      enableColumnResizing = _ref.enableColumnResizing;
+  return {
+    fontWeight: 'bold',
+    height: '100%',
+    padding: densePadding ? '0.5rem' : '1rem',
+    transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
+    verticalAlign: 'text-top'
+  };
 });
-var TableCellContents = /*#__PURE__*/styled('div')({
-  display: 'grid'
+var TableCellWrapper = /*#__PURE__*/styled('div')({
+  alignContent: 'space-between',
+  display: 'grid',
+  height: '100%'
 });
-var TableCellText = /*#__PURE__*/styled('div')({
+var TableCellTopContents = /*#__PURE__*/styled('div')({
   width: '100%',
   display: 'flex',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  alignItems: 'flex-start'
 });
 var CellFlexItem = /*#__PURE__*/styled('span')({
+  alignItems: 'center',
   display: 'flex',
   flexWrap: 'nowrap'
 });
@@ -357,37 +408,42 @@ var Divider = /*#__PURE__*/styled(Divider$1)({
   borderRadius: '2px',
   maxHeight: '2rem'
 });
-var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _column$columns$lengt, _column$columns;
+var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
+  var _column$columns$lengt, _column$columns, _mTableHeadCellProps$, _mcTableHeadCellProps;
 
-  var column = _ref.column;
+  var column = _ref2.column;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      overrideTableHeadCellComponent = _useMaterialReactTabl.overrideTableHeadCellComponent,
-      enableColumnActions = _useMaterialReactTabl.enableColumnActions,
+      densePadding = _useMaterialReactTabl.densePadding,
+      disableColumnActions = _useMaterialReactTabl.disableColumnActions,
+      disableFilters = _useMaterialReactTabl.disableFilters,
       enableColumnResizing = _useMaterialReactTabl.enableColumnResizing,
-      enableFiltering = _useMaterialReactTabl.enableFiltering,
-      showFiltersInColumnHead = _useMaterialReactTabl.showFiltersInColumnHead,
+      localization = _useMaterialReactTabl.localization,
+      muiTableHeadCellProps = _useMaterialReactTabl.muiTableHeadCellProps,
+      showFilters = _useMaterialReactTabl.showFilters,
       tableInstance = _useMaterialReactTabl.tableInstance;
 
-  if (overrideTableHeadCellComponent) {
-    return React.createElement(React.Fragment, null, overrideTableHeadCellComponent(column, 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;
-  return React.createElement(TableCell, Object.assign({
-    align: isParentHeader ? 'center' : 'left'
-  }, column.getHeaderProps()), React.createElement(TableCellContents, null, React.createElement(TableCellText, {
+  var mTableHeadCellProps = muiTableHeadCellProps instanceof Function ? muiTableHeadCellProps(column) : muiTableHeadCellProps;
+  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 : {})
+  });
+
+  return React.createElement(StyledTableHeadCell, Object.assign({
+    align: isParentHeader ? 'center' : 'left',
+    densePadding: densePadding,
+    enableColumnResizing: enableColumnResizing
+  }, tableCellProps), React.createElement(TableCellWrapper, null, React.createElement(TableCellTopContents, {
     style: {
       justifyContent: isParentHeader ? 'center' : undefined
     }
   }, React.createElement(CellFlexItem, Object.assign({}, column.getSortByToggleProps()), column.render('Header'), !isParentHeader && column.canSort && React.createElement(TableSortLabel, {
+    "aria-label": column.isSorted ? column.sortDescFirst ? localization == null ? void 0 : localization.columnActionMenuItemClearSort : localization == null ? void 0 : localization.columnActionMenuItemSortDesc : localization == null ? void 0 : localization.columnActionMenuItemSortAsc,
     active: column.isSorted,
-    direction: column.isSortedDesc ? 'desc' : 'asc',
-    style: {
-      margin: 0
-    }
-  })), React.createElement(CellFlexItem, null, enableColumnActions && !isParentHeader && React.createElement(MRT_ToggleColumnActionMenuButton, {
+    direction: column.isSortedDesc ? 'desc' : 'asc'
+  })), React.createElement(CellFlexItem, null, !disableColumnActions && !isParentHeader && React.createElement(MRT_ToggleColumnActionMenuButton, {
     column: column
   }), enableColumnResizing && !isParentHeader && React.createElement(Divider, Object.assign({
     flexItem: true,
@@ -395,150 +451,111 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     onDoubleClick: function onDoubleClick() {
       return tableInstance.resetResizing();
     }
-  }, column.getResizerProps())))), enableFiltering && column.canFilter && React.createElement(Collapse, {
-    "in": showFiltersInColumnHead
-  }, React.createElement(MRT_FilterTextfield, {
+  }, column.getResizerProps())))), !disableFilters && column.canFilter && React.createElement(Collapse, {
+    "in": showFilters
+  }, React.createElement(MRT_FilterTextField, {
     column: column
   }))));
 };
 
+var MRT_TableButtonCell = /*#__PURE__*/styled(TableCell$4, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'densePadding';
+  }
+})(function (_ref) {
+  var densePadding = _ref.densePadding;
+  return {
+    padding: densePadding ? '1px' : '0.6rem',
+    textAlign: 'center',
+    transition: 'all 0.2s ease-in-out'
+  };
+});
+
 var MRT_SelectAllCheckbox = function MRT_SelectAllCheckbox() {
+  var _localization$selectA;
+
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
-      enableSelectAll = _useMaterialReactTabl.enableSelectAll;
+      disableSelectAll = _useMaterialReactTabl.disableSelectAll,
+      densePadding = _useMaterialReactTabl.densePadding,
+      localization = _useMaterialReactTabl.localization;
 
-  return React.createElement(TableCell$2, {
-    style: {
-      width: '2rem',
-      padding: '0.5rem'
-    },
+  return React.createElement(MRT_TableButtonCell, {
+    densePadding: densePadding,
     variant: "head"
-  }, enableSelectAll ? React.createElement(Checkbox, Object.assign({
-    "aria-label": ""
+  }, !disableSelectAll ? React.createElement(Checkbox, Object.assign({
+    inputProps: {
+      'aria-label': (_localization$selectA = localization == null ? void 0 : localization.selectAllCheckboxTitle) != null ? _localization$selectA : ''
+    }
   }, tableInstance.getToggleAllPageRowsSelectedProps())) : null);
 };
 
+var ArrowRightIcon = /*#__PURE__*/styled(MuiArrowRightIcon, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'rotation';
+  }
+})(function (_ref) {
+  var rotation = _ref.rotation;
+  return {
+    transform: "rotate(" + rotation + "deg)",
+    transition: 'transform 0.2s'
+  };
+});
 var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
       localization = _useMaterialReactTabl.localization,
       anyRowsExpanded = _useMaterialReactTabl.anyRowsExpanded,
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+      densePadding = _useMaterialReactTabl.densePadding;
 
-  return React.createElement(TableCell$2, Object.assign({
-    size: "small"
-  }, tableInstance.getToggleAllRowsExpandedProps(), {
-    style: {
-      padding: '0.5rem',
-      paddingRight: '0',
-      width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 2) + "rem"
-    }
-  }), React.createElement(IconButton$1, {
+  return React.createElement(MRT_TableButtonCell, Object.assign({
+    size: "small",
+    densePadding: densePadding
+  }, tableInstance.getToggleAllRowsExpandedProps()), React.createElement(IconButton$2, {
     "aria-label": localization == null ? void 0 : localization.expandAllButtonTitle,
     title: localization == null ? void 0 : localization.expandAllButtonTitle
   }, React.createElement(ArrowRightIcon, {
     fontSize: "small",
-    style: {
-      transform: tableInstance.isAllRowsExpanded ? 'rotate(-180deg)' : anyRowsExpanded ? 'rotate(-90deg)' : 'rotate(0)',
-      transition: 'transform 0.2s'
-    }
+    rotation: tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
   })));
 };
 
-var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
-  var _column$columns;
-
-  var column = _ref.column;
-
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      maxColumnDepth = _useMaterialReactTabl.maxColumnDepth;
+var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
+  var _mTableBodyCellrops$s;
 
-  var isMaxDepth = column.depth === maxColumnDepth;
-  return React.createElement(React.Fragment, null, React.createElement(MenuItem$1, {
-    style: {
-      paddingLeft: column.depth + 1 + "rem"
-    }
-  }, isMaxDepth ? React.createElement(FormControlLabel, {
-    onChange: function onChange() {
-      return isMaxDepth && column.toggleHidden();
-    },
-    label: column.Header,
-    checked: column.isVisible,
-    control: React.createElement(Switch, null)
-  }) : React.createElement(Typography, null, column.Header)), (_column$columns = column.columns) == null ? void 0 : _column$columns.map(function (c, i) {
-    return React.createElement(MRT_ShowHideColumnsMenu, {
-      key: i + "-" + c.id,
-      column: c
-    });
-  }));
-};
+  var width = _ref.width;
 
-var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
   var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      localization = _useMaterialReactTabl.localization;
-
-  var _useState = useState(null),
-      anchorEl = _useState[0],
-      setAnchorEl = _useState[1];
-
-  var handleClick = function handleClick(event) {
-    setAnchorEl(event.currentTarget);
-  };
+      muiTableBodyCellProps = _useMaterialReactTabl.muiTableBodyCellProps;
 
-  return React.createElement(TableCell$2, {
-    size: "small",
-    style: {
-      width: '2rem',
-      padding: '0.75rem 0'
-    }
-  }, React.createElement(IconButton$1, {
-    "aria-label": localization == null ? void 0 : localization.showHideColumnsButtonTitle,
-    title: localization == null ? void 0 : localization.showHideColumnsButtonTitle,
-    onClick: handleClick,
-    size: "small",
-    style: {
-      margin: '0 0 0 -0.75rem'
-    }
-  }, React.createElement(ViewColumnIcon, null)), React.createElement(Menu, {
-    anchorEl: anchorEl,
-    open: !!anchorEl,
-    onClose: function onClose() {
-      return setAnchorEl(null);
-    }
-  }, tableInstance.columns.map(function (column, index) {
-    return React.createElement(MRT_ShowHideColumnsMenu, {
-      key: index + "-" + column.id,
-      column: column
-    });
-  })));
-};
+  var mTableBodyCellrops = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
 
-var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
-  var width = _ref.width;
-  return React.createElement(TableCell$2, {
-    style: {
+  var tableCellProps = _extends({}, mTableBodyCellrops, {
+    style: _extends({
       width: width
-    }
+    }, (_mTableBodyCellrops$s = mTableBodyCellrops == null ? void 0 : mTableBodyCellrops.style) != null ? _mTableBodyCellrops$s : {})
   });
+
+  return React.createElement(TableCell$4, Object.assign({}, tableCellProps));
 };
 
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
+  var _mTableHeadRowProps$s;
+
   var headerGroup = _ref.headerGroup;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      overrideTableHeadRowComponent = _useMaterialReactTabl.overrideTableHeadRowComponent,
       anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
-      enableColumnHiding = _useMaterialReactTabl.enableColumnHiding,
-      enableExpandAll = _useMaterialReactTabl.enableExpandAll,
+      densePadding = _useMaterialReactTabl.densePadding,
+      disableExpandAll = _useMaterialReactTabl.disableExpandAll,
+      enableRowActions = _useMaterialReactTabl.enableRowActions,
       enableSelection = _useMaterialReactTabl.enableSelection,
+      localization = _useMaterialReactTabl.localization,
+      muiTableHeadRowProps = _useMaterialReactTabl.muiTableHeadRowProps,
+      positionActionsColumn = _useMaterialReactTabl.positionActionsColumn,
       renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
       tableInstance = _useMaterialReactTabl.tableInstance;
 
-  if (overrideTableHeadRowComponent) {
-    return React.createElement(React.Fragment, null, overrideTableHeadRowComponent(headerGroup, tableInstance));
-  }
-
   var isParentHeader = useMemo(function () {
     return headerGroup.headers.some(function (h) {
       var _h$columns$length, _h$columns;
@@ -546,140 +563,220 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
       return ((_h$columns$length = (_h$columns = h.columns) == null ? void 0 : _h$columns.length) != null ? _h$columns$length : 0) > 0;
     });
   }, [headerGroup.headers]);
-  return React.createElement(TableRow, Object.assign({}, headerGroup.getHeaderGroupProps()), anyRowsCanExpand || renderDetailPanel ? enableExpandAll && !isParentHeader ? React.createElement(MRT_ExpandAllButton, null) : React.createElement(MRT_TableSpacerCell, {
+  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 : {})
+  });
+
+  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(StyledTableHeadCell, {
+    style: {
+      textAlign: 'center'
+    }
+  }, localization == null ? void 0 : localization.actionsHeadColumnTitle)), 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_SelectAllCheckbox, null) : React.createElement(MRT_TableSpacerCell, {
     width: "1rem"
-  }) : null, headerGroup.headers.map(function (column, index) {
+  }) : null, headerGroup.headers.map(function (column) {
     return React.createElement(MRT_TableHeadCell, {
-      key: index + "-" + column.id,
+      key: column.getHeaderProps().key,
       column: column
     });
-  }), enableColumnHiding && !isParentHeader && React.createElement(MRT_ShowHideColumnsButton, null));
-};
-
-var MRT_TablePagination = function MRT_TablePagination() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      tablePaginationProps = _useMaterialReactTabl.tablePaginationProps,
-      overrideTablePaginationComponent = _useMaterialReactTabl.overrideTablePaginationComponent;
-
-  var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
-    tableInstance.setPageSize(+event.target.value);
-    tableInstance.gotoPage(0);
-  };
-
-  if (overrideTablePaginationComponent) {
-    return React.createElement(React.Fragment, null, overrideTablePaginationComponent(tableInstance));
-  }
-
-  return React.createElement(TableRow, null, React.createElement(TablePagination, Object.assign({
-    colSpan: tableInstance.visibleColumns.length + 10,
-    count: tableInstance.rows.length,
-    onPageChange: function onPageChange(_, newPage) {
-      return tableInstance.gotoPage(newPage);
-    },
-    onRowsPerPageChange: handleChangeRowsPerPage,
-    page: tableInstance.state.pageIndex,
-    rowsPerPage: tableInstance.state.pageSize,
-    showFirstButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
-    showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2
-  }, tablePaginationProps)));
+  }), enableRowActions && positionActionsColumn === 'last' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(StyledTableHeadCell, {
+    densePadding: densePadding
+  }, localization == null ? void 0 : localization.actionsHeadColumnTitle)));
 };
 
 var MRT_TableHead = function MRT_TableHead() {
   var _useMaterialReactTabl = useMaterialReactTable(),
-      overrideTableHeadComponent = _useMaterialReactTabl.overrideTableHeadComponent,
       tableInstance = _useMaterialReactTabl.tableInstance,
-      tableHeadProps = _useMaterialReactTabl.tableHeadProps,
-      enablePagination = _useMaterialReactTabl.enablePagination,
-      isFetching = _useMaterialReactTabl.isFetching,
-      positionPagination = _useMaterialReactTabl.positionPagination;
-
-  if (overrideTableHeadComponent) {
-    return React.createElement(React.Fragment, null, overrideTableHeadComponent(tableInstance));
-  }
+      muiTableHeadProps = _useMaterialReactTabl.muiTableHeadProps;
 
-  return React.createElement(TableHead, Object.assign({}, tableHeadProps), isFetching && React.createElement(LinearProgress, null), enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null), tableInstance.headerGroups.map(function (headerGroup, index) {
+  var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps(tableInstance) : muiTableHeadProps;
+  return React.createElement(TableHead, Object.assign({}, tableHeadProps), tableInstance.headerGroups.map(function (headerGroup) {
     return React.createElement(MRT_TableHeadRow, {
-      key: index + "-" + headerGroup.id,
+      key: headerGroup.getHeaderGroupProps().key,
       headerGroup: headerGroup
     });
   }));
 };
 
-var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
+var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
+  var _cell$column$muiTable;
+
   var cell = _ref.cell;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      overrideTableBodyCellComponent = _useMaterialReactTabl.overrideTableBodyCellComponent,
-      onCellClick = _useMaterialReactTabl.onCellClick;
+      currentEditingRow = _useMaterialReactTabl.currentEditingRow,
+      localization = _useMaterialReactTabl.localization,
+      muiTableBodyCellEditTextFieldProps = _useMaterialReactTabl.muiTableBodyCellEditTextFieldProps,
+      setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow;
+
+  var handleChange = function handleChange(event) {
+    if (currentEditingRow) {
+      cell.row.values[cell.column.id] = event.target.value;
+      setCurrentEditingRow(_extends({}, currentEditingRow));
+    }
 
-  if (overrideTableBodyCellComponent) {
-    return React.createElement(React.Fragment, null, overrideTableBodyCellComponent(cell, tableInstance));
+    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(TableCell$2, Object.assign({
-    onClick: function onClick(event) {
-      return onCellClick == null ? void 0 : onCellClick(event, cell);
+  return React.createElement(TextField$1, Object.assign({
+    margin: "dense",
+    onChange: handleChange,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
     },
-    variant: "body"
-  }, cell.getCellProps()), cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
+    placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
+    value: cell.value,
+    variant: "standard"
+  }, textFieldProps));
 };
 
-var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
-  var row = _ref.row;
+var TableCell = /*#__PURE__*/styled(TableCell$4, {
+  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 _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
-      overrideTableDetailPanelComponent = _useMaterialReactTabl.overrideTableDetailPanelComponent,
-      tableDetailPanelProps = _useMaterialReactTabl.tableDetailPanelProps;
+      onCellClick = _useMaterialReactTabl.onCellClick,
+      muiTableBodyCellProps = _useMaterialReactTabl.muiTableBodyCellProps,
+      densePadding = _useMaterialReactTabl.densePadding,
+      currentEditingRow = _useMaterialReactTabl.currentEditingRow;
 
-  if (overrideTableDetailPanelComponent) {
-    return React.createElement(React.Fragment, null, overrideTableDetailPanelComponent(row, tableInstance));
-  }
+  var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
+  var mcTableCellBodyProps = cell.column.muiTableBodyCellProps instanceof Function ? cell.column.muiTableBodyCellProps(cell) : cell.column.muiTableBodyCellProps;
 
-  return React.createElement(TableRow, Object.assign({}, row.getToggleRowExpandedProps()), React.createElement(TableCell$2, Object.assign({
-    colSpan: tableInstance.visibleColumns.length + 10,
-    style: {
-      borderBottom: !row.isExpanded ? 'none' : undefined,
-      paddingBottom: row.isExpanded ? '1rem' : 0,
-      paddingTop: row.isExpanded ? '1rem' : 0,
-      transition: 'all 0.2s'
+  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(TableCell, Object.assign({
+    densePadding: densePadding,
+    onClick: function onClick(event) {
+      return onCellClick == null ? void 0 : onCellClick(event, cell);
     }
-  }, tableDetailPanelProps), React.createElement(Collapse, {
-    "in": row.isExpanded
-  }, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
+  }, 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 MRT_ExpandButton = function MRT_ExpandButton(_ref) {
-  var row = _ref.row;
+var TableCell$1 = /*#__PURE__*/styled(TableCell$4, {
+  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, _mTableDetailPanelPro;
+
+  var row = _ref2.row;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      localization = _useMaterialReactTabl.localization,
       tableInstance = _useMaterialReactTabl.tableInstance,
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
+      muiTableDetailPanelProps = _useMaterialReactTabl.muiTableDetailPanelProps,
+      muiTableBodyRowProps = _useMaterialReactTabl.muiTableBodyRowProps,
+      onDetailPanelClick = _useMaterialReactTabl.onDetailPanelClick;
 
-  return React.createElement(TableCell$2, Object.assign({
-    size: "small"
-  }, row.getToggleRowExpandedProps(), {
-    style: {
-      padding: '0.5rem',
-      paddingRight: '0',
-      paddingLeft: row.depth + 0.5 + "rem",
-      width: (renderDetailPanel ? 2 : tableInstance.expandedDepth - row.depth + 2) + "rem"
+  var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
+
+  var tableRowProps = _extends({}, mTableBodyRowProps, row.getToggleRowExpandedProps(), {
+    style: _extends({}, row.getToggleRowExpandedProps().style, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
+  });
+
+  var mTableDetailPanelProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps(row) : muiTableDetailPanelProps;
+
+  var tableCellProps = _extends({}, mTableDetailPanelProps, {
+    style: _extends({}, (_mTableDetailPanelPro = mTableDetailPanelProps == null ? void 0 : mTableDetailPanelProps.style) != null ? _mTableDetailPanelPro : {})
+  });
+
+  return React.createElement(TableRow$1, Object.assign({
+    hover: true
+  }, tableRowProps), React.createElement(TableCell$1, Object.assign({
+    colSpan: tableInstance.visibleColumns.length + 10,
+    isExpanded: row.isExpanded,
+    onClick: function onClick(event) {
+      return onDetailPanelClick == null ? void 0 : onDetailPanelClick(event, row);
     }
-  }), React.createElement(IconButton$1, {
+  }, tableCellProps), React.createElement(Collapse, {
+    "in": row.isExpanded
+  }, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
+};
+
+var TableCell$2 = /*#__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 ExpandMoreIcon = /*#__PURE__*/styled(MuiExpandMoreIcon, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'rotation';
+  }
+})(function (_ref2) {
+  var rotation = _ref2.rotation;
+  return {
+    transform: "rotate(" + rotation + "deg)",
+    transition: 'transform 0.2s'
+  };
+});
+var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
+  var row = _ref3.row;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      localization = _useMaterialReactTabl.localization,
+      densePadding = _useMaterialReactTabl.densePadding,
+      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+
+  return React.createElement(TableCell$2, {
+    size: "small",
+    densePadding: densePadding,
+    depth: row.depth
+  }, React.createElement(IconButton$2, Object.assign({
     "aria-label": localization == null ? void 0 : localization.expandButtonTitle,
+    disabled: !row.canExpand && !renderDetailPanel,
     title: localization == null ? void 0 : localization.expandButtonTitle
-  }, React.createElement(ExpandMoreIcon, {
-    fontSize: "small",
-    style: {
-      transform: row.isExpanded ? 'rotate(-180deg)' : 'rotate(0)',
-      transition: 'transform 0.2s'
-    }
+  }, row.getToggleRowExpandedProps()), React.createElement(ExpandMoreIcon, {
+    fontSize: row.canExpand || renderDetailPanel ? 'medium' : 'small',
+    rotation: !row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0
   })));
 };
 
@@ -688,7 +785,9 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
-      onRowSelectChange = _useMaterialReactTabl.onRowSelectChange;
+      onRowSelectChange = _useMaterialReactTabl.onRowSelectChange,
+      densePadding = _useMaterialReactTabl.densePadding,
+      localization = _useMaterialReactTabl.localization;
 
   var onSelectChange = function onSelectChange(event) {
     var _row$getToggleRowSele;
@@ -697,49 +796,982 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     onRowSelectChange == null ? void 0 : onRowSelectChange(event, row, tableInstance.selectedFlatRows);
   };
 
-  return React.createElement(TableCell$2, {
-    style: {
-      width: '2rem',
-      padding: '0.5rem'
-    }
-  }, React.createElement(Checkbox, Object.assign({}, row.getToggleRowSelectedProps(), {
+  return React.createElement(MRT_TableButtonCell, {
+    densePadding: densePadding
+  }, React.createElement(Checkbox, Object.assign({
+    inputProps: {
+      'aria-label': localization == null ? void 0 : localization.selectCheckboxTitle
+    },
     onChange: onSelectChange
-  })));
+  }, row.getToggleRowSelectedProps())));
 };
 
-var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
+var MenuItem$1 = /*#__PURE__*/styled(MenuItem$2)({
+  display: 'flex',
+  gap: '0.75rem'
+});
+var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
+  var _renderRowActionMenuI;
+
+  var anchorEl = _ref.anchorEl,
+      row = _ref.row,
+      handleEdit = _ref.handleEdit,
+      setAnchorEl = _ref.setAnchorEl;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      enableRowEditing = _useMaterialReactTabl.enableRowEditing,
+      localization = _useMaterialReactTabl.localization,
+      renderRowActionMenuItems = _useMaterialReactTabl.renderRowActionMenuItems,
+      tableInstance = _useMaterialReactTabl.tableInstance;
+
+  return React.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    }
+  }, enableRowEditing && React.createElement(MenuItem$1, {
+    onClick: handleEdit
+  }, React.createElement(EditIcon, null), " ", localization == null ? void 0 : localization.rowActionMenuItemEdit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
+    return setAnchorEl(null);
+  })) != null ? _renderRowActionMenuI : null);
+};
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var runtime_1 = createCommonjsModule(function (module) {
+/**
+ * Copyright (c) 2014-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var runtime = (function (exports) {
+
+  var Op = Object.prototype;
+  var hasOwn = Op.hasOwnProperty;
+  var undefined$1; // More compressible than void 0.
+  var $Symbol = typeof Symbol === "function" ? Symbol : {};
+  var iteratorSymbol = $Symbol.iterator || "@@iterator";
+  var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
+  var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
+
+  function define(obj, key, value) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+    return obj[key];
+  }
+  try {
+    // IE 8 has a broken Object.defineProperty that only works on DOM objects.
+    define({}, "");
+  } catch (err) {
+    define = function(obj, key, value) {
+      return obj[key] = value;
+    };
+  }
+
+  function wrap(innerFn, outerFn, self, tryLocsList) {
+    // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
+    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
+    var generator = Object.create(protoGenerator.prototype);
+    var context = new Context(tryLocsList || []);
+
+    // The ._invoke method unifies the implementations of the .next,
+    // .throw, and .return methods.
+    generator._invoke = makeInvokeMethod(innerFn, self, context);
+
+    return generator;
+  }
+  exports.wrap = wrap;
+
+  // Try/catch helper to minimize deoptimizations. Returns a completion
+  // record like context.tryEntries[i].completion. This interface could
+  // have been (and was previously) designed to take a closure to be
+  // invoked without arguments, but in all the cases we care about we
+  // already have an existing method we want to call, so there's no need
+  // to create a new function object. We can even get away with assuming
+  // the method takes exactly one argument, since that happens to be true
+  // in every case, so we don't have to touch the arguments object. The
+  // only additional allocation required is the completion record, which
+  // has a stable shape and so hopefully should be cheap to allocate.
+  function tryCatch(fn, obj, arg) {
+    try {
+      return { type: "normal", arg: fn.call(obj, arg) };
+    } catch (err) {
+      return { type: "throw", arg: err };
+    }
+  }
+
+  var GenStateSuspendedStart = "suspendedStart";
+  var GenStateSuspendedYield = "suspendedYield";
+  var GenStateExecuting = "executing";
+  var GenStateCompleted = "completed";
+
+  // Returning this object from the innerFn has the same effect as
+  // breaking out of the dispatch switch statement.
+  var ContinueSentinel = {};
+
+  // Dummy constructor functions that we use as the .constructor and
+  // .constructor.prototype properties for functions that return Generator
+  // objects. For full spec compliance, you may wish to configure your
+  // minifier not to mangle the names of these two functions.
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+
+  // This is a polyfill for %IteratorPrototype% for environments that
+  // don't natively support it.
+  var IteratorPrototype = {};
+  define(IteratorPrototype, iteratorSymbol, function () {
+    return this;
+  });
+
+  var getProto = Object.getPrototypeOf;
+  var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
+  if (NativeIteratorPrototype &&
+      NativeIteratorPrototype !== Op &&
+      hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
+    // This environment has a native %IteratorPrototype%; use it instead
+    // of the polyfill.
+    IteratorPrototype = NativeIteratorPrototype;
+  }
+
+  var Gp = GeneratorFunctionPrototype.prototype =
+    Generator.prototype = Object.create(IteratorPrototype);
+  GeneratorFunction.prototype = GeneratorFunctionPrototype;
+  define(Gp, "constructor", GeneratorFunctionPrototype);
+  define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
+  GeneratorFunction.displayName = define(
+    GeneratorFunctionPrototype,
+    toStringTagSymbol,
+    "GeneratorFunction"
+  );
+
+  // Helper for defining the .next, .throw, and .return methods of the
+  // Iterator interface in terms of a single ._invoke method.
+  function defineIteratorMethods(prototype) {
+    ["next", "throw", "return"].forEach(function(method) {
+      define(prototype, method, function(arg) {
+        return this._invoke(method, arg);
+      });
+    });
+  }
+
+  exports.isGeneratorFunction = function(genFun) {
+    var ctor = typeof genFun === "function" && genFun.constructor;
+    return ctor
+      ? ctor === GeneratorFunction ||
+        // For the native GeneratorFunction constructor, the best we can
+        // do is to check its .name property.
+        (ctor.displayName || ctor.name) === "GeneratorFunction"
+      : false;
+  };
+
+  exports.mark = function(genFun) {
+    if (Object.setPrototypeOf) {
+      Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
+    } else {
+      genFun.__proto__ = GeneratorFunctionPrototype;
+      define(genFun, toStringTagSymbol, "GeneratorFunction");
+    }
+    genFun.prototype = Object.create(Gp);
+    return genFun;
+  };
+
+  // Within the body of any async function, `await x` is transformed to
+  // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
+  // `hasOwn.call(value, "__await")` to determine if the yielded value is
+  // meant to be awaited.
+  exports.awrap = function(arg) {
+    return { __await: arg };
+  };
+
+  function AsyncIterator(generator, PromiseImpl) {
+    function invoke(method, arg, resolve, reject) {
+      var record = tryCatch(generator[method], generator, arg);
+      if (record.type === "throw") {
+        reject(record.arg);
+      } else {
+        var result = record.arg;
+        var value = result.value;
+        if (value &&
+            typeof value === "object" &&
+            hasOwn.call(value, "__await")) {
+          return PromiseImpl.resolve(value.__await).then(function(value) {
+            invoke("next", value, resolve, reject);
+          }, function(err) {
+            invoke("throw", err, resolve, reject);
+          });
+        }
+
+        return PromiseImpl.resolve(value).then(function(unwrapped) {
+          // When a yielded Promise is resolved, its final value becomes
+          // the .value of the Promise<{value,done}> result for the
+          // current iteration.
+          result.value = unwrapped;
+          resolve(result);
+        }, function(error) {
+          // If a rejected Promise was yielded, throw the rejection back
+          // into the async generator function so it can be handled there.
+          return invoke("throw", error, resolve, reject);
+        });
+      }
+    }
+
+    var previousPromise;
+
+    function enqueue(method, arg) {
+      function callInvokeWithMethodAndArg() {
+        return new PromiseImpl(function(resolve, reject) {
+          invoke(method, arg, resolve, reject);
+        });
+      }
+
+      return previousPromise =
+        // If enqueue has been called before, then we want to wait until
+        // all previous Promises have been resolved before calling invoke,
+        // so that results are always delivered in the correct order. If
+        // enqueue has not been called before, then it is important to
+        // call invoke immediately, without waiting on a callback to fire,
+        // so that the async generator function has the opportunity to do
+        // any necessary setup in a predictable way. This predictability
+        // is why the Promise constructor synchronously invokes its
+        // executor callback, and why async functions synchronously
+        // execute code before the first await. Since we implement simple
+        // async functions in terms of async generators, it is especially
+        // important to get this right, even though it requires care.
+        previousPromise ? previousPromise.then(
+          callInvokeWithMethodAndArg,
+          // Avoid propagating failures to Promises returned by later
+          // invocations of the iterator.
+          callInvokeWithMethodAndArg
+        ) : callInvokeWithMethodAndArg();
+    }
+
+    // Define the unified helper method that is used to implement .next,
+    // .throw, and .return (see defineIteratorMethods).
+    this._invoke = enqueue;
+  }
+
+  defineIteratorMethods(AsyncIterator.prototype);
+  define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+    return this;
+  });
+  exports.AsyncIterator = AsyncIterator;
+
+  // Note that simple async functions are implemented on top of
+  // AsyncIterator objects; they just return a Promise for the value of
+  // the final result produced by the iterator.
+  exports.async = function(innerFn, outerFn, self, tryLocsList, PromiseImpl) {
+    if (PromiseImpl === void 0) PromiseImpl = Promise;
+
+    var iter = new AsyncIterator(
+      wrap(innerFn, outerFn, self, tryLocsList),
+      PromiseImpl
+    );
+
+    return exports.isGeneratorFunction(outerFn)
+      ? iter // If outerFn is a generator, return the full iterator.
+      : iter.next().then(function(result) {
+          return result.done ? result.value : iter.next();
+        });
+  };
+
+  function makeInvokeMethod(innerFn, self, context) {
+    var state = GenStateSuspendedStart;
+
+    return function invoke(method, arg) {
+      if (state === GenStateExecuting) {
+        throw new Error("Generator is already running");
+      }
+
+      if (state === GenStateCompleted) {
+        if (method === "throw") {
+          throw arg;
+        }
+
+        // Be forgiving, per 25.3.3.3.3 of the spec:
+        // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
+        return doneResult();
+      }
+
+      context.method = method;
+      context.arg = arg;
+
+      while (true) {
+        var delegate = context.delegate;
+        if (delegate) {
+          var delegateResult = maybeInvokeDelegate(delegate, context);
+          if (delegateResult) {
+            if (delegateResult === ContinueSentinel) continue;
+            return delegateResult;
+          }
+        }
+
+        if (context.method === "next") {
+          // Setting context._sent for legacy support of Babel's
+          // function.sent implementation.
+          context.sent = context._sent = context.arg;
+
+        } else if (context.method === "throw") {
+          if (state === GenStateSuspendedStart) {
+            state = GenStateCompleted;
+            throw context.arg;
+          }
+
+          context.dispatchException(context.arg);
+
+        } else if (context.method === "return") {
+          context.abrupt("return", context.arg);
+        }
+
+        state = GenStateExecuting;
+
+        var record = tryCatch(innerFn, self, context);
+        if (record.type === "normal") {
+          // If an exception is thrown from innerFn, we leave state ===
+          // GenStateExecuting and loop back for another invocation.
+          state = context.done
+            ? GenStateCompleted
+            : GenStateSuspendedYield;
+
+          if (record.arg === ContinueSentinel) {
+            continue;
+          }
+
+          return {
+            value: record.arg,
+            done: context.done
+          };
+
+        } else if (record.type === "throw") {
+          state = GenStateCompleted;
+          // Dispatch the exception by looping back around to the
+          // context.dispatchException(context.arg) call above.
+          context.method = "throw";
+          context.arg = record.arg;
+        }
+      }
+    };
+  }
+
+  // Call delegate.iterator[context.method](context.arg) and handle the
+  // result, either by returning a { value, done } result from the
+  // delegate iterator, or by modifying context.method and context.arg,
+  // setting context.delegate to null, and returning the ContinueSentinel.
+  function maybeInvokeDelegate(delegate, context) {
+    var method = delegate.iterator[context.method];
+    if (method === undefined$1) {
+      // A .throw or .return when the delegate iterator has no .throw
+      // method always terminates the yield* loop.
+      context.delegate = null;
+
+      if (context.method === "throw") {
+        // Note: ["return"] must be used for ES3 parsing compatibility.
+        if (delegate.iterator["return"]) {
+          // If the delegate iterator has a return method, give it a
+          // chance to clean up.
+          context.method = "return";
+          context.arg = undefined$1;
+          maybeInvokeDelegate(delegate, context);
+
+          if (context.method === "throw") {
+            // If maybeInvokeDelegate(context) changed context.method from
+            // "return" to "throw", let that override the TypeError below.
+            return ContinueSentinel;
+          }
+        }
+
+        context.method = "throw";
+        context.arg = new TypeError(
+          "The iterator does not provide a 'throw' method");
+      }
+
+      return ContinueSentinel;
+    }
+
+    var record = tryCatch(method, delegate.iterator, context.arg);
+
+    if (record.type === "throw") {
+      context.method = "throw";
+      context.arg = record.arg;
+      context.delegate = null;
+      return ContinueSentinel;
+    }
+
+    var info = record.arg;
+
+    if (! info) {
+      context.method = "throw";
+      context.arg = new TypeError("iterator result is not an object");
+      context.delegate = null;
+      return ContinueSentinel;
+    }
+
+    if (info.done) {
+      // Assign the result of the finished delegate to the temporary
+      // variable specified by delegate.resultName (see delegateYield).
+      context[delegate.resultName] = info.value;
+
+      // Resume execution at the desired location (see delegateYield).
+      context.next = delegate.nextLoc;
+
+      // If context.method was "throw" but the delegate handled the
+      // exception, let the outer generator proceed normally. If
+      // context.method was "next", forget context.arg since it has been
+      // "consumed" by the delegate iterator. If context.method was
+      // "return", allow the original .return call to continue in the
+      // outer generator.
+      if (context.method !== "return") {
+        context.method = "next";
+        context.arg = undefined$1;
+      }
+
+    } else {
+      // Re-yield the result returned by the delegate method.
+      return info;
+    }
+
+    // The delegate iterator is finished, so forget it and continue with
+    // the outer generator.
+    context.delegate = null;
+    return ContinueSentinel;
+  }
+
+  // Define Generator.prototype.{next,throw,return} in terms of the
+  // unified ._invoke helper method.
+  defineIteratorMethods(Gp);
+
+  define(Gp, toStringTagSymbol, "Generator");
+
+  // A Generator should always return itself as the iterator object when the
+  // @@iterator function is called on it. Some browsers' implementations of the
+  // iterator prototype chain incorrectly implement this, causing the Generator
+  // object to not be returned from this call. This ensures that doesn't happen.
+  // See https://github.com/facebook/regenerator/issues/274 for more details.
+  define(Gp, iteratorSymbol, function() {
+    return this;
+  });
+
+  define(Gp, "toString", function() {
+    return "[object Generator]";
+  });
+
+  function pushTryEntry(locs) {
+    var entry = { tryLoc: locs[0] };
+
+    if (1 in locs) {
+      entry.catchLoc = locs[1];
+    }
+
+    if (2 in locs) {
+      entry.finallyLoc = locs[2];
+      entry.afterLoc = locs[3];
+    }
+
+    this.tryEntries.push(entry);
+  }
+
+  function resetTryEntry(entry) {
+    var record = entry.completion || {};
+    record.type = "normal";
+    delete record.arg;
+    entry.completion = record;
+  }
+
+  function Context(tryLocsList) {
+    // The root entry object (effectively a try statement without a catch
+    // or a finally block) gives us a place to store values thrown from
+    // locations where there is no enclosing try statement.
+    this.tryEntries = [{ tryLoc: "root" }];
+    tryLocsList.forEach(pushTryEntry, this);
+    this.reset(true);
+  }
+
+  exports.keys = function(object) {
+    var keys = [];
+    for (var key in object) {
+      keys.push(key);
+    }
+    keys.reverse();
+
+    // Rather than returning an object with a next method, we keep
+    // things simple and return the next function itself.
+    return function next() {
+      while (keys.length) {
+        var key = keys.pop();
+        if (key in object) {
+          next.value = key;
+          next.done = false;
+          return next;
+        }
+      }
+
+      // To avoid creating an additional object, we just hang the .value
+      // and .done properties off the next function object itself. This
+      // also ensures that the minifier will not anonymize the function.
+      next.done = true;
+      return next;
+    };
+  };
+
+  function values(iterable) {
+    if (iterable) {
+      var iteratorMethod = iterable[iteratorSymbol];
+      if (iteratorMethod) {
+        return iteratorMethod.call(iterable);
+      }
+
+      if (typeof iterable.next === "function") {
+        return iterable;
+      }
+
+      if (!isNaN(iterable.length)) {
+        var i = -1, next = function next() {
+          while (++i < iterable.length) {
+            if (hasOwn.call(iterable, i)) {
+              next.value = iterable[i];
+              next.done = false;
+              return next;
+            }
+          }
+
+          next.value = undefined$1;
+          next.done = true;
+
+          return next;
+        };
+
+        return next.next = next;
+      }
+    }
+
+    // Return an iterator with no values.
+    return { next: doneResult };
+  }
+  exports.values = values;
+
+  function doneResult() {
+    return { value: undefined$1, done: true };
+  }
+
+  Context.prototype = {
+    constructor: Context,
+
+    reset: function(skipTempReset) {
+      this.prev = 0;
+      this.next = 0;
+      // Resetting context._sent for legacy support of Babel's
+      // function.sent implementation.
+      this.sent = this._sent = undefined$1;
+      this.done = false;
+      this.delegate = null;
+
+      this.method = "next";
+      this.arg = undefined$1;
+
+      this.tryEntries.forEach(resetTryEntry);
+
+      if (!skipTempReset) {
+        for (var name in this) {
+          // Not sure about the optimal order of these conditions:
+          if (name.charAt(0) === "t" &&
+              hasOwn.call(this, name) &&
+              !isNaN(+name.slice(1))) {
+            this[name] = undefined$1;
+          }
+        }
+      }
+    },
+
+    stop: function() {
+      this.done = true;
+
+      var rootEntry = this.tryEntries[0];
+      var rootRecord = rootEntry.completion;
+      if (rootRecord.type === "throw") {
+        throw rootRecord.arg;
+      }
+
+      return this.rval;
+    },
+
+    dispatchException: function(exception) {
+      if (this.done) {
+        throw exception;
+      }
+
+      var context = this;
+      function handle(loc, caught) {
+        record.type = "throw";
+        record.arg = exception;
+        context.next = loc;
+
+        if (caught) {
+          // If the dispatched exception was caught by a catch block,
+          // then let that catch block handle the exception normally.
+          context.method = "next";
+          context.arg = undefined$1;
+        }
+
+        return !! caught;
+      }
+
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        var record = entry.completion;
+
+        if (entry.tryLoc === "root") {
+          // Exception thrown outside of any try block that could handle
+          // it, so set the completion value of the entire function to
+          // throw the exception.
+          return handle("end");
+        }
+
+        if (entry.tryLoc <= this.prev) {
+          var hasCatch = hasOwn.call(entry, "catchLoc");
+          var hasFinally = hasOwn.call(entry, "finallyLoc");
+
+          if (hasCatch && hasFinally) {
+            if (this.prev < entry.catchLoc) {
+              return handle(entry.catchLoc, true);
+            } else if (this.prev < entry.finallyLoc) {
+              return handle(entry.finallyLoc);
+            }
+
+          } else if (hasCatch) {
+            if (this.prev < entry.catchLoc) {
+              return handle(entry.catchLoc, true);
+            }
+
+          } else if (hasFinally) {
+            if (this.prev < entry.finallyLoc) {
+              return handle(entry.finallyLoc);
+            }
+
+          } else {
+            throw new Error("try statement without catch or finally");
+          }
+        }
+      }
+    },
+
+    abrupt: function(type, arg) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.tryLoc <= this.prev &&
+            hasOwn.call(entry, "finallyLoc") &&
+            this.prev < entry.finallyLoc) {
+          var finallyEntry = entry;
+          break;
+        }
+      }
+
+      if (finallyEntry &&
+          (type === "break" ||
+           type === "continue") &&
+          finallyEntry.tryLoc <= arg &&
+          arg <= finallyEntry.finallyLoc) {
+        // Ignore the finally entry if control is not jumping to a
+        // location outside the try/catch block.
+        finallyEntry = null;
+      }
+
+      var record = finallyEntry ? finallyEntry.completion : {};
+      record.type = type;
+      record.arg = arg;
+
+      if (finallyEntry) {
+        this.method = "next";
+        this.next = finallyEntry.finallyLoc;
+        return ContinueSentinel;
+      }
+
+      return this.complete(record);
+    },
+
+    complete: function(record, afterLoc) {
+      if (record.type === "throw") {
+        throw record.arg;
+      }
+
+      if (record.type === "break" ||
+          record.type === "continue") {
+        this.next = record.arg;
+      } else if (record.type === "return") {
+        this.rval = this.arg = record.arg;
+        this.method = "return";
+        this.next = "end";
+      } else if (record.type === "normal" && afterLoc) {
+        this.next = afterLoc;
+      }
+
+      return ContinueSentinel;
+    },
+
+    finish: function(finallyLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.finallyLoc === finallyLoc) {
+          this.complete(entry.completion, entry.afterLoc);
+          resetTryEntry(entry);
+          return ContinueSentinel;
+        }
+      }
+    },
+
+    "catch": function(tryLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.tryLoc === tryLoc) {
+          var record = entry.completion;
+          if (record.type === "throw") {
+            var thrown = record.arg;
+            resetTryEntry(entry);
+          }
+          return thrown;
+        }
+      }
+
+      // The context.catch method must only be called with a location
+      // argument that corresponds to a known catch block.
+      throw new Error("illegal catch attempt");
+    },
+
+    delegateYield: function(iterable, resultName, nextLoc) {
+      this.delegate = {
+        iterator: values(iterable),
+        resultName: resultName,
+        nextLoc: nextLoc
+      };
+
+      if (this.method === "next") {
+        // Deliberately forget the last sent value so that we don't
+        // accidentally pass it on to the delegate.
+        this.arg = undefined$1;
+      }
+
+      return ContinueSentinel;
+    }
+  };
+
+  // Regardless of whether this script is executing as a CommonJS module
+  // or not, return the runtime object so that we can declare the variable
+  // regeneratorRuntime in the outer scope, which allows this module to be
+  // injected easily by `bin/regenerator --include-runtime script.js`.
+  return exports;
+
+}(
+  // If this script is executing as a CommonJS module, use module.exports
+  // as the regeneratorRuntime namespace. Otherwise create a new empty
+  // object. Either way, the resulting object will be used to initialize
+  // the regeneratorRuntime variable at the top of this file.
+   module.exports 
+));
+
+try {
+  regeneratorRuntime = runtime;
+} catch (accidentalStrictMode) {
+  // This module should not be running in strict mode, so the above
+  // assignment should always work unless something is misconfigured. Just
+  // in case runtime.js accidentally runs in strict mode, in modern engines
+  // we can explicitly access globalThis. In older engines we can escape
+  // strict mode using a global Function call. This could conceivably fail
+  // if a Content Security Policy forbids using Function, but in that case
+  // the proper solution is to fix the accidental strict mode problem. If
+  // you've misconfigured your bundler to force strict mode and applied a
+  // CSP to forbid Function, and you're not willing to fix either of those
+  // problems, please detail your unique predicament in a GitHub issue.
+  if (typeof globalThis === "object") {
+    globalThis.regeneratorRuntime = runtime;
+  } else {
+    Function("r", "regeneratorRuntime = r")(runtime);
+  }
+}
+});
+
+var EditActionButtonWrappers = /*#__PURE__*/styled('div')({
+  display: 'flex',
+  gap: '0.75rem'
+});
+var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
+  var _localization$rowActi, _localization$rowActi2;
+
   var row = _ref.row;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      overrideTableBodyRowComponent = _useMaterialReactTabl.overrideTableBodyRowComponent,
+      localization = _useMaterialReactTabl.localization,
+      setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
+      onRowEditSubmit = _useMaterialReactTabl.onRowEditSubmit,
+      currentEditingRow = _useMaterialReactTabl.currentEditingRow;
+
+  var handleCancel = function handleCancel() {
+    row.values = row.original;
+    setCurrentEditingRow(null);
+  };
+
+  var handleSave = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return onRowEditSubmit == null ? void 0 : onRowEditSubmit(currentEditingRow != null ? currentEditingRow : row);
+
+            case 2:
+              setCurrentEditingRow(null);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleSave() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return React.createElement(EditActionButtonWrappers, null, React.createElement(Tooltip, {
+    arrow: true,
+    title: (_localization$rowActi = localization == null ? void 0 : localization.rowActionButtonCancel) != null ? _localization$rowActi : ''
+  }, React.createElement(IconButton$2, {
+    "aria-label": localization == null ? void 0 : localization.rowActionButtonCancel,
+    onClick: handleCancel
+  }, React.createElement(CancelIcon, null))), React.createElement(Tooltip, {
+    arrow: true,
+    title: (_localization$rowActi2 = localization == null ? void 0 : localization.rowActionButtonSave) != null ? _localization$rowActi2 : ''
+  }, React.createElement(IconButton$2, {
+    "aria-label": localization == null ? void 0 : localization.rowActionButtonSave,
+    color: "info",
+    onClick: handleSave
+  }, React.createElement(SaveIcon, null))));
+};
+
+var IconButton$1 = /*#__PURE__*/styled(IconButton$2)({
+  opacity: 0.5,
+  transition: 'opacity 0.2s',
+  marginRight: '2px',
+  height: '2rem',
+  width: '2rem',
+  '&:hover': {
+    opacity: 1
+  }
+});
+var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
+  var _localization$rowActi;
+
+  var row = _ref.row;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      currentEditingRow = _useMaterialReactTabl.currentEditingRow,
+      densePadding = _useMaterialReactTabl.densePadding,
+      localization = _useMaterialReactTabl.localization,
+      renderRowActionMenuItems = _useMaterialReactTabl.renderRowActionMenuItems,
+      enableRowEditing = _useMaterialReactTabl.enableRowEditing,
+      setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
+      renderRowActions = _useMaterialReactTabl.renderRowActions,
+      tableInstance = _useMaterialReactTabl.tableInstance;
+
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var handleOpenRowActionMenu = function handleOpenRowActionMenu(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleEdit = function handleEdit() {
+    setCurrentEditingRow(_extends({}, row));
+    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, {
+    row: row
+  }) : !renderRowActionMenuItems && enableRowEditing ? React.createElement(Tooltip, {
+    placement: "right",
+    arrow: true,
+    title: (_localization$rowActi = localization == null ? void 0 : localization.rowActionMenuItemEdit) != null ? _localization$rowActi : ''
+  }, React.createElement(IconButton$1, {
+    onClick: handleEdit
+  }, React.createElement(EditIcon, null))) : renderRowActionMenuItems ? React.createElement(React.Fragment, null, React.createElement(IconButton$1, {
+    "aria-label": localization == null ? void 0 : localization.rowActionMenuButtonTitle,
+    title: localization == null ? void 0 : localization.rowActionMenuButtonTitle,
+    onClick: handleOpenRowActionMenu,
+    size: "small"
+  }, React.createElement(MoreHorizIcon, null)), React.createElement(MRT_RowActionMenu, {
+    anchorEl: anchorEl,
+    handleEdit: handleEdit,
+    row: row,
+    setAnchorEl: setAnchorEl
+  })) : 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 _useMaterialReactTabl = useMaterialReactTable(),
       anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
+      enableRowActions = _useMaterialReactTabl.enableRowActions,
       enableSelection = _useMaterialReactTabl.enableSelection,
-      enableSubRowTree = _useMaterialReactTabl.enableSubRowTree,
-      enableColumnHiding = _useMaterialReactTabl.enableColumnHiding,
+      muiTableBodyRowProps = _useMaterialReactTabl.muiTableBodyRowProps,
       onRowClick = _useMaterialReactTabl.onRowClick,
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
-      tableInstance = _useMaterialReactTabl.tableInstance;
+      positionActionsColumn = _useMaterialReactTabl.positionActionsColumn,
+      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
 
-  if (overrideTableBodyRowComponent) {
-    return React.createElement(React.Fragment, null, overrideTableBodyRowComponent(row, 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 : {})
+  });
 
   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);
     }
-  }, row.getRowProps()), (enableSubRowTree && anyRowsCanExpand || renderDetailPanel) && (row.canExpand || renderDetailPanel ? React.createElement(MRT_ExpandButton, {
+  }, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
-  }) : React.createElement(MRT_TableSpacerCell, {
-    width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
-  })), enableSelection && React.createElement(MRT_SelectCheckbox, {
+  }), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_ExpandButton, {
     row: row
-  }), row.cells.map(function (cell, index) {
+  }), enableSelection && React.createElement(MRT_SelectCheckbox, {
+    row: row
+  }), row.cells.map(function (cell) {
     return React.createElement(MRT_TableBodyCell, {
-      key: index + "-" + cell.value,
+      key: cell.getCellProps().key,
       cell: cell
     });
-  }), enableColumnHiding && React.createElement(MRT_TableSpacerCell, null)), renderDetailPanel && React.createElement(MRT_TableDetailPanel, {
+  }), enableRowActions && positionActionsColumn === 'last' && React.createElement(MRT_ToggleRowActionMenuButton, {
+    row: row
+  })), renderDetailPanel && React.createElement(MRT_TableDetailPanel, {
     row: row
   }));
 };
@@ -747,124 +1779,133 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
 var TableBody = /*#__PURE__*/styled(TableBody$1)({
   overflowY: 'hidden'
 });
-var CircularProgressWrapper = /*#__PURE__*/styled('div')({
-  backgroundColor: 'rgba(255, 255, 255, 0.5)',
-  display: 'grid',
-  height: '100%',
-  justifyContent: 'center',
-  margin: 'auto',
-  paddingTop: '5rem',
-  position: 'fixed',
-  width: 'calc(100% - 2rem)'
-});
 var MRT_TableBody = function MRT_TableBody() {
+  var _muiTableBodyProps$st;
+
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
-      tableBodyProps = _useMaterialReactTabl.tableBodyProps,
-      isLoading = _useMaterialReactTabl.isLoading,
-      enablePagination = _useMaterialReactTabl.enablePagination,
-      overrideTableBodyComponent = _useMaterialReactTabl.overrideTableBodyComponent;
+      muiTableBodyProps = _useMaterialReactTabl.muiTableBodyProps,
+      manualPagination = _useMaterialReactTabl.manualPagination;
 
-  if (overrideTableBodyComponent) {
-    return React.createElement(React.Fragment, null, overrideTableBodyComponent(tableInstance));
-  }
+  var rows = manualPagination ? tableInstance.rows : tableInstance.page;
 
-  var rows = enablePagination ? tableInstance.page : tableInstance.rows;
-  return React.createElement(React.Fragment, null, React.createElement(TableBody, Object.assign({}, tableBodyProps, tableInstance.getTableBodyProps()), isLoading && React.createElement(CircularProgressWrapper, null, React.createElement(CircularProgress, null)), rows.map(function (row, index) {
+  var tableBodyProps = _extends({}, muiTableBodyProps, tableInstance.getTableBodyProps(), {
+    style: _extends({}, tableInstance.getTableBodyProps().style, (_muiTableBodyProps$st = muiTableBodyProps == null ? void 0 : muiTableBodyProps.style) != null ? _muiTableBodyProps$st : {})
+  });
+
+  return React.createElement(TableBody, Object.assign({}, tableBodyProps), rows.map(function (row) {
     tableInstance.prepareRow(row);
     return React.createElement(MRT_TableBodyRow, {
-      key: index + "-" + row.id,
+      key: row.getRowProps().key,
       row: row
     });
-  })));
+  }));
 };
 
-var TableCell$1 = /*#__PURE__*/styled(TableCell$2)({
-  fontWeight: 'bold'
+var TableCell$3 = /*#__PURE__*/styled(TableCell$4, {
+  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(_ref) {
-  var _column$columns$lengt, _column$columns;
+var MRT_TableFooterCell = function MRT_TableFooterCell(_ref2) {
+  var _column$columns$lengt, _column$columns, _mTableFooterCellProp, _mcTableFooterCellPro;
 
-  var column = _ref.column;
+  var column = _ref2.column;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      overrideTableFooterCellComponent = _useMaterialReactTabl.overrideTableFooterCellComponent;
-
-  if (overrideTableFooterCellComponent) {
-    return React.createElement(React.Fragment, null, overrideTableFooterCellComponent(column, tableInstance));
-  }
+      muiTableFooterCellProps = _useMaterialReactTabl.muiTableFooterCellProps,
+      densePadding = _useMaterialReactTabl.densePadding,
+      enableColumnResizing = _useMaterialReactTabl.enableColumnResizing;
 
   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;
-  return React.createElement(TableCell$1, Object.assign({
+  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 : {})
+  });
+
+  return React.createElement(TableCell$3, Object.assign({
     align: isParentHeader ? 'center' : 'left',
+    densePadding: densePadding,
+    enableColumnResizing: enableColumnResizing,
     variant: "head"
-  }, column.getFooterProps()), column.render('Footer'));
+  }, tableCellProps), column.render('Footer'));
 };
 
 var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
+  var _mTableFooterRowProps;
+
   var footerGroup = _ref.footerGroup;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
       columns = _useMaterialReactTabl.columns,
       anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
-      enableColumnHiding = _useMaterialReactTabl.enableColumnHiding,
       enableSelection = _useMaterialReactTabl.enableSelection,
+      enableRowActions = _useMaterialReactTabl.enableRowActions,
+      positionActionsColumn = _useMaterialReactTabl.positionActionsColumn,
       tableInstance = _useMaterialReactTabl.tableInstance,
-      overrideTableFooterRowComponent = _useMaterialReactTabl.overrideTableFooterRowComponent; //if no content in row, skip row
+      muiTableFooterRowProps = _useMaterialReactTabl.muiTableFooterRowProps; //if no content in row, skip row
 
 
   if (!(columns != null && columns.some(function (c) {
     return c.Footer;
   }))) return null;
+  var mTableFooterRowProps = muiTableFooterRowProps instanceof Function ? muiTableFooterRowProps(footerGroup) : muiTableFooterRowProps;
 
-  if (overrideTableFooterRowComponent) {
-    return React.createElement(React.Fragment, null, overrideTableFooterRowComponent(footerGroup, tableInstance));
-  }
+  var tableRowProps = _extends({}, mTableFooterRowProps, footerGroup.getFooterGroupProps(), {
+    style: _extends({}, footerGroup.getFooterGroupProps().style, (_mTableFooterRowProps = mTableFooterRowProps == null ? void 0 : mTableFooterRowProps.style) != null ? _mTableFooterRowProps : {})
+  });
 
-  return React.createElement(TableRow, Object.assign({}, footerGroup.getFooterGroupProps()), (anyRowsCanExpand || renderDetailPanel) && React.createElement(TableCell$2, {
-    style: {
-      width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
-    }
+  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), enableRowActions && 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"
-  }), footerGroup.headers.map(function (column, index) {
+  }), footerGroup.headers.map(function (column) {
     return React.createElement(MRT_TableFooterCell, {
-      key: index + "-" + column.id,
+      key: column.getFooterProps().key,
       column: column
     });
-  }), enableColumnHiding && React.createElement(MRT_TableSpacerCell, null));
+  }), enableRowActions && positionActionsColumn === 'last' && React.createElement(MRT_TableSpacerCell, null));
 };
 
 var MRT_TableFooter = function MRT_TableFooter() {
   var _useMaterialReactTabl = useMaterialReactTable(),
-      overrideTableFooterComponent = _useMaterialReactTabl.overrideTableFooterComponent,
-      enablePagination = _useMaterialReactTabl.enablePagination,
-      positionPagination = _useMaterialReactTabl.positionPagination,
-      tableFooterProps = _useMaterialReactTabl.tableFooterProps,
+      muiTableFooterProps = _useMaterialReactTabl.muiTableFooterProps,
       tableInstance = _useMaterialReactTabl.tableInstance;
 
-  if (overrideTableFooterComponent) {
-    return React.createElement(React.Fragment, null, overrideTableFooterComponent(tableInstance));
-  }
-
-  return React.createElement(TableFooter, Object.assign({}, tableFooterProps), tableInstance.footerGroups.map(function (footerGroup, index) {
+  return React.createElement(TableFooter, Object.assign({}, muiTableFooterProps), tableInstance.footerGroups.map(function (footerGroup) {
     return React.createElement(MRT_TableFooterRow, {
-      key: index + "-" + footerGroup.id,
+      key: footerGroup.getFooterGroupProps().key,
       footerGroup: footerGroup
     });
-  }), enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null));
+  }));
 };
 
 var MRT_Table = function MRT_Table() {
+  var _muiTableProps$style;
+
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
-      tableProps = _useMaterialReactTabl.tableProps,
-      showHead = _useMaterialReactTabl.showHead,
-      showFooter = _useMaterialReactTabl.showFooter;
+      muiTableProps = _useMaterialReactTabl.muiTableProps,
+      hideTableHead = _useMaterialReactTabl.hideTableHead,
+      hideTableFooter = _useMaterialReactTabl.hideTableFooter;
+
+  var tableProps = _extends({}, muiTableProps, tableInstance.getTableProps(), {
+    style: _extends({}, tableInstance.getTableProps().style, (_muiTableProps$style = muiTableProps == null ? void 0 : muiTableProps.style) != null ? _muiTableProps$style : {})
+  });
 
-  return React.createElement(Table, Object.assign({}, tableProps, tableInstance.getTableProps()), showHead && React.createElement(MRT_TableHead, null), React.createElement(MRT_TableBody, null), showFooter && React.createElement(MRT_TableFooter, null));
+  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)({
@@ -872,10 +1913,11 @@ var TextField = /*#__PURE__*/styled(TextField$1)({
 });
 var MRT_SearchTextField = function MRT_SearchTextField() {
   var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      tableSearchTextfieldProps = _useMaterialReactTabl.tableSearchTextfieldProps,
+      showSearch = _useMaterialReactTabl.showSearch,
       localization = _useMaterialReactTabl.localization,
-      onSearchChange = _useMaterialReactTabl.onSearchChange;
+      muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps,
+      onGlobalFilterChange = _useMaterialReactTabl.onGlobalFilterChange,
+      tableInstance = _useMaterialReactTabl.tableInstance;
 
   var _useState = useState(''),
       searchValue = _useState[0],
@@ -885,7 +1927,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
     var _event$target$value;
 
     tableInstance.setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
-    onSearchChange == null ? void 0 : onSearchChange(event);
+    onGlobalFilterChange == null ? void 0 : onGlobalFilterChange(event);
   }, 200);
 
   var handleClear = function handleClear() {
@@ -893,7 +1935,11 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
     tableInstance.setGlobalFilter(undefined);
   };
 
-  return React.createElement(TextField, Object.assign({
+  return React.createElement(Collapse, {
+    "in": showSearch,
+    orientation: "horizontal"
+  }, React.createElement(TextField, Object.assign({
+    id: "global-search-text-field",
     placeholder: localization == null ? void 0 : localization.searchTextFieldPlaceholder,
     onChange: function onChange(event) {
       setSearchValue(event.target.value);
@@ -909,7 +1955,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
       })),
       endAdornment: React.createElement(InputAdornment, {
         position: "end"
-      }, React.createElement(IconButton$1, {
+      }, React.createElement(IconButton$2, {
         "aria-label": localization == null ? void 0 : localization.searchTextFieldClearButtonTitle,
         disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
         onClick: handleClear,
@@ -919,104 +1965,324 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
         fontSize: "small"
       })))
     }
-  }, tableSearchTextfieldProps));
+  }, muiSearchTextFieldProps)));
 };
 
-var Toolbar = /*#__PURE__*/styled(Toolbar$1)({
-  padding: '0.5rem',
+var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton() {
+  var _localization$toggleF;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      localization = _useMaterialReactTabl.localization,
+      setShowFilters = _useMaterialReactTabl.setShowFilters,
+      showFilters = _useMaterialReactTabl.showFilters;
+
+  return React.createElement(Tooltip, {
+    arrow: true,
+    title: (_localization$toggleF = localization == null ? void 0 : localization.toggleFilterButtonTitle) != null ? _localization$toggleF : ''
+  }, React.createElement(IconButton$2, {
+    "aria-label": localization == null ? void 0 : localization.toggleFilterButtonTitle,
+    onClick: function onClick() {
+      return setShowFilters(!showFilters);
+    },
+    size: "small"
+  }, showFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterIcon, null)));
+};
+
+var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
+  var _column$columns;
+
+  var column = _ref.column;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      maxColumnDepth = _useMaterialReactTabl.maxColumnDepth;
+
+  var isMaxDepth = column.depth === maxColumnDepth;
+  return React.createElement(React.Fragment, null, React.createElement(MenuItem$2, {
+    style: {
+      paddingLeft: column.depth + 1 + "rem"
+    }
+  }, isMaxDepth ? React.createElement(FormControlLabel, {
+    checked: column.isVisible,
+    control: React.createElement(Switch, null),
+    label: column.Header,
+    onChange: function onChange() {
+      return isMaxDepth && column.toggleHidden();
+    }
+  }) : React.createElement(Typography, null, column.Header)), (_column$columns = column.columns) == null ? void 0 : _column$columns.map(function (c, i) {
+    return React.createElement(MRT_ShowHideColumnsMenu, {
+      key: i + "-" + c.id,
+      column: c
+    });
+  }));
+};
+
+var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
+  var _localization$showHid;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      localization = _useMaterialReactTabl.localization;
+
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
+    arrow: true,
+    title: (_localization$showHid = localization == null ? void 0 : localization.showHideColumnsButtonTitle) != null ? _localization$showHid : ''
+  }, React.createElement(IconButton$2, {
+    "aria-label": localization == null ? void 0 : localization.showHideColumnsButtonTitle,
+    onClick: handleClick,
+    size: "small"
+  }, React.createElement(ViewColumnIcon, null))), React.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    }
+  }, tableInstance.columns.map(function (column, index) {
+    return React.createElement(MRT_ShowHideColumnsMenu, {
+      key: index + "-" + column.id,
+      column: column
+    });
+  })));
+};
+
+var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
+  var _localization$toggleD, _localization$toggleD2;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      densePadding = _useMaterialReactTabl.densePadding,
+      setDensePadding = _useMaterialReactTabl.setDensePadding,
+      localization = _useMaterialReactTabl.localization;
+
+  return React.createElement(Tooltip, {
+    arrow: true,
+    title: (_localization$toggleD = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD : ''
+  }, React.createElement(Switch, {
+    inputProps: {
+      'aria-label': (_localization$toggleD2 = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD2 : ''
+    },
+    color: "default",
+    checked: densePadding,
+    size: "small",
+    onChange: function onChange() {
+      return setDensePadding(!densePadding);
+    }
+  }));
+};
+
+var MRT_ToggleSearchButton = function MRT_ToggleSearchButton() {
+  var _localization$toggleS;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      localization = _useMaterialReactTabl.localization,
+      setShowSearch = _useMaterialReactTabl.setShowSearch,
+      showSearch = _useMaterialReactTabl.showSearch,
+      muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps;
+
+  var handleToggleSearch = function handleToggleSearch() {
+    setShowSearch(!showSearch);
+    setTimeout(function () {
+      var _document$getElementB, _muiSearchTextFieldPr;
+
+      return (_document$getElementB = document.getElementById((_muiSearchTextFieldPr = muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.id) != null ? _muiSearchTextFieldPr : "global-search-text-field")) == null ? void 0 : _document$getElementB.focus();
+    }, 200);
+  };
+
+  return React.createElement(Tooltip, {
+    arrow: true,
+    title: (_localization$toggleS = localization == null ? void 0 : localization.toggleSearchButtonTitle) != null ? _localization$toggleS : ''
+  }, React.createElement(IconButton$2, {
+    size: "small",
+    onClick: handleToggleSearch
+  }, showSearch ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
+};
+
+var ToolbarButtonsContainer = /*#__PURE__*/styled('div')({
   display: 'flex',
-  justifyContent: 'space-between'
+  gap: '0.5rem',
+  alignItems: 'center'
 });
-var MRT_Toolbar = function MRT_Toolbar() {
+var MRT_ToolbarButtons = function MRT_ToolbarButtons() {
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      disableFilters = _useMaterialReactTabl.disableFilters,
+      disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
+      disableDensePaddingToggle = _useMaterialReactTabl.disableDensePaddingToggle,
+      disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter;
+
+  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_DensePaddingSwitch, null));
+};
+
+var MRT_TablePagination = function MRT_TablePagination() {
   var _useMaterialReactTabl = useMaterialReactTable(),
-      overrideTableToolbarComponent = _useMaterialReactTabl.overrideTableToolbarComponent,
-      enableSearch = _useMaterialReactTabl.enableSearch,
       tableInstance = _useMaterialReactTabl.tableInstance,
-      tableTitleProps = _useMaterialReactTabl.tableTitleProps,
-      tableToolbarProps = _useMaterialReactTabl.tableToolbarProps,
-      title = _useMaterialReactTabl.title;
+      muiTablePaginationProps = _useMaterialReactTabl.muiTablePaginationProps;
 
-  if (overrideTableToolbarComponent) {
-    return React.createElement(React.Fragment, null, overrideTableToolbarComponent(tableInstance));
-  } //if no features in the toolbar are enabled, don't render anything
+  var tablePaginationProps = muiTablePaginationProps instanceof Function ? muiTablePaginationProps(tableInstance) : muiTablePaginationProps;
 
+  var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
+    tableInstance.setPageSize(+event.target.value);
+    tableInstance.gotoPage(0);
+  };
 
-  if (!enableSearch && !title && !tableToolbarProps) {
-    return null;
-  }
+  return React.createElement(TablePagination, Object.assign({
+    component: 'div',
+    count: tableInstance.rows.length,
+    onPageChange: function onPageChange(_, newPage) {
+      return tableInstance.gotoPage(newPage);
+    },
+    onRowsPerPageChange: handleChangeRowsPerPage,
+    page: tableInstance.state.pageIndex,
+    rowsPerPage: tableInstance.state.pageSize,
+    showFirstButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
+    showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
+    style: {
+      padding: 0
+    }
+  }, tablePaginationProps));
+};
 
+var Toolbar = /*#__PURE__*/styled(Toolbar$2)({
+  display: 'grid',
+  padding: '0.5rem !important'
+});
+var ToolbarTopRow = /*#__PURE__*/styled('div')({
+  padding: '0.5rem',
+  display: 'flex',
+  justifyContent: 'space-between'
+});
+var ToolbarActionsContainer = /*#__PURE__*/styled('div')({
+  display: 'flex',
+  gap: '0.5rem'
+});
+var MRT_ToolbarTop = function MRT_ToolbarTop() {
+  var _renderToolbarActions;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter,
+      hideToolbarActions = _useMaterialReactTabl.hideToolbarActions,
+      manualPagination = _useMaterialReactTabl.manualPagination,
+      muiTableToolbarTopProps = _useMaterialReactTabl.muiTableToolbarTopProps,
+      positionPagination = _useMaterialReactTabl.positionPagination,
+      positionToolbarActions = _useMaterialReactTabl.positionToolbarActions,
+      renderToolbarActions = _useMaterialReactTabl.renderToolbarActions,
+      tableInstance = _useMaterialReactTabl.tableInstance;
+
+  var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
   return React.createElement(Toolbar, Object.assign({
     variant: "dense"
-  }, tableToolbarProps), title ? React.createElement(Typography, Object.assign({}, tableTitleProps), title) : React.createElement("span", null), enableSearch && React.createElement(MRT_SearchTextField, null));
+  }, toolbarProps), React.createElement(ToolbarTopRow, null, (_renderToolbarActions = renderToolbarActions == null ? void 0 : renderToolbarActions(tableInstance)) != null ? _renderToolbarActions : React.createElement("span", null), React.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarButtons, null))), React.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)));
+};
+
+var Toolbar$1 = /*#__PURE__*/styled(Toolbar$2)({
+  display: 'flex',
+  justifyContent: 'space-between'
+});
+var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      hideToolbarActions = _useMaterialReactTabl.hideToolbarActions,
+      manualPagination = _useMaterialReactTabl.manualPagination,
+      muiTableToolbarBottomProps = _useMaterialReactTabl.muiTableToolbarBottomProps,
+      positionPagination = _useMaterialReactTabl.positionPagination,
+      positionToolbarActions = _useMaterialReactTabl.positionToolbarActions,
+      tableInstance = _useMaterialReactTabl.tableInstance;
+
+  var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
+  return React.createElement(Toolbar$1, Object.assign({
+    style: {
+      padding: 0
+    },
+    variant: "dense"
+  }, toolbarProps), !hideToolbarActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarButtons, null) : React.createElement("span", null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null));
 };
 
+var CircularProgressWrapper = /*#__PURE__*/styled('div')(function (_ref) {
+  var theme = _ref.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 _useMaterialReactTabl = useMaterialReactTable(),
-      tableContainerProps = _useMaterialReactTabl.tableContainerProps,
-      showToolbar = _useMaterialReactTabl.showToolbar;
+      muiTableContainerProps = _useMaterialReactTabl.muiTableContainerProps,
+      hideToolbarTop = _useMaterialReactTabl.hideToolbarTop,
+      hideToolbarBottom = _useMaterialReactTabl.hideToolbarBottom,
+      isLoading = _useMaterialReactTabl.isLoading,
+      isFetching = _useMaterialReactTabl.isFetching;
 
   return React.createElement(TableContainer, Object.assign({
     component: Paper
-  }, tableContainerProps), showToolbar && React.createElement(MRT_Toolbar, null), React.createElement(MRT_Table, null));
+  }, muiTableContainerProps), !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));
 };
 
 var defaultLocalization = {
+  actionsHeadColumnTitle: 'Actions',
   columnActionMenuButtonTitle: 'Column Actions',
-  columnActionMenuItemHideColumn: 'Hide column',
-  columnActionMenuItemSortAsc: 'Sort ascending',
   columnActionMenuItemClearSort: 'Clear sorting',
-  columnActionMenuItemSortDesc: 'Sort descending',
-  columnActionMenuItemGroupBy: 'Group by column',
-  columnActionMenuItemUnGroupBy: 'Ungroup column',
+  columnActionMenuItemGroupBy: 'Group by {column}',
+  columnActionMenuItemHideColumn: 'Hide {column} column',
+  columnActionMenuItemSortAsc: 'Sort by {column} ascending',
+  columnActionMenuItemSortDesc: 'Sort by {column} descending',
+  columnActionMenuItemUnGroupBy: 'Ungroup by {column}',
   expandAllButtonTitle: 'Expand all',
   expandButtonTitle: 'Expand',
   filterTextFieldClearButtonTitle: 'Clear filter',
-  filterTextFieldPlaceholder: 'Filter',
+  filterTextFieldPlaceholder: 'Filter by {column}',
+  rowActionButtonCancel: 'Cancel',
+  rowActionButtonSave: 'Save',
+  rowActionMenuButtonTitle: 'Row Actions',
+  rowActionMenuItemEdit: 'Edit',
+  selectCheckboxTitle: 'Select row',
+  rowActionsColumnTitle: 'Actions',
   searchTextFieldClearButtonTitle: 'Clear search',
   searchTextFieldPlaceholder: 'Search',
-  showHideColumnsButtonTitle: 'Show/Hide columns'
+  selectAllCheckboxTitle: 'Select all',
+  showHideColumnsButtonTitle: 'Show/Hide columns',
+  toggleDensePaddingSwitchTitle: 'Toggle dense padding',
+  toggleFilterButtonTitle: 'Toggle filters',
+  toggleSearchButtonTitle: 'Toggle search'
 };
 
-var _excluded$1 = ["defaultColumn", "enablePagination", "enableSorting", "enableSubRowTree", "localization", "positionPagination", "showFiltersInColumnHead", "showFooter", "showHead", "showToolbar"];
-var MaterialReactTable = function MaterialReactTable(_ref) {
+var _excluded = ["defaultColumn", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions"];
+var MaterialReactTable = (function (_ref) {
   var _ref$defaultColumn = _ref.defaultColumn,
       defaultColumn = _ref$defaultColumn === void 0 ? {
     minWidth: 50,
     maxWidth: 1000
   } : _ref$defaultColumn,
-      _ref$enablePagination = _ref.enablePagination,
-      enablePagination = _ref$enablePagination === void 0 ? true : _ref$enablePagination,
-      _ref$enableSorting = _ref.enableSorting,
-      enableSorting = _ref$enableSorting === void 0 ? true : _ref$enableSorting,
-      _ref$enableSubRowTree = _ref.enableSubRowTree,
-      enableSubRowTree = _ref$enableSubRowTree === void 0 ? true : _ref$enableSubRowTree,
       _ref$localization = _ref.localization,
       localization = _ref$localization === void 0 ? defaultLocalization : _ref$localization,
+      _ref$positionActionsC = _ref.positionActionsColumn,
+      positionActionsColumn = _ref$positionActionsC === void 0 ? 'first' : _ref$positionActionsC,
       _ref$positionPaginati = _ref.positionPagination,
       positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
-      _ref$showFiltersInCol = _ref.showFiltersInColumnHead,
-      showFiltersInColumnHead = _ref$showFiltersInCol === void 0 ? true : _ref$showFiltersInCol,
-      _ref$showFooter = _ref.showFooter,
-      showFooter = _ref$showFooter === void 0 ? true : _ref$showFooter,
-      _ref$showHead = _ref.showHead,
-      showHead = _ref$showHead === void 0 ? true : _ref$showHead,
-      _ref$showToolbar = _ref.showToolbar,
-      showToolbar = _ref$showToolbar === void 0 ? true : _ref$showToolbar,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      _ref$positionToolbarA = _ref.positionToolbarActions,
+      positionToolbarActions = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return React.createElement(MaterialReactTableProvider, Object.assign({
     defaultColumn: defaultColumn,
-    enablePagination: enablePagination,
-    enableSorting: enableSorting,
-    enableSubRowTree: enableSubRowTree,
     localization: _extends({}, defaultLocalization, localization),
     positionPagination: positionPagination,
-    showFiltersInColumnHead: showFiltersInColumnHead,
-    showFooter: showFooter,
-    showHead: showHead,
-    showToolbar: showToolbar
+    positionActionsColumn: positionActionsColumn,
+    positionToolbarActions: positionToolbarActions
   }, rest), React.createElement(MRT_TableContainer, null));
-};
+});
 
 export default MaterialReactTable;
 //# sourceMappingURL=material-react-table.esm.js.map