material-react-table 0.3.3 → 0.4.1

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

@@ -1,6 +1,6 @@
-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, InputAdornment, IconButton as IconButton$2, Menu, Divider as Divider$1, styled, MenuItem as MenuItem$2, TableCell as TableCell$6, TableSortLabel, Collapse, Checkbox, TableRow as TableRow$1, TableHead, Tooltip, alpha, TableBody as TableBody$1, TableFooter, Table, FormControlLabel, Switch, Typography, TablePagination, Toolbar as Toolbar$2, TableContainer, Paper, LinearProgress, CircularProgress } from '@mui/material';
+import React, { useMemo, useState, useContext, createContext, Fragment } from 'react';
+import { useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns, useFlexLayout, useAsyncDebounce } from 'react-table';
+import { TextField as TextField$1, Tooltip, InputAdornment, IconButton as IconButton$2, Menu, Divider as Divider$1, styled, MenuItem as MenuItem$2, TableCell as TableCell$3, TableSortLabel, Collapse, Checkbox, TableRow as TableRow$1, TableHead, alpha, TableBody as TableBody$1, TableFooter, Table, FormControlLabel, Switch, Button, TablePagination, useMediaQuery, Chip, Alert as Alert$1, Toolbar as Toolbar$2, Paper, LinearProgress, CircularProgress, TableContainer as TableContainer$1 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import FilterIcon from '@mui/icons-material/FilterList';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -17,6 +17,9 @@ 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';
+import FilterListIcon from '@mui/icons-material/Fullscreen';
+import FilterListOffIcon$1 from '@mui/icons-material/FullscreenExit';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -87,8 +90,16 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var useMRTCalcs = function useMRTCalcs(_ref) {
-  var tableInstance = _ref.tableInstance;
+var MaterialReactTableContext = /*#__PURE__*/function () {
+  return createContext({});
+}();
+
+var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
+  var _props$defaultDensePa, _props$defaultFullScr, _props$defaultShowFil, _props$defaultShowSea;
+
+  var hooks = [useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect];
+  if (props.enableColumnResizing) hooks.unshift(useResizeColumns, useFlexLayout);
+  var tableInstance = useTable.apply(void 0, [props].concat(hooks));
   var anyRowsCanExpand = useMemo(function () {
     return tableInstance.rows.some(function (row) {
       return row.canExpand;
@@ -99,74 +110,59 @@ var useMRTCalcs = function useMRTCalcs(_ref) {
       return row.isExpanded;
     });
   }, [tableInstance.rows]);
-  var maxColumnDepth = useMemo(function () {
-    var maxDepth = 1;
-    tableInstance.columns.forEach(function (column) {
-      var _column$columns;
 
-      if ((_column$columns = column.columns) != null && _column$columns.length) {
-        maxDepth = Math.max(maxDepth, column.columns.length);
-      }
-    });
-    return maxDepth - 1;
-  }, [tableInstance.columns]);
-  return {
-    anyRowsCanExpand: anyRowsCanExpand,
-    anyRowsExpanded: anyRowsExpanded,
-    maxColumnDepth: maxColumnDepth
-  };
-};
-
-var MaterialReactTableContext = /*#__PURE__*/function () {
-  return createContext({});
-}();
-
-var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
-  var _props$defaultShowFil, _props$defaultDensePa;
-
-  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
-  });
-
-  var _useState = useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
-      showFilters = _useState[0],
-      setShowFilters = _useState[1];
+  var _useState = useState(null),
+      currentEditingRow = _useState[0],
+      setCurrentEditingRow = _useState[1];
 
   var _useState2 = useState((_props$defaultDensePa = props.defaultDensePadding) != null ? _props$defaultDensePa : false),
       densePadding = _useState2[0],
       setDensePadding = _useState2[1];
 
-  var _useState3 = useState(null),
-      currentEditingRow = _useState3[0],
-      setCurrentEditingRow = _useState3[1];
+  var _useState3 = useState((_props$defaultFullScr = props.defaultFullScreen) != null ? _props$defaultFullScr : false),
+      fullScreen = _useState3[0],
+      setFullScreen = _useState3[1];
+
+  var _useState4 = useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
+      showFilters = _useState4[0],
+      setShowFilters = _useState4[1];
+
+  var _useState5 = useState((_props$defaultShowSea = props.defaultShowSearchTextField) != null ? _props$defaultShowSea : false),
+      showSearch = _useState5[0],
+      setShowSearch = _useState5[1];
 
   return React.createElement(MaterialReactTableContext.Provider, {
-    value: _extends({}, mrtCalcs, props, {
+    value: _extends({}, props, {
+      anyRowsCanExpand: anyRowsCanExpand,
+      anyRowsExpanded: anyRowsExpanded,
+      currentEditingRow: currentEditingRow,
       densePadding: densePadding,
+      setCurrentEditingRow: setCurrentEditingRow,
       setDensePadding: setDensePadding,
+      fullScreen: fullScreen,
+      setFullScreen: setFullScreen,
       setShowFilters: setShowFilters,
-      currentEditingRow: currentEditingRow,
-      setCurrentEditingRow: setCurrentEditingRow,
+      setShowSearch: setShowSearch,
       showFilters: showFilters,
-      // @ts-ignore
+      showSearch: showSearch,
+      //@ts-ignore
       tableInstance: tableInstance
     })
   }, props.children);
 };
-var useMaterialReactTable = function useMaterialReactTable() {
+var useMRT = function useMRT() {
   return (//@ts-ignore
     useContext(MaterialReactTableContext)
   );
 };
 
-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(),
-      localization = _useMaterialReactTabl.localization;
+  var _useMRT = useMRT(),
+      localization = _useMRT.localization;
 
   var _useState = useState(''),
       filterValue = _useState[0],
@@ -182,14 +178,21 @@ var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
   };
 
   if (column.Filter) {
-    return React.createElement(React.Fragment, null, 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);
@@ -200,20 +203,25 @@ 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$2, {
+      }, 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"
-      })))
+      })))))
     }
   });
 };
@@ -223,15 +231,19 @@ var MenuItem = /*#__PURE__*/styled(MenuItem$2)({
   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(),
-      disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
-      enableColumnGrouping = _useMaterialReactTabl.enableColumnGrouping,
-      disableSortBy = _useMaterialReactTabl.disableSortBy,
-      localization = _useMaterialReactTabl.localization;
+  var _useMRT = useMRT(),
+      disableColumnHiding = _useMRT.disableColumnHiding,
+      disableFilters = _useMRT.disableFilters,
+      disableSortBy = _useMRT.disableSortBy,
+      enableColumnGrouping = _useMRT.enableColumnGrouping,
+      localization = _useMRT.localization,
+      setShowFilters = _useMRT.setShowFilters;
 
   var handleClearSort = function handleClearSort() {
     column.clearSortBy();
@@ -258,6 +270,17 @@ 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,
@@ -272,7 +295,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
@@ -280,25 +303,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
-  })], !disableColumnHiding && 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$2)({
   opacity: 0.5,
   transition: 'opacity 0.2s',
   marginRight: '2px',
-  height: '2rem',
-  width: '2rem',
+  height: '1.6rem',
+  width: '1.6rem',
   '&:hover': {
     opacity: 1
   }
@@ -306,8 +334,8 @@ var IconButton = /*#__PURE__*/styled(IconButton$2)({
 var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
   var column = _ref.column;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      localization = _useMaterialReactTabl.localization;
+  var _useMRT = useMRT(),
+      localization = _useMRT.localization;
 
   var _useState = useState(null),
       anchorEl = _useState[0],
@@ -321,9 +349,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,
@@ -331,7 +359,7 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }));
 };
 
