material-react-table 0.3.4 → 0.4.2

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, 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 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';
@@ -18,6 +18,8 @@ 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 {
@@ -88,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;
@@ -100,70 +110,47 @@ 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$defaultShowSea, _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(null),
+      currentEditingRow = _useState[0],
+      setCurrentEditingRow = _useState[1];
 
-  var _useState = useState((_props$defaultShowSea = props.defaultShowSearchTextField) != null ? _props$defaultShowSea : false),
-      showSearch = _useState[0],
-      setShowSearch = _useState[1];
+  var _useState2 = useState((_props$defaultDensePa = props.defaultDensePadding) != null ? _props$defaultDensePa : false),
+      densePadding = _useState2[0],
+      setDensePadding = _useState2[1];
 
-  var _useState2 = useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
-      showFilters = _useState2[0],
-      setShowFilters = _useState2[1];
+  var _useState3 = useState((_props$defaultFullScr = props.defaultFullScreen) != null ? _props$defaultFullScr : false),
+      fullScreen = _useState3[0],
+      setFullScreen = _useState3[1];
 
-  var _useState3 = useState((_props$defaultDensePa = props.defaultDensePadding) != null ? _props$defaultDensePa : false),
-      densePadding = _useState3[0],
-      setDensePadding = _useState3[1];
+  var _useState4 = useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
+      showFilters = _useState4[0],
+      setShowFilters = _useState4[1];
 
-  var _useState4 = useState(null),
-      currentEditingRow = _useState4[0],
-      setCurrentEditingRow = _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,
       setShowSearch: setShowSearch,
       showFilters: showFilters,
       showSearch: showSearch,
-      // @ts-ignore
+      //@ts-ignore
       tableInstance: tableInstance
     })
   }, props.children);
 };
-var useMaterialReactTable = function useMaterialReactTable() {
+var useMRT = function useMRT() {
   return (//@ts-ignore
     useContext(MaterialReactTableContext)
   );
@@ -174,8 +161,8 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
 
   var column = _ref.column;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      localization = _useMaterialReactTabl.localization;
+  var _useMRT = useMRT(),
+      localization = _useMRT.localization;
 
   var _useState = useState(''),
       filterValue = _useState[0],
@@ -250,13 +237,13 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       column = _ref.column,
       setAnchorEl = _ref.setAnchorEl;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
-      enableColumnGrouping = _useMaterialReactTabl.enableColumnGrouping,
-      disableSortBy = _useMaterialReactTabl.disableSortBy,
-      localization = _useMaterialReactTabl.localization,
-      disableFilters = _useMaterialReactTabl.disableFilters,
-      setShowFilters = _useMaterialReactTabl.setShowFilters;
+  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();
@@ -347,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],
@@ -372,7 +359,7 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }));
 };
 
-var StyledTableHeadCell = /*#__PURE__*/styled(TableCell$4, {
+var MRT_StyledTableHeadCell = /*#__PURE__*/styled(TableCell$3, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding' && prop !== 'enableColumnResizing';
   }
@@ -383,6 +370,7 @@ var StyledTableHeadCell = /*#__PURE__*/styled(TableCell$4, {
     fontWeight: 'bold',
     height: '100%',
     padding: densePadding ? '0.5rem' : '1rem',
+    paddingTop: densePadding ? '0.75rem' : '1.25rem',
     transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
     verticalAlign: 'text-top'
   };
@@ -413,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;
@@ -431,7 +419,7 @@ 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
@@ -458,7 +446,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
   }))));
 };
 