-var StyledTableHeadCell = /*#__PURE__*/styled(TableCell$6, {
+var MRT_StyledTableHeadCell = /*#__PURE__*/styled(TableCell$3, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding' && prop !== 'enableColumnResizing';
   }
@@ -340,23 +368,28 @@ var StyledTableHeadCell = /*#__PURE__*/styled(TableCell$6, {
       enableColumnResizing = _ref.enableColumnResizing;
   return {
     fontWeight: 'bold',
-    verticalAlign: 'text-top',
+    height: '100%',
     padding: densePadding ? '0.5rem' : '1rem',
-    transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out"
+    paddingTop: densePadding ? '0.75rem' : '1.25rem',
+    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',
-  alignItems: 'center'
+  flexWrap: 'nowrap'
 });
 var Divider = /*#__PURE__*/styled(Divider$1)({
   borderRightWidth: '2px',
@@ -368,15 +401,15 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
 
   var column = _ref2.column;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      densePadding = _useMaterialReactTabl.densePadding,
-      disableColumnActions = _useMaterialReactTabl.disableColumnActions,
-      disableFilters = _useMaterialReactTabl.disableFilters,
-      enableColumnResizing = _useMaterialReactTabl.enableColumnResizing,
-      localization = _useMaterialReactTabl.localization,
-      muiTableHeadCellProps = _useMaterialReactTabl.muiTableHeadCellProps,
-      showFilters = _useMaterialReactTabl.showFilters,
-      tableInstance = _useMaterialReactTabl.tableInstance;
+  var _useMRT = useMRT(),
+      densePadding = _useMRT.densePadding,
+      disableColumnActions = _useMRT.disableColumnActions,
+      disableFilters = _useMRT.disableFilters,
+      enableColumnResizing = _useMRT.enableColumnResizing,
+      localization = _useMRT.localization,
+      muiTableHeadCellProps = _useMRT.muiTableHeadCellProps,
+      showFilters = _useMRT.showFilters,
+      tableInstance = _useMRT.tableInstance;
 
   var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
   var mTableHeadCellProps = muiTableHeadCellProps instanceof Function ? muiTableHeadCellProps(column) : muiTableHeadCellProps;
@@ -386,21 +419,18 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
     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({
+  return React.createElement(MRT_StyledTableHeadCell, Object.assign({
     align: isParentHeader ? 'center' : 'left',
     densePadding: densePadding,
     enableColumnResizing: enableColumnResizing
-  }, tableCellProps), React.createElement(TableCellContents, null, React.createElement(TableCellText, {
+  }, 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
-    }
+    direction: column.isSortedDesc ? 'desc' : 'asc'
   })), React.createElement(CellFlexItem, null, !disableColumnActions && !isParentHeader && React.createElement(MRT_ToggleColumnActionMenuButton, {
     column: column
   }), enableColumnResizing && !isParentHeader && React.createElement(Divider, Object.assign({
@@ -411,34 +441,40 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
     }
   }, column.getResizerProps())))), !disableFilters && column.canFilter && React.createElement(Collapse, {
     "in": showFilters
-  }, React.createElement(MRT_FilterTextfield, {
+  }, React.createElement(MRT_FilterTextField, {
     column: column
   }))));
 };
 
-var TableCell = /*#__PURE__*/styled(TableCell$6, {
+var MRT_TableButtonCell = /*#__PURE__*/styled(TableCell$3, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding';
   }
 })(function (_ref) {
   var densePadding = _ref.densePadding;
   return {
-    padding: densePadding ? '0' : '0.6rem',
+    padding: densePadding ? '1px' : '0.6rem',
+    textAlign: 'center',
     transition: 'all 0.2s ease-in-out'
   };
 });
+
 var MRT_SelectAllCheckbox = function MRT_SelectAllCheckbox() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      disableSelectAll = _useMaterialReactTabl.disableSelectAll,
-      densePadding = _useMaterialReactTabl.densePadding,
-      localization = _useMaterialReactTabl.localization;
+  var _localization$selectA;
 
-  return React.createElement(TableCell, {
+  var _useMRT = useMRT(),
+      tableInstance = _useMRT.tableInstance,
+      disableSelectAll = _useMRT.disableSelectAll,
+      densePadding = _useMRT.densePadding,
+      localization = _useMRT.localization;
+
+  return React.createElement(MRT_TableButtonCell, {
     densePadding: densePadding,
     variant: "head"
   }, !disableSelectAll ? React.createElement(Checkbox, Object.assign({
-    "aria-label": localization == null ? void 0 : localization.selectAllCheckboxTitle
+    inputProps: {
+      'aria-label': (_localization$selectA = localization == null ? void 0 : localization.selectAllCheckboxTitle) != null ? _localization$selectA : ''
+    }
   }, tableInstance.getToggleAllPageRowsSelectedProps())) : null);
 };
 
@@ -454,22 +490,16 @@ var ArrowRightIcon = /*#__PURE__*/styled(MuiArrowRightIcon, {
   };
 });
 var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      localization = _useMaterialReactTabl.localization,
-      anyRowsExpanded = _useMaterialReactTabl.anyRowsExpanded,
-      densePadding = _useMaterialReactTabl.densePadding,
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
-
-  return React.createElement(TableCell$6, Object.assign({
-    size: "small"
-  }, tableInstance.getToggleAllRowsExpandedProps(), {
-    style: {
-      padding: densePadding ? '0' : '0.5rem 0.5rem',
-      transition: 'all 0.2s ease-in-out',
-      width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 2) + "rem"
-    }
-  }), React.createElement(IconButton$2, {
+  var _useMRT = useMRT(),
+      tableInstance = _useMRT.tableInstance,
+      localization = _useMRT.localization,
+      anyRowsExpanded = _useMRT.anyRowsExpanded,
+      densePadding = _useMRT.densePadding;
+
+  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, {
@@ -483,8 +513,8 @@ var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
 
   var width = _ref.width;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      muiTableBodyCellProps = _useMaterialReactTabl.muiTableBodyCellProps;
+  var _useMRT = useMRT(),
+      muiTableBodyCellProps = _useMRT.muiTableBodyCellProps;
 
   var mTableBodyCellrops = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
 
@@ -494,7 +524,20 @@ var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
     }, (_mTableBodyCellrops$s = mTableBodyCellrops == null ? void 0 : mTableBodyCellrops.style) != null ? _mTableBodyCellrops$s : {})
   });
 
-  return React.createElement(TableCell$6, Object.assign({}, tableCellProps));
+  return React.createElement(TableCell$3, Object.assign({}, tableCellProps));
+};
+
+var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
+  var _useMRT = useMRT(),
+      densePadding = _useMRT.densePadding,
+      localization = _useMRT.localization;
+
+  return React.createElement(MRT_StyledTableHeadCell, {
+    densePadding: densePadding,
+    style: {
+      textAlign: 'center'
+    }
+  }, localization == null ? void 0 : localization.actionsHeadColumnTitle);
 };
 
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
@@ -502,17 +545,16 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
 
   var headerGroup = _ref.headerGroup;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
-      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;
+  var _useMRT = useMRT(),
+      anyRowsCanExpand = _useMRT.anyRowsCanExpand,
+      disableExpandAll = _useMRT.disableExpandAll,
+      enableRowNumbers = _useMRT.enableRowNumbers,
+      enableRowActions = _useMRT.enableRowActions,
+      enableSelection = _useMRT.enableSelection,
+      muiTableHeadRowProps = _useMRT.muiTableHeadRowProps,
+      positionActionsColumn = _useMRT.positionActionsColumn,
+      renderDetailPanel = _useMRT.renderDetailPanel,
+      tableInstance = _useMRT.tableInstance;
 
   var isParentHeader = useMemo(function () {
     return headerGroup.headers.some(function (h) {
@@ -527,7 +569,7 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
     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, null, localization == null ? void 0 : localization.actionsHeadColumnTitle)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React.createElement(MRT_ExpandAllButton, null) : React.createElement(MRT_TableSpacerCell, {
+  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), enableRowNumbers && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(MRT_StyledTableHeadCell, null, "#")), enableRowActions && positionActionsColumn === 'first' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(MRT_TableHeadCellActions, null)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React.createElement(MRT_ExpandAllButton, null) : React.createElement(MRT_TableSpacerCell, {
     width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
   }) : null, enableSelection ? !isParentHeader ? React.createElement(MRT_SelectAllCheckbox, null) : React.createElement(MRT_TableSpacerCell, {
     width: "1rem"
@@ -536,15 +578,13 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
       key: column.getHeaderProps().key,
       column: column
     });
-  }), enableRowActions && positionActionsColumn === 'last' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(StyledTableHeadCell, {
-    densePadding: densePadding
-  }, localization == null ? void 0 : localization.actionsHeadColumnTitle)));
+  }), enableRowActions && positionActionsColumn === 'last' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(MRT_TableHeadCellActions, null)));
 };
 
 var MRT_TableHead = function MRT_TableHead() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      muiTableHeadProps = _useMaterialReactTabl.muiTableHeadProps;
+  var _useMRT = useMRT(),
+      tableInstance = _useMRT.tableInstance,
+      muiTableHeadProps = _useMRT.muiTableHeadProps;
 
   var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps(tableInstance) : muiTableHeadProps;
   return React.createElement(TableHead, Object.assign({}, tableHeadProps), tableInstance.headerGroups.map(function (headerGroup) {
@@ -555,51 +595,52 @@ var MRT_TableHead = function MRT_TableHead() {
   }));
 };
 
-var MRT_EditCellTextfield = function MRT_EditCellTextfield(_ref) {
-  var _cell$column$muiTable, _currentEditingRow$va;
+var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
+  var _cell$column$muiTable;
 
   var cell = _ref.cell;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      localization = _useMaterialReactTabl.localization,
-      currentEditingRow = _useMaterialReactTabl.currentEditingRow,
-      setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
-      muiTableBodyCellEditTextFieldProps = _useMaterialReactTabl.muiTableBodyCellEditTextFieldProps;
+  var _useMRT = useMRT(),
+      currentEditingRow = _useMRT.currentEditingRow,
+      localization = _useMRT.localization,
+      muiTableBodyCellEditTextFieldProps = _useMRT.muiTableBodyCellEditTextFieldProps,
+      setCurrentEditingRow = _useMRT.setCurrentEditingRow;
 
   var handleChange = function handleChange(event) {
     if (currentEditingRow) {
-      var _extends2;
-
-      setCurrentEditingRow(_extends({}, currentEditingRow, {
-        values: _extends({}, cell.row.values, (_extends2 = {}, _extends2[cell.column.id] = event.target.value, _extends2))
-      }));
+      cell.row.values[cell.column.id] = event.target.value;
+      setCurrentEditingRow(_extends({}, currentEditingRow));
     }
+
+    cell.column.onCellEditChange == null ? void 0 : cell.column.onCellEditChange(event, cell);
   };
 
-  var textFieldProps = _extends({}, muiTableBodyCellEditTextFieldProps, cell.column.muiTableBodyCellEditTextFieldProps, {
+  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,
-      onChange: handleChange
+      cell: cell
     })));
   }
 
   return React.createElement(TextField$1, Object.assign({
     margin: "dense",
-    placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
     onChange: handleChange,
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
-    value: currentEditingRow == null ? void 0 : (_currentEditingRow$va = currentEditingRow.values) == null ? void 0 : _currentEditingRow$va[cell.column.id],
+    placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
+    value: cell.value,
     variant: "standard"
   }, textFieldProps));
 };
 