-var MRT_TableButtonCell = /*#__PURE__*/styled(TableCell$4, {
+var MRT_TableButtonCell = /*#__PURE__*/styled(TableCell$3, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding';
   }
@@ -474,11 +462,11 @@ var MRT_TableButtonCell = /*#__PURE__*/styled(TableCell$4, {
 var MRT_SelectAllCheckbox = function MRT_SelectAllCheckbox() {
   var _localization$selectA;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      disableSelectAll = _useMaterialReactTabl.disableSelectAll,
-      densePadding = _useMaterialReactTabl.densePadding,
-      localization = _useMaterialReactTabl.localization;
+  var _useMRT = useMRT(),
+      tableInstance = _useMRT.tableInstance,
+      disableSelectAll = _useMRT.disableSelectAll,
+      densePadding = _useMRT.densePadding,
+      localization = _useMRT.localization;
 
   return React.createElement(MRT_TableButtonCell, {
     densePadding: densePadding,
@@ -502,11 +490,11 @@ 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;
+  var _useMRT = useMRT(),
+      tableInstance = _useMRT.tableInstance,
+      localization = _useMRT.localization,
+      anyRowsExpanded = _useMRT.anyRowsExpanded,
+      densePadding = _useMRT.densePadding;
 
   return React.createElement(MRT_TableButtonCell, Object.assign({
     size: "small",
@@ -525,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;
 
@@ -536,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$4, 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) {
@@ -544,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) {
@@ -569,11 +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, {
-    style: {
-      textAlign: 'center'
-    }
-  }, 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"
@@ -582,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) {
@@ -606,11 +600,11 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 
   var cell = _ref.cell;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      currentEditingRow = _useMaterialReactTabl.currentEditingRow,
-      localization = _useMaterialReactTabl.localization,
-      muiTableBodyCellEditTextFieldProps = _useMaterialReactTabl.muiTableBodyCellEditTextFieldProps,
-      setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow;
+  var _useMRT = useMRT(),
+      currentEditingRow = _useMRT.currentEditingRow,
+      localization = _useMRT.localization,
+      muiTableBodyCellEditTextFieldProps = _useMRT.muiTableBodyCellEditTextFieldProps,
+      setCurrentEditingRow = _useMRT.setCurrentEditingRow;
 
   var handleChange = function handleChange(event) {
     if (currentEditingRow) {
@@ -646,7 +640,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   }, textFieldProps));
 };
 
-var TableCell = /*#__PURE__*/styled(TableCell$4, {
+var MRT_StyledTableBodyCell = /*#__PURE__*/styled(TableCell$3, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding';
   }
@@ -663,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;
@@ -676,7 +670,7 @@ 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, Object.assign({
+  return React.createElement(MRT_StyledTableBodyCell, Object.assign({
     densePadding: densePadding,
     onClick: function onClick(event) {
       return onCellClick == null ? void 0 : onCellClick(event, cell);
@@ -686,7 +680,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref2) {
   }) : 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$1 = /*#__PURE__*/styled(TableCell$4, {
+var TableCell = /*#__PURE__*/styled(TableCell$3, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'isExpanded';
   }
@@ -704,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;
 
@@ -725,7 +719,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
 
   return React.createElement(TableRow$1, Object.assign({
     hover: true
-  }, tableRowProps), React.createElement(TableCell$1, Object.assign({
+  }, tableRowProps), React.createElement(TableCell, Object.assign({
     colSpan: tableInstance.visibleColumns.length + 10,
     isExpanded: row.isExpanded,
     onClick: function onClick(event) {
@@ -736,7 +730,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
   }, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
 };
 
-var TableCell$2 = /*#__PURE__*/styled(MRT_TableButtonCell, {
+var TableCell$1 = /*#__PURE__*/styled(MRT_TableButtonCell, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'depth';
   }
@@ -761,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$2, {
+  return React.createElement(TableCell$1, {
     size: "small",
     densePadding: densePadding,
     depth: row.depth
@@ -783,11 +777,11 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
 var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var row = _ref.row;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      onRowSelectChange = _useMaterialReactTabl.onRowSelectChange,
-      densePadding = _useMaterialReactTabl.densePadding,
-      localization = _useMaterialReactTabl.localization;
+  var _useMRT = useMRT(),
+      tableInstance = _useMRT.tableInstance,
+      onRowSelectChange = _useMRT.onRowSelectChange,
+      densePadding = _useMRT.densePadding,
+      localization = _useMRT.localization;
 
   var onSelectChange = function onSelectChange(event) {
     var _row$getToggleRowSele;
@@ -818,11 +812,11 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
       handleEdit = _ref.handleEdit,
       setAnchorEl = _ref.setAnchorEl;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      enableRowEditing = _useMaterialReactTabl.enableRowEditing,
-      localization = _useMaterialReactTabl.localization,
-      renderRowActionMenuItems = _useMaterialReactTabl.renderRowActionMenuItems,
-      tableInstance = _useMaterialReactTabl.tableInstance;
+  var _useMRT = useMRT(),
+      enableRowEditing = _useMRT.enableRowEditing,
+      localization = _useMRT.localization,
+      renderRowActionMenuItems = _useMRT.renderRowActionMenuItems,
+      tableInstance = _useMRT.tableInstance;
 
   return React.createElement(Menu, {
     anchorEl: anchorEl,
@@ -1606,11 +1600,11 @@ 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;
@@ -1673,15 +1667,15 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
 
   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 _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],
@@ -1737,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;
 
@@ -1758,7 +1753,7 @@ 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(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, {
     row: row
@@ -1782,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;
 
@@ -1802,7 +1797,7 @@ var MRT_TableBody = function MRT_TableBody() {
   }));
 };
 
-var TableCell$3 = /*#__PURE__*/styled(TableCell$4, {
+var TableCell$2 = /*#__PURE__*/styled(TableCell$3, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding' && prop !== 'enableColumnResizing';
   }
@@ -1821,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;
@@ -1834,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$3, Object.assign({
+  return React.createElement(TableCell$2, Object.assign({
     align: isParentHeader ? 'center' : 'left',
     densePadding: densePadding,
     enableColumnResizing: enableColumnResizing,
@@ -1847,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) {
@@ -1867,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"
@@ -1880,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, {
@@ -1895,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 : {})
@@ -1912,12 +1908,12 @@ var TextField = /*#__PURE__*/styled(TextField$1)({
   justifySelf: 'end'
 });
 var MRT_SearchTextField = function MRT_SearchTextField() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      showSearch = _useMaterialReactTabl.showSearch,
-      localization = _useMaterialReactTabl.localization,
-      muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps,
-      onGlobalFilterChange = _useMaterialReactTabl.onGlobalFilterChange,
-      tableInstance = _useMaterialReactTabl.tableInstance;
+  var _useMRT = useMRT(),
+      showSearch = _useMRT.showSearch,
+      localization = _useMRT.localization,
+      muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
+      onGlobalFilterChange = _useMRT.onGlobalFilterChange,
+      tableInstance = _useMRT.tableInstance;
 
   var _useState = useState(''),
       searchValue = _useState[0],
@@ -1971,10 +1967,10 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
 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,
@@ -1989,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
@@ -2016,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],
@@ -2044,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
@@ -2055,10 +2079,10 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
 var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
   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,
@@ -2079,11 +2103,11 @@ var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
 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 _useMRT = useMRT(),
+      localization = _useMRT.localization,
+      setShowSearch = _useMRT.setShowSearch,
+      showSearch = _useMRT.showSearch,
+      muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps;
 
   var handleToggleSearch = function handleToggleSearch() {
     setShowSearch(!showSearch);
@@ -2103,25 +2127,46 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton() {
   }, 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,
-      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_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;
 
@@ -2142,67 +2187,151 @@ var MRT_TablePagination = function MRT_TablePagination() {
     showFirstButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
     showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
     style: {
-      padding: 0
+      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',
-  padding: '0.5rem !important'
+  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 _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 _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, (_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)));
+  }, 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)({
   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({
-    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));
+  }, 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 : 1
+  };
+});
+var CircularProgressWrapper = /*#__PURE__*/styled('div')(function (_ref2) {
+  var theme = _ref2.theme;
   return {
     alignItems: 'center',
     backgroundColor: alpha(theme.palette.background.paper, 0.5),
@@ -2215,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));
@@ -2239,6 +2372,8 @@ var defaultLocalization = {
   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',
@@ -2247,18 +2382,22 @@ var defaultLocalization = {
   rowActionButtonSave: 'Save',
   rowActionMenuButtonTitle: 'Row Actions',
   rowActionMenuItemEdit: 'Edit',
-  selectCheckboxTitle: 'Select row',
   rowActionsColumnTitle: 'Actions',
   searchTextFieldClearButtonTitle: 'Clear search',
   searchTextFieldPlaceholder: 'Search',
   selectAllCheckboxTitle: 'Select all',
+  selectCheckboxTitle: 'Select row',
   showHideColumnsButtonTitle: 'Show/Hide columns',
   toggleDensePaddingSwitchTitle: 'Toggle dense padding',
   toggleFilterButtonTitle: 'Toggle filters',
-  toggleSearchButtonTitle: 'Toggle search'
+  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 ? {
@@ -2273,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));
 });