-var TableCell$1 = /*#__PURE__*/styled(TableCell$6, {
+var MRT_StyledTableBodyCell = /*#__PURE__*/styled(TableCell$3, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding';
   }
@@ -607,7 +648,8 @@ var TableCell$1 = /*#__PURE__*/styled(TableCell$6, {
   var densePadding = _ref.densePadding;
   return {
     padding: densePadding ? '0.5rem' : '1rem',
-    transition: 'all 0.2s ease-in-out'
+    transition: 'all 0.2s ease-in-out',
+    whiteSpace: densePadding ? 'nowrap' : 'normal'
   };
 });
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref2) {
@@ -615,11 +657,11 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref2) {
 
   var cell = _ref2.cell;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      onCellClick = _useMaterialReactTabl.onCellClick,
-      muiTableBodyCellProps = _useMaterialReactTabl.muiTableBodyCellProps,
-      densePadding = _useMaterialReactTabl.densePadding,
-      currentEditingRow = _useMaterialReactTabl.currentEditingRow;
+  var _useMRT = useMRT(),
+      onCellClick = _useMRT.onCellClick,
+      muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
+      densePadding = _useMRT.densePadding,
+      currentEditingRow = _useMRT.currentEditingRow;
 
   var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
   var mcTableCellBodyProps = cell.column.muiTableBodyCellProps instanceof Function ? cell.column.muiTableBodyCellProps(cell) : cell.column.muiTableBodyCellProps;
@@ -628,17 +670,17 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref2) {
     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$1, Object.assign({
+  return React.createElement(MRT_StyledTableBodyCell, Object.assign({
     densePadding: densePadding,
     onClick: function onClick(event) {
       return onCellClick == null ? void 0 : onCellClick(event, cell);
     }
-  }, tableCellProps), (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React.createElement(MRT_EditCellTextfield, {
+  }, tableCellProps), (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React.createElement(MRT_EditCellTextField, {
     cell: cell
   }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
 };
 
-var TableCell$2 = /*#__PURE__*/styled(TableCell$6, {
+var TableCell = /*#__PURE__*/styled(TableCell$3, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'isExpanded';
   }
@@ -656,12 +698,12 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
 
   var row = _ref2.row;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
-      muiTableDetailPanelProps = _useMaterialReactTabl.muiTableDetailPanelProps,
-      muiTableBodyRowProps = _useMaterialReactTabl.muiTableBodyRowProps,
-      onDetailPanelClick = _useMaterialReactTabl.onDetailPanelClick;
+  var _useMRT = useMRT(),
+      tableInstance = _useMRT.tableInstance,
+      renderDetailPanel = _useMRT.renderDetailPanel,
+      muiTableDetailPanelProps = _useMRT.muiTableDetailPanelProps,
+      muiTableBodyRowProps = _useMRT.muiTableBodyRowProps,
+      onDetailPanelClick = _useMRT.onDetailPanelClick;
 
   var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
 
@@ -677,7 +719,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
 
   return React.createElement(TableRow$1, Object.assign({
     hover: true
-  }, tableRowProps), React.createElement(TableCell$2, Object.assign({
+  }, tableRowProps), React.createElement(TableCell, Object.assign({
     colSpan: tableInstance.visibleColumns.length + 10,
     isExpanded: row.isExpanded,
     onClick: function onClick(event) {
@@ -688,17 +730,15 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
   }, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
 };
 
-var TableCell$3 = /*#__PURE__*/styled(TableCell$6, {
+var TableCell$1 = /*#__PURE__*/styled(MRT_TableButtonCell, {
   shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'densePadding' && prop !== 'depth';
+    return prop !== 'depth';
   }
 })(function (_ref) {
-  var densePadding = _ref.densePadding,
-      depth = _ref.depth;
+  var depth = _ref.depth;
   return {
-    padding: densePadding ? '0' : '0.6rem',
     paddingLeft: depth + 0.5 + "rem",
-    transition: 'all 0.2s ease-in-out'
+    textAlign: 'left'
   };
 });
 var ExpandMoreIcon = /*#__PURE__*/styled(MuiExpandMoreIcon, {
@@ -715,12 +755,12 @@ var ExpandMoreIcon = /*#__PURE__*/styled(MuiExpandMoreIcon, {
 var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
   var row = _ref3.row;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      localization = _useMaterialReactTabl.localization,
-      densePadding = _useMaterialReactTabl.densePadding,
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+  var _useMRT = useMRT(),
+      localization = _useMRT.localization,
+      densePadding = _useMRT.densePadding,
+      renderDetailPanel = _useMRT.renderDetailPanel;
 
-  return React.createElement(TableCell$3, {
+  return React.createElement(TableCell$1, {
     size: "small",
     densePadding: densePadding,
     depth: row.depth
@@ -734,24 +774,14 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
   })));
 };
 
-var TableCell$4 = /*#__PURE__*/styled(TableCell$6, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'densePadding';
-  }
-})(function (_ref) {
-  var densePadding = _ref.densePadding;
-  return {
-    padding: densePadding ? '0' : '0.6rem',
-    transition: 'all 0.2s ease-in-out'
-  };
-});
-var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref2) {
-  var row = _ref2.row;
+var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
+  var row = _ref.row;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      onRowSelectChange = _useMaterialReactTabl.onRowSelectChange,
-      densePadding = _useMaterialReactTabl.densePadding;
+  var _useMRT = useMRT(),
+      tableInstance = _useMRT.tableInstance,
+      onRowSelectChange = _useMRT.onRowSelectChange,
+      densePadding = _useMRT.densePadding,
+      localization = _useMRT.localization;
 
   var onSelectChange = function onSelectChange(event) {
     var _row$getToggleRowSele;
@@ -760,11 +790,14 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref2) {
     onRowSelectChange == null ? void 0 : onRowSelectChange(event, row, tableInstance.selectedFlatRows);
   };
 
-  return React.createElement(TableCell$4, {
+  return React.createElement(MRT_TableButtonCell, {
     densePadding: densePadding
-  }, React.createElement(Checkbox, Object.assign({}, row.getToggleRowSelectedProps(), {
+  }, React.createElement(Checkbox, Object.assign({
+    inputProps: {
+      'aria-label': localization == null ? void 0 : localization.selectCheckboxTitle
+    },
     onChange: onSelectChange
-  })));
+  }, row.getToggleRowSelectedProps())));
 };
 
 var MenuItem$1 = /*#__PURE__*/styled(MenuItem$2)({
@@ -776,19 +809,14 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
 
   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,
-      setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
-      tableInstance = _useMaterialReactTabl.tableInstance;
-
-  var handleEdit = function handleEdit() {
-    setCurrentEditingRow(_extends({}, row));
-    setAnchorEl(null);
-  };
+  var _useMRT = useMRT(),
+      enableRowEditing = _useMRT.enableRowEditing,
+      localization = _useMRT.localization,
+      renderRowActionMenuItems = _useMRT.renderRowActionMenuItems,
+      tableInstance = _useMRT.tableInstance;
 
   return React.createElement(Menu, {
     anchorEl: anchorEl,
@@ -1572,13 +1600,14 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
 
   var row = _ref.row;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      localization = _useMaterialReactTabl.localization,
-      setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
-      onRowEditSubmit = _useMaterialReactTabl.onRowEditSubmit,
-      currentEditingRow = _useMaterialReactTabl.currentEditingRow;
+  var _useMRT = useMRT(),
+      localization = _useMRT.localization,
+      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
+      onRowEditSubmit = _useMRT.onRowEditSubmit,
+      currentEditingRow = _useMRT.currentEditingRow;
 
   var handleCancel = function handleCancel() {
+    row.values = row.original;
     setCurrentEditingRow(null);
   };
 
@@ -1634,13 +1663,19 @@ var IconButton$1 = /*#__PURE__*/styled(IconButton$2)({
   }
 });
 var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
+  var _localization$rowActi;
+
   var row = _ref.row;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      localization = _useMaterialReactTabl.localization,
-      currentEditingRow = _useMaterialReactTabl.currentEditingRow,
-      renderRowActions = _useMaterialReactTabl.renderRowActions,
-      tableInstance = _useMaterialReactTabl.tableInstance;
+  var _useMRT = useMRT(),
+      currentEditingRow = _useMRT.currentEditingRow,
+      densePadding = _useMRT.densePadding,
+      localization = _useMRT.localization,
+      renderRowActionMenuItems = _useMRT.renderRowActionMenuItems,
+      enableRowEditing = _useMRT.enableRowEditing,
+      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
+      renderRowActions = _useMRT.renderRowActions,
+      tableInstance = _useMRT.tableInstance;
 
   var _useState = useState(null),
       anchorEl = _useState[0],
@@ -1652,26 +1687,32 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
     setAnchorEl(event.currentTarget);
   };
 
-  if (renderRowActions) {
-    return React.createElement(React.Fragment, null, renderRowActions(row, tableInstance));
-  }
-
-  if (row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id)) {
-    return React.createElement(MRT_EditActionButtons, {
-      row: row
-    });
-  }
+  var handleEdit = function handleEdit() {
+    setCurrentEditingRow(_extends({}, row));
+    setAnchorEl(null);
+  };
 
-  return React.createElement(React.Fragment, null, React.createElement(IconButton$1, {
+  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, {
@@ -1690,14 +1731,15 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
 
   var row = _ref2.row;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
-      enableRowActions = _useMaterialReactTabl.enableRowActions,
-      enableSelection = _useMaterialReactTabl.enableSelection,
-      muiTableBodyRowProps = _useMaterialReactTabl.muiTableBodyRowProps,
-      onRowClick = _useMaterialReactTabl.onRowClick,
-      positionActionsColumn = _useMaterialReactTabl.positionActionsColumn,
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+  var _useMRT = useMRT(),
+      anyRowsCanExpand = _useMRT.anyRowsCanExpand,
+      enableRowActions = _useMRT.enableRowActions,
+      enableRowNumbers = _useMRT.enableRowNumbers,
+      enableSelection = _useMRT.enableSelection,
+      muiTableBodyRowProps = _useMRT.muiTableBodyRowProps,
+      onRowClick = _useMRT.onRowClick,
+      positionActionsColumn = _useMRT.positionActionsColumn,
+      renderDetailPanel = _useMRT.renderDetailPanel;
 
   var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
 
@@ -1711,9 +1753,9 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
     onClick: function onClick(event) {
       return onRowClick == null ? void 0 : onRowClick(event, row);
     }
-  }, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React.createElement(TableCell$6, null, React.createElement(MRT_ToggleRowActionMenuButton, {
+  }, tableRowProps), enableRowNumbers && React.createElement(MRT_StyledTableBodyCell, null, row.index + 1), enableRowActions && positionActionsColumn === 'first' && React.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
-  })), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_ExpandButton, {
+  }), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_ExpandButton, {
     row: row
   }), enableSelection && React.createElement(MRT_SelectCheckbox, {
     row: row
@@ -1722,9 +1764,9 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
       key: cell.getCellProps().key,
       cell: cell
     });
-  }), enableRowActions && positionActionsColumn === 'last' && React.createElement(TableCell$6, null, React.createElement(MRT_ToggleRowActionMenuButton, {
+  }), enableRowActions && positionActionsColumn === 'last' && React.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
-  }))), renderDetailPanel && React.createElement(MRT_TableDetailPanel, {
+  })), renderDetailPanel && React.createElement(MRT_TableDetailPanel, {
     row: row
   }));
 };
@@ -1735,10 +1777,10 @@ var TableBody = /*#__PURE__*/styled(TableBody$1)({
 var MRT_TableBody = function MRT_TableBody() {
   var _muiTableBodyProps$st;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      muiTableBodyProps = _useMaterialReactTabl.muiTableBodyProps,
-      manualPagination = _useMaterialReactTabl.manualPagination;
+  var _useMRT = useMRT(),
+      tableInstance = _useMRT.tableInstance,
+      muiTableBodyProps = _useMRT.muiTableBodyProps,
+      manualPagination = _useMRT.manualPagination;
 
   var rows = manualPagination ? tableInstance.rows : tableInstance.page;
 
@@ -1755,7 +1797,7 @@ var MRT_TableBody = function MRT_TableBody() {
   }));
 };
 
-var TableCell$5 = /*#__PURE__*/styled(TableCell$6, {
+var TableCell$2 = /*#__PURE__*/styled(TableCell$3, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding' && prop !== 'enableColumnResizing';
   }
@@ -1774,10 +1816,10 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref2) {
 
   var column = _ref2.column;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      muiTableFooterCellProps = _useMaterialReactTabl.muiTableFooterCellProps,
-      densePadding = _useMaterialReactTabl.densePadding,
-      enableColumnResizing = _useMaterialReactTabl.enableColumnResizing;
+  var _useMRT = useMRT(),
+      muiTableFooterCellProps = _useMRT.muiTableFooterCellProps,
+      densePadding = _useMRT.densePadding,
+      enableColumnResizing = _useMRT.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;
   var mTableFooterCellProps = muiTableFooterCellProps instanceof Function ? muiTableFooterCellProps(column) : muiTableFooterCellProps;
@@ -1787,7 +1829,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref2) {
     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$5, Object.assign({
+  return React.createElement(TableCell$2, Object.assign({
     align: isParentHeader ? 'center' : 'left',
     densePadding: densePadding,
     enableColumnResizing: enableColumnResizing,
@@ -1800,15 +1842,16 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
 
   var footerGroup = _ref.footerGroup;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
-      columns = _useMaterialReactTabl.columns,
-      anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
-      enableSelection = _useMaterialReactTabl.enableSelection,
-      enableRowActions = _useMaterialReactTabl.enableRowActions,
-      positionActionsColumn = _useMaterialReactTabl.positionActionsColumn,
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      muiTableFooterRowProps = _useMaterialReactTabl.muiTableFooterRowProps; //if no content in row, skip row
+  var _useMRT = useMRT(),
+      renderDetailPanel = _useMRT.renderDetailPanel,
+      columns = _useMRT.columns,
+      anyRowsCanExpand = _useMRT.anyRowsCanExpand,
+      enableSelection = _useMRT.enableSelection,
+      enableRowActions = _useMRT.enableRowActions,
+      enableRowNumbers = _useMRT.enableRowNumbers,
+      positionActionsColumn = _useMRT.positionActionsColumn,
+      tableInstance = _useMRT.tableInstance,
+      muiTableFooterRowProps = _useMRT.muiTableFooterRowProps; //if no content in row, skip row
 
 
   if (!(columns != null && columns.some(function (c) {
@@ -1820,7 +1863,7 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
     style: _extends({}, footerGroup.getFooterGroupProps().style, (_mTableFooterRowProps = mTableFooterRowProps == null ? void 0 : mTableFooterRowProps.style) != null ? _mTableFooterRowProps : {})
   });
 
-  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React.createElement(MRT_TableSpacerCell, null), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_TableSpacerCell, {
+  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), enableRowNumbers && React.createElement(MRT_TableSpacerCell, null), 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"
@@ -1833,9 +1876,9 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
 };
 
 var MRT_TableFooter = function MRT_TableFooter() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      muiTableFooterProps = _useMaterialReactTabl.muiTableFooterProps,
-      tableInstance = _useMaterialReactTabl.tableInstance;
+  var _useMRT = useMRT(),
+      muiTableFooterProps = _useMRT.muiTableFooterProps,
+      tableInstance = _useMRT.tableInstance;
 
   return React.createElement(TableFooter, Object.assign({}, muiTableFooterProps), tableInstance.footerGroups.map(function (footerGroup) {
     return React.createElement(MRT_TableFooterRow, {
@@ -1848,11 +1891,11 @@ var MRT_TableFooter = function MRT_TableFooter() {
 var MRT_Table = function MRT_Table() {
   var _muiTableProps$style;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      muiTableProps = _useMaterialReactTabl.muiTableProps,
-      hideTableHead = _useMaterialReactTabl.hideTableHead,
-      hideTableFooter = _useMaterialReactTabl.hideTableFooter;
+  var _useMRT = useMRT(),
+      tableInstance = _useMRT.tableInstance,
+      muiTableProps = _useMRT.muiTableProps,
+      hideTableHead = _useMRT.hideTableHead,
+      hideTableFooter = _useMRT.hideTableFooter;
 
   var tableProps = _extends({}, muiTableProps, tableInstance.getTableProps(), {
     style: _extends({}, tableInstance.getTableProps().style, (_muiTableProps$style = muiTableProps == null ? void 0 : muiTableProps.style) != null ? _muiTableProps$style : {})
@@ -1865,11 +1908,12 @@ var TextField = /*#__PURE__*/styled(TextField$1)({
   justifySelf: 'end'
 });
 var MRT_SearchTextField = function MRT_SearchTextField() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps,
-      localization = _useMaterialReactTabl.localization,
-      onGlobalFilterChange = _useMaterialReactTabl.onGlobalFilterChange;
+  var _useMRT = useMRT(),
+      showSearch = _useMRT.showSearch,
+      localization = _useMRT.localization,
+      muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
+      onGlobalFilterChange = _useMRT.onGlobalFilterChange,
+      tableInstance = _useMRT.tableInstance;
 
   var _useState = useState(''),
       searchValue = _useState[0],
@@ -1887,7 +1931,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);
@@ -1913,16 +1961,16 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
         fontSize: "small"
       })))
     }
-  }, muiSearchTextFieldProps));
+  }, muiSearchTextFieldProps)));
 };
 
 var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton() {
   var _localization$toggleF;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      localization = _useMaterialReactTabl.localization,
-      setShowFilters = _useMaterialReactTabl.setShowFilters,
-      showFilters = _useMaterialReactTabl.showFilters;
+  var _useMRT = useMRT(),
+      localization = _useMRT.localization,
+      setShowFilters = _useMRT.setShowFilters,
+      showFilters = _useMRT.showFilters;
 
   return React.createElement(Tooltip, {
     arrow: true,
@@ -1937,26 +1985,39 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton() {
 };
 
 var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
-  var _column$columns;
+  var _column$columns$lengt, _column$columns, _column$columns2, _column$isVisible, _column$columns4;
 
   var column = _ref.column;
+  var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
+  var allChildColumnsVisible = isParentHeader && !!((_column$columns2 = column.columns) != null && _column$columns2.every(function (childColumn) {
+    return childColumn.isVisible;
+  }));
+  var switchChecked = (_column$isVisible = column.isVisible) != null ? _column$isVisible : allChildColumnsVisible;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      maxColumnDepth = _useMaterialReactTabl.maxColumnDepth;
+  var handleToggleColumnHidden = function handleToggleColumnHidden(column) {
+    if (isParentHeader) {
+      var _column$columns3;
+
+      column == null ? void 0 : (_column$columns3 = column.columns) == null ? void 0 : _column$columns3.forEach == null ? void 0 : _column$columns3.forEach(function (childColumn) {
+        childColumn.toggleHidden(switchChecked);
+      });
+    } else {
+      column.toggleHidden();
+    }
+  };
 
-  var isMaxDepth = column.depth === maxColumnDepth;
   return React.createElement(React.Fragment, null, React.createElement(MenuItem$2, {
     style: {
-      paddingLeft: column.depth + 1 + "rem"
+      paddingLeft: (column.depth + 0.5) * 2 + "rem"
     }
-  }, isMaxDepth ? React.createElement(FormControlLabel, {
-    checked: column.isVisible,
+  }, React.createElement(FormControlLabel, {
+    checked: switchChecked,
     control: React.createElement(Switch, null),
     label: column.Header,
     onChange: function onChange() {
-      return isMaxDepth && column.toggleHidden();
+      return handleToggleColumnHidden(column);
     }
-  }) : React.createElement(Typography, null, column.Header)), (_column$columns = column.columns) == null ? void 0 : _column$columns.map(function (c, i) {
+  })), (_column$columns4 = column.columns) == null ? void 0 : _column$columns4.map(function (c, i) {
     return React.createElement(MRT_ShowHideColumnsMenu, {
       key: i + "-" + c.id,
       column: c
@@ -1964,12 +2025,17 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   }));
 };
 
+var MenuButtons = /*#__PURE__*/styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 0.5rem 0.5rem 0.5rem'
+});
 var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
   var _localization$showHid;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      localization = _useMaterialReactTabl.localization;
+  var _useMRT = useMRT(),
+      tableInstance = _useMRT.tableInstance,
+      localization = _useMRT.localization;
 
   var _useState = useState(null),
       anchorEl = _useState[0],
@@ -1992,7 +2058,17 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
     onClose: function onClose() {
       return setAnchorEl(null);
     }
-  }, tableInstance.columns.map(function (column, index) {
+  }, React.createElement(MenuButtons, null, React.createElement(Button, {
+    disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
+    onClick: function onClick() {
+      return tableInstance.toggleHideAllColumns(true);
+    }
+  }, localization == null ? void 0 : localization.columnShowHideMenuHideAll), React.createElement(Button, {
+    disabled: tableInstance.getToggleHideAllColumnsProps().checked,
+    onClick: function onClick() {
+      return tableInstance.toggleHideAllColumns(false);
+    }
+  }, localization == null ? void 0 : localization.columnShowHideMenuShowAll)), React.createElement(Divider$1, null), tableInstance.columns.map(function (column, index) {
     return React.createElement(MRT_ShowHideColumnsMenu, {
       key: index + "-" + column.id,
       column: column
@@ -2001,17 +2077,20 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
 };
 
 var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
-  var _localization$toggleD;
+  var _localization$toggleD, _localization$toggleD2;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      densePadding = _useMaterialReactTabl.densePadding,
-      setDensePadding = _useMaterialReactTabl.setDensePadding,
-      localization = _useMaterialReactTabl.localization;
+  var _useMRT = useMRT(),
+      densePadding = _useMRT.densePadding,
+      setDensePadding = _useMRT.setDensePadding,
+      localization = _useMRT.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",
@@ -2021,24 +2100,73 @@ var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
   }));
 };
 
+var MRT_ToggleSearchButton = function MRT_ToggleSearchButton() {
+  var _localization$toggleS;
+
+  var _useMRT = useMRT(),
+      localization = _useMRT.localization,
+      setShowSearch = _useMRT.setShowSearch,
+      showSearch = _useMRT.showSearch,
+      muiSearchTextFieldProps = _useMRT.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 MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton() {
+  var _localization$toggleF;
+
+  var _useMRT = useMRT(),
+      localization = _useMRT.localization,
+      setFullScreen = _useMRT.setFullScreen,
+      fullScreen = _useMRT.fullScreen;
+
+  return React.createElement(Tooltip, {
+    arrow: true,
+    title: (_localization$toggleF = localization == null ? void 0 : localization.toggleFullScreenButtonTitle) != null ? _localization$toggleF : ''
+  }, React.createElement(IconButton$2, {
+    "aria-label": localization == null ? void 0 : localization.toggleFilterButtonTitle,
+    onClick: function onClick() {
+      return setFullScreen(!fullScreen);
+    },
+    size: "small"
+  }, fullScreen ? React.createElement(FilterListOffIcon$1, null) : React.createElement(FilterListIcon, null)));
+};
+
 var ToolbarButtonsContainer = /*#__PURE__*/styled('div')({
   display: 'flex',
   gap: '0.5rem',
   alignItems: 'center'
 });
-var MRT_ToolbarButtons = function MRT_ToolbarButtons() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      disableFilters = _useMaterialReactTabl.disableFilters,
-      disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
-      disableDensePaddingToggle = _useMaterialReactTabl.disableDensePaddingToggle;
-
-  return React.createElement(ToolbarButtonsContainer, null, !disableFilters && React.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React.createElement(MRT_DensePaddingSwitch, null));
+var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons() {
+  var _useMRT = useMRT(),
+      disableFilters = _useMRT.disableFilters,
+      disableColumnHiding = _useMRT.disableColumnHiding,
+      disableDensePaddingToggle = _useMRT.disableDensePaddingToggle,
+      disableGlobalFilter = _useMRT.disableGlobalFilter,
+      disableFullScreenToggle = _useMRT.disableFullScreenToggle;
+
+  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), !disableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, null));
 };
 
 var MRT_TablePagination = function MRT_TablePagination() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      muiTablePaginationProps = _useMaterialReactTabl.muiTablePaginationProps;
+  var _useMRT = useMRT(),
+      tableInstance = _useMRT.tableInstance,
+      muiTablePaginationProps = _useMRT.muiTablePaginationProps;
 
   var tablePaginationProps = muiTablePaginationProps instanceof Function ? muiTablePaginationProps(tableInstance) : muiTablePaginationProps;
 
@@ -2057,64 +2185,153 @@ var MRT_TablePagination = function MRT_TablePagination() {
     page: tableInstance.state.pageIndex,
     rowsPerPage: tableInstance.state.pageSize,
     showFirstButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
-    showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2
+    showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
+    style: {
+      padding: 0,
+      position: 'relative',
+      zIndex: 2
+    }
   }, tablePaginationProps));
 };
 
+var Alert = /*#__PURE__*/styled(Alert$1, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'displayAbsolute' && prop !== 'toolbarPosition';
+  }
+})(function (_ref) {
+  var displayAbsolute = _ref.displayAbsolute,
+      toolbarPosition = _ref.toolbarPosition;
+  return {
+    borderRadius: 0,
+    fontSize: '1rem',
+    left: 0,
+    marginLeft: !displayAbsolute ? '-0.5rem' : undefined,
+    padding: toolbarPosition === 'bottom' ? '0 1rem' : '0.5rem 1.25rem',
+    position: displayAbsolute ? 'absolute' : 'relative',
+    right: 0,
+    top: 0,
+    width: "calc(100% - " + (displayAbsolute ? '2.5rem' : '1.5rem') + ")",
+    zIndex: 2
+  };
+});
+var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
+  var _localization$toolbar, _localization$toolbar2;
+
+  var _useMRT = useMRT(),
+      muiTableToolbarAlertBannerProps = _useMRT.muiTableToolbarAlertBannerProps,
+      tableInstance = _useMRT.tableInstance,
+      positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
+      positionToolbarActions = _useMRT.positionToolbarActions,
+      localization = _useMRT.localization,
+      renderToolbarCustomActions = _useMRT.renderToolbarCustomActions;
+
+  var isMobile = useMediaQuery('(max-width:720px)');
+  var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps(tableInstance) : muiTableToolbarAlertBannerProps;
+  var selectMessage = tableInstance.selectedFlatRows.length > 0 ? localization == null ? void 0 : (_localization$toolbar = localization.toolbarAlertSelectionMessage) == null ? void 0 : (_localization$toolbar2 = _localization$toolbar.replace('{selectedCount}', tableInstance.selectedFlatRows.length.toString())) == null ? void 0 : _localization$toolbar2.replace('{rowCount}', tableInstance.flatRows.length.toString()) : null;
+  var groupedByMessage = tableInstance.state.groupBy.length > 0 ? React.createElement("span", null, localization == null ? void 0 : localization.toolbarAlertGroupedByMessage, ' ', tableInstance.state.groupBy.map(function (columnId, index) {
+    var _tableInstance$allCol;
+
+    return React.createElement(Fragment, {
+      key: index + "-" + columnId
+    }, index > 0 ? localization == null ? void 0 : localization.toolbarAlertGroupedThenByMessage : '', React.createElement(Chip, {
+      color: "secondary",
+      label: (_tableInstance$allCol = tableInstance.allColumns.find(function (column) {
+        return column.id === columnId;
+      })) == null ? void 0 : _tableInstance$allCol.Header,
+      onDelete: function onDelete() {
+        return tableInstance.toggleGroupBy(columnId, false);
+      }
+    }));
+  })) : null;
+  var displayAbsolute = !(isMobile || positionToolbarAlertBanner === 'bottom' && positionToolbarActions === 'bottom' || positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions);
+  return React.createElement(Collapse, {
+    "in": !!selectMessage || !!groupedByMessage,
+    timeout: displayAbsolute ? 0 : 200
+  }, React.createElement(Alert, Object.assign({
+    displayAbsolute: displayAbsolute,
+    icon: false,
+    color: "info"
+  }, alertProps), selectMessage, groupedByMessage));
+};
+
 var Toolbar = /*#__PURE__*/styled(Toolbar$2)({
-  display: 'grid'
+  display: 'grid',
+  padding: '0 0.5rem !important'
 });
 var ToolbarTopRow = /*#__PURE__*/styled('div')({
-  padding: '0.5rem',
+  padding: '1rem 0.5rem',
   display: 'flex',
   justifyContent: 'space-between'
 });
 var ToolbarActionsContainer = /*#__PURE__*/styled('div')({
   display: 'flex',
-  gap: '0.5rem'
+  gap: '0.5rem',
+  position: 'relative',
+  zIndex: 3
 });
 var MRT_ToolbarTop = function MRT_ToolbarTop() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter,
-      hideToolbarActions = _useMaterialReactTabl.hideToolbarActions,
-      manualPagination = _useMaterialReactTabl.manualPagination,
-      muiTableTitleProps = _useMaterialReactTabl.muiTableTitleProps,
-      muiTableToolbarTopProps = _useMaterialReactTabl.muiTableToolbarTopProps,
-      positionPagination = _useMaterialReactTabl.positionPagination,
-      positionToolbarActions = _useMaterialReactTabl.positionToolbarActions,
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      title = _useMaterialReactTabl.title;
+  var _renderToolbarCustomA;
+
+  var _useMRT = useMRT(),
+      disableGlobalFilter = _useMRT.disableGlobalFilter,
+      hideToolbarActions = _useMRT.hideToolbarActions,
+      manualPagination = _useMRT.manualPagination,
+      muiTableToolbarTopProps = _useMRT.muiTableToolbarTopProps,
+      positionPagination = _useMRT.positionPagination,
+      positionToolbarActions = _useMRT.positionToolbarActions,
+      positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
+      renderToolbarCustomActions = _useMRT.renderToolbarCustomActions,
+      tableInstance = _useMRT.tableInstance;
 
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
   return React.createElement(Toolbar, Object.assign({
     variant: "dense"
-  }, toolbarProps), React.createElement(ToolbarTopRow, null, title ? React.createElement(Typography, Object.assign({
-    variant: "h5"
-  }, muiTableTitleProps), title) : 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)));
+  }, toolbarProps), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, null), React.createElement(ToolbarTopRow, null, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React.createElement("span", null), React.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, null))), React.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)));
 };
 
 var Toolbar$1 = /*#__PURE__*/styled(Toolbar$2)({
-  padding: 0,
   display: 'flex',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  padding: '0 0.5rem !important',
+  overflowY: 'hidden'
 });
 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 _useMRT = useMRT(),
+      hideToolbarActions = _useMRT.hideToolbarActions,
+      manualPagination = _useMRT.manualPagination,
+      muiTableToolbarBottomProps = _useMRT.muiTableToolbarBottomProps,
+      positionPagination = _useMRT.positionPagination,
+      positionToolbarActions = _useMRT.positionToolbarActions,
+      positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
+      tableInstance = _useMRT.tableInstance;
 
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
   return React.createElement(Toolbar$1, Object.assign({
     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));
+  }, toolbarProps), !hideToolbarActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarInternalButtons, null) : React.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null));
 };
 
-var CircularProgressWrapper = /*#__PURE__*/styled('div')(function (_ref) {
-  var theme = _ref.theme;
+var TableContainer = /*#__PURE__*/styled(TableContainer$1, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'fullScreen';
+  }
+})(function (_ref) {
+  var fullScreen = _ref.fullScreen;
+  return {
+    bottom: fullScreen ? '0' : undefined,
+    height: fullScreen ? '100%' : undefined,
+    left: fullScreen ? '0' : undefined,
+    margin: fullScreen ? '0' : undefined,
+    position: fullScreen ? 'absolute' : undefined,
+    right: fullScreen ? '0' : undefined,
+    top: fullScreen ? '0' : undefined,
+    transition: 'all 0.2s ease-in-out',
+    width: fullScreen ? '100vw' : undefined,
+    zIndex: fullScreen ? 1200 : undefined
+  };
+});
+var CircularProgressWrapper = /*#__PURE__*/styled('div')(function (_ref2) {
+  var theme = _ref2.theme;
   return {
     alignItems: 'center',
     backgroundColor: alpha(theme.palette.background.paper, 0.5),
@@ -2127,16 +2344,20 @@ var CircularProgressWrapper = /*#__PURE__*/styled('div')(function (_ref) {
   };
 });
 var MRT_TableContainer = function MRT_TableContainer() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      muiTableContainerProps = _useMaterialReactTabl.muiTableContainerProps,
-      hideToolbarTop = _useMaterialReactTabl.hideToolbarTop,
-      hideToolbarBottom = _useMaterialReactTabl.hideToolbarBottom,
-      isLoading = _useMaterialReactTabl.isLoading,
-      isFetching = _useMaterialReactTabl.isFetching;
-
+  var _useMRT = useMRT(),
+      fullScreen = _useMRT.fullScreen,
+      hideToolbarBottom = _useMRT.hideToolbarBottom,
+      hideToolbarTop = _useMRT.hideToolbarTop,
+      isFetching = _useMRT.isFetching,
+      isLoading = _useMRT.isLoading,
+      muiTableContainerProps = _useMRT.muiTableContainerProps,
+      tableInstance = _useMRT.tableInstance;
+
+  var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
   return React.createElement(TableContainer, Object.assign({
-    component: Paper
-  }, muiTableContainerProps), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), isFetching && React.createElement(LinearProgress, null), isLoading && React.createElement(CircularProgressWrapper, null, React.createElement(CircularProgress, {
+    component: Paper,
+    fullScreen: fullScreen
+  }, tableContainerProps), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), isFetching && React.createElement(LinearProgress, null), isLoading && React.createElement(CircularProgressWrapper, null, React.createElement(CircularProgress, {
     "aria-busy": "true",
     "aria-label": "Loading data"
   })), React.createElement(MRT_Table, null), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, null));
@@ -2146,15 +2367,17 @@ var defaultLocalization = {
   actionsHeadColumnTitle: 'Actions',
   columnActionMenuButtonTitle: 'Column Actions',
   columnActionMenuItemClearSort: 'Clear sorting',
-  columnActionMenuItemGroupBy: 'Group by column',
-  columnActionMenuItemHideColumn: 'Hide column',
-  columnActionMenuItemSortAsc: 'Sort ascending',
-  columnActionMenuItemSortDesc: 'Sort descending',
-  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}',
+  columnShowHideMenuHideAll: 'Hide all',
+  columnShowHideMenuShowAll: 'Show all',
   expandAllButtonTitle: 'Expand all',
   expandButtonTitle: 'Expand',
   filterTextFieldClearButtonTitle: 'Clear filter',
-  filterTextFieldPlaceholder: 'Filter',
+  filterTextFieldPlaceholder: 'Filter by {column}',
   rowActionButtonCancel: 'Cancel',
   rowActionButtonSave: 'Save',
   rowActionMenuButtonTitle: 'Row Actions',
@@ -2163,12 +2386,18 @@ var defaultLocalization = {
   searchTextFieldClearButtonTitle: 'Clear search',
   searchTextFieldPlaceholder: 'Search',
   selectAllCheckboxTitle: 'Select all',
+  selectCheckboxTitle: 'Select row',
   showHideColumnsButtonTitle: 'Show/Hide columns',
   toggleDensePaddingSwitchTitle: 'Toggle dense padding',
-  toggleFilterButtonTitle: 'Toggle filters'
+  toggleFilterButtonTitle: 'Toggle filters',
+  toggleFullScreenButtonTitle: 'Toggle full screen',
+  toggleSearchButtonTitle: 'Toggle search',
+  toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected',
+  toolbarAlertGroupedByMessage: 'Grouped by ',
+  toolbarAlertGroupedThenByMessage: ', then by '
 };
 
-var _excluded = ["defaultColumn", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions"];
+var _excluded = ["defaultColumn", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 var MaterialReactTable = (function (_ref) {
   var _ref$defaultColumn = _ref.defaultColumn,
       defaultColumn = _ref$defaultColumn === void 0 ? {
@@ -2183,14 +2412,17 @@ var MaterialReactTable = (function (_ref) {
       positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
       _ref$positionToolbarA = _ref.positionToolbarActions,
       positionToolbarActions = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
+      _ref$positionToolbarA2 = _ref.positionToolbarAlertBanner,
+      positionToolbarAlertBanner = _ref$positionToolbarA2 === void 0 ? 'top' : _ref$positionToolbarA2,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return React.createElement(MaterialReactTableProvider, Object.assign({
     defaultColumn: defaultColumn,
     localization: _extends({}, defaultLocalization, localization),
-    positionPagination: positionPagination,
     positionActionsColumn: positionActionsColumn,
-    positionToolbarActions: positionToolbarActions
+    positionPagination: positionPagination,
+    positionToolbarActions: positionToolbarActions,
+    positionToolbarAlertBanner: positionToolbarAlertBanner
   }, rest), React.createElement(MRT_TableContainer, null));
 });