material-react-table 0.3.4 → 0.4.2

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

@@ -25,6 +25,8 @@ var SearchIcon = _interopDefault(require('@mui/icons-material/Search'));
 var FilterListOffIcon = _interopDefault(require('@mui/icons-material/FilterListOff'));
 var ViewColumnIcon = _interopDefault(require('@mui/icons-material/ViewColumn'));
 var SearchOffIcon = _interopDefault(require('@mui/icons-material/SearchOff'));
+var FilterListIcon = _interopDefault(require('@mui/icons-material/Fullscreen'));
+var FilterListOffIcon$1 = _interopDefault(require('@mui/icons-material/FullscreenExit'));
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -95,8 +97,16 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var useMRTCalcs = function useMRTCalcs(_ref) {
-  var tableInstance = _ref.tableInstance;
+var MaterialReactTableContext = /*#__PURE__*/function () {
+  return React.createContext({});
+}();
+
+var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
+  var _props$defaultDensePa, _props$defaultFullScr, _props$defaultShowFil, _props$defaultShowSea;
+
+  var hooks = [reactTable.useFilters, reactTable.useGlobalFilter, reactTable.useGroupBy, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect];
+  if (props.enableColumnResizing) hooks.unshift(reactTable.useResizeColumns, reactTable.useFlexLayout);
+  var tableInstance = reactTable.useTable.apply(void 0, [props].concat(hooks));
   var anyRowsCanExpand = React.useMemo(function () {
     return tableInstance.rows.some(function (row) {
       return row.canExpand;
@@ -107,70 +117,47 @@ var useMRTCalcs = function useMRTCalcs(_ref) {
       return row.isExpanded;
     });
   }, [tableInstance.rows]);
-  var maxColumnDepth = React.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 React.createContext({});
-}();
-
-var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
-  var _props$defaultShowSea, _props$defaultShowFil, _props$defaultDensePa;
-
-  var hooks = [reactTable.useResizeColumns, reactTable.useFilters, reactTable.useGlobalFilter, reactTable.useGroupBy, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect];
-  if (props.enableColumnResizing) hooks.unshift(reactTable.useFlexLayout);
-  var tableInstance = reactTable.useTable.apply(void 0, [props].concat(hooks));
-  var mrtCalcs = useMRTCalcs({
-    tableInstance: tableInstance
-  });
+  var _useState = React.useState(null),
+      currentEditingRow = _useState[0],
+      setCurrentEditingRow = _useState[1];
 
-  var _useState = React.useState((_props$defaultShowSea = props.defaultShowSearchTextField) != null ? _props$defaultShowSea : false),
-      showSearch = _useState[0],
-      setShowSearch = _useState[1];
+  var _useState2 = React.useState((_props$defaultDensePa = props.defaultDensePadding) != null ? _props$defaultDensePa : false),
+      densePadding = _useState2[0],
+      setDensePadding = _useState2[1];
 
-  var _useState2 = React.useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
-      showFilters = _useState2[0],
-      setShowFilters = _useState2[1];
+  var _useState3 = React.useState((_props$defaultFullScr = props.defaultFullScreen) != null ? _props$defaultFullScr : false),
+      fullScreen = _useState3[0],
+      setFullScreen = _useState3[1];
 
-  var _useState3 = React.useState((_props$defaultDensePa = props.defaultDensePadding) != null ? _props$defaultDensePa : false),
-      densePadding = _useState3[0],
-      setDensePadding = _useState3[1];
+  var _useState4 = React.useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
+      showFilters = _useState4[0],
+      setShowFilters = _useState4[1];
 
-  var _useState4 = React.useState(null),
-      currentEditingRow = _useState4[0],
-      setCurrentEditingRow = _useState4[1];
+  var _useState5 = React.useState((_props$defaultShowSea = props.defaultShowSearchTextField) != null ? _props$defaultShowSea : false),
+      showSearch = _useState5[0],
+      setShowSearch = _useState5[1];
 
   return React__default.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
     React.useContext(MaterialReactTableContext)
   );
@@ -181,8 +168,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 = React.useState(''),
       filterValue = _useState[0],
@@ -257,13 +244,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();
@@ -354,8 +341,8 @@ var IconButton = /*#__PURE__*/material.styled(material.IconButton)({
 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 = React.useState(null),
       anchorEl = _useState[0],
@@ -379,7 +366,7 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }));
 };
 
-var StyledTableHeadCell = /*#__PURE__*/material.styled(material.TableCell, {
+var MRT_StyledTableHeadCell = /*#__PURE__*/material.styled(material.TableCell, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding' && prop !== 'enableColumnResizing';
   }
@@ -390,6 +377,7 @@ var StyledTableHeadCell = /*#__PURE__*/material.styled(material.TableCell, {
     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'
   };
@@ -420,15 +408,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;
@@ -438,7 +426,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__default.createElement(StyledTableHeadCell, Object.assign({
+  return React__default.createElement(MRT_StyledTableHeadCell, Object.assign({
     align: isParentHeader ? 'center' : 'left',
     densePadding: densePadding,
     enableColumnResizing: enableColumnResizing
@@ -481,11 +469,11 @@ var MRT_TableButtonCell = /*#__PURE__*/material.styled(material.TableCell, {
 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__default.createElement(MRT_TableButtonCell, {
     densePadding: densePadding,
@@ -509,11 +497,11 @@ var ArrowRightIcon = /*#__PURE__*/material.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__default.createElement(MRT_TableButtonCell, Object.assign({
     size: "small",
@@ -532,8 +520,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;
 
@@ -546,22 +534,34 @@ var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
   return React__default.createElement(material.TableCell, Object.assign({}, tableCellProps));
 };
 
+var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
+  var _useMRT = useMRT(),
+      densePadding = _useMRT.densePadding,
+      localization = _useMRT.localization;
+
+  return React__default.createElement(MRT_StyledTableHeadCell, {
+    densePadding: densePadding,
+    style: {
+      textAlign: 'center'
+    }
+  }, localization == null ? void 0 : localization.actionsHeadColumnTitle);
+};
+
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
   var _mTableHeadRowProps$s;
 
   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 = React.useMemo(function () {
     return headerGroup.headers.some(function (h) {
@@ -576,11 +576,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__default.createElement(material.TableRow, Object.assign({}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(StyledTableHeadCell, {
-    style: {
-      textAlign: 'center'
-    }
-  }, localization == null ? void 0 : localization.actionsHeadColumnTitle)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React__default.createElement(MRT_ExpandAllButton, null) : React__default.createElement(MRT_TableSpacerCell, {
+  return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), enableRowNumbers && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(MRT_StyledTableHeadCell, null, "#")), enableRowActions && positionActionsColumn === 'first' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(MRT_TableHeadCellActions, null)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React__default.createElement(MRT_ExpandAllButton, null) : React__default.createElement(MRT_TableSpacerCell, {
     width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
   }) : null, enableSelection ? !isParentHeader ? React__default.createElement(MRT_SelectAllCheckbox, null) : React__default.createElement(MRT_TableSpacerCell, {
     width: "1rem"
@@ -589,15 +585,13 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
       key: column.getHeaderProps().key,
       column: column
     });
-  }), enableRowActions && positionActionsColumn === 'last' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(StyledTableHeadCell, {
-    densePadding: densePadding
-  }, localization == null ? void 0 : localization.actionsHeadColumnTitle)));
+  }), enableRowActions && positionActionsColumn === 'last' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.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__default.createElement(material.TableHead, Object.assign({}, tableHeadProps), tableInstance.headerGroups.map(function (headerGroup) {
@@ -613,11 +607,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) {
@@ -653,7 +647,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   }, textFieldProps));
 };
 
-var TableCell = /*#__PURE__*/material.styled(material.TableCell, {
+var MRT_StyledTableBodyCell = /*#__PURE__*/material.styled(material.TableCell, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding';
   }
@@ -670,11 +664,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;
@@ -683,7 +677,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__default.createElement(TableCell, Object.assign({
+  return React__default.createElement(MRT_StyledTableBodyCell, Object.assign({
     densePadding: densePadding,
     onClick: function onClick(event) {
       return onCellClick == null ? void 0 : onCellClick(event, cell);
@@ -693,7 +687,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref2) {
   }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React__default.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
 };
 
-var TableCell$1 = /*#__PURE__*/material.styled(material.TableCell, {
+var TableCell = /*#__PURE__*/material.styled(material.TableCell, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'isExpanded';
   }
@@ -711,12 +705,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;
 
@@ -732,7 +726,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
 
   return React__default.createElement(material.TableRow, Object.assign({
     hover: true
-  }, tableRowProps), React__default.createElement(TableCell$1, Object.assign({
+  }, tableRowProps), React__default.createElement(TableCell, Object.assign({
     colSpan: tableInstance.visibleColumns.length + 10,
     isExpanded: row.isExpanded,
     onClick: function onClick(event) {
@@ -743,7 +737,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
   }, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
 };
 
-var TableCell$2 = /*#__PURE__*/material.styled(MRT_TableButtonCell, {
+var TableCell$1 = /*#__PURE__*/material.styled(MRT_TableButtonCell, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'depth';
   }
@@ -768,12 +762,12 @@ var ExpandMoreIcon = /*#__PURE__*/material.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__default.createElement(TableCell$2, {
+  return React__default.createElement(TableCell$1, {
     size: "small",
     densePadding: densePadding,
     depth: row.depth
@@ -790,11 +784,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;
@@ -825,11 +819,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__default.createElement(material.Menu, {
     anchorEl: anchorEl,
@@ -1613,11 +1607,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;
@@ -1680,15 +1674,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 = React.useState(null),
       anchorEl = _useState[0],
@@ -1744,14 +1738,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;
 
@@ -1765,7 +1760,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__default.createElement(MRT_ToggleRowActionMenuButton, {
+  }, tableRowProps), enableRowNumbers && React__default.createElement(MRT_StyledTableBodyCell, null, row.index + 1), enableRowActions && positionActionsColumn === 'first' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
   }), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(MRT_ExpandButton, {
     row: row
@@ -1789,10 +1784,10 @@ var TableBody = /*#__PURE__*/material.styled(material.TableBody)({
 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;
 
@@ -1809,7 +1804,7 @@ var MRT_TableBody = function MRT_TableBody() {
   }));
 };
 
-var TableCell$3 = /*#__PURE__*/material.styled(material.TableCell, {
+var TableCell$2 = /*#__PURE__*/material.styled(material.TableCell, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding' && prop !== 'enableColumnResizing';
   }
@@ -1828,10 +1823,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;
@@ -1841,7 +1836,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__default.createElement(TableCell$3, Object.assign({
+  return React__default.createElement(TableCell$2, Object.assign({
     align: isParentHeader ? 'center' : 'left',
     densePadding: densePadding,
     enableColumnResizing: enableColumnResizing,
@@ -1854,15 +1849,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) {
@@ -1874,7 +1870,7 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
     style: _extends({}, footerGroup.getFooterGroupProps().style, (_mTableFooterRowProps = mTableFooterRowProps == null ? void 0 : mTableFooterRowProps.style) != null ? _mTableFooterRowProps : {})
   });
 
-  return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React__default.createElement(MRT_TableSpacerCell, null), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(MRT_TableSpacerCell, {
+  return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), enableRowNumbers && React__default.createElement(MRT_TableSpacerCell, null), enableRowActions && positionActionsColumn === 'first' && React__default.createElement(MRT_TableSpacerCell, null), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(MRT_TableSpacerCell, {
     width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
   }), enableSelection && React__default.createElement(MRT_TableSpacerCell, {
     width: "1rem"
@@ -1887,9 +1883,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__default.createElement(material.TableFooter, Object.assign({}, muiTableFooterProps), tableInstance.footerGroups.map(function (footerGroup) {
     return React__default.createElement(MRT_TableFooterRow, {
@@ -1902,11 +1898,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 : {})
@@ -1919,12 +1915,12 @@ var TextField = /*#__PURE__*/material.styled(material.TextField)({
   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 = React.useState(''),
       searchValue = _useState[0],
@@ -1978,10 +1974,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__default.createElement(material.Tooltip, {
     arrow: true,
@@ -1996,26 +1992,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__default.createElement(React__default.Fragment, null, React__default.createElement(material.MenuItem, {
     style: {
-      paddingLeft: column.depth + 1 + "rem"
+      paddingLeft: (column.depth + 0.5) * 2 + "rem"
     }
-  }, isMaxDepth ? React__default.createElement(material.FormControlLabel, {
-    checked: column.isVisible,
+  }, React__default.createElement(material.FormControlLabel, {
+    checked: switchChecked,
     control: React__default.createElement(material.Switch, null),
     label: column.Header,
     onChange: function onChange() {
-      return isMaxDepth && column.toggleHidden();
+      return handleToggleColumnHidden(column);
     }
-  }) : React__default.createElement(material.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__default.createElement(MRT_ShowHideColumnsMenu, {
       key: i + "-" + c.id,
       column: c
@@ -2023,12 +2032,17 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   }));
 };
 
+var MenuButtons = /*#__PURE__*/material.styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 0.5rem 0.5rem 0.5rem'
+});
 var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
   var _localization$showHid;
 
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      localization = _useMaterialReactTabl.localization;
+  var _useMRT = useMRT(),
+      tableInstance = _useMRT.tableInstance,
+      localization = _useMRT.localization;
 
   var _useState = React.useState(null),
       anchorEl = _useState[0],
@@ -2051,7 +2065,17 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
     onClose: function onClose() {
       return setAnchorEl(null);
     }
-  }, tableInstance.columns.map(function (column, index) {
+  }, React__default.createElement(MenuButtons, null, React__default.createElement(material.Button, {
+    disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
+    onClick: function onClick() {
+      return tableInstance.toggleHideAllColumns(true);
+    }
+  }, localization == null ? void 0 : localization.columnShowHideMenuHideAll), React__default.createElement(material.Button, {
+    disabled: tableInstance.getToggleHideAllColumnsProps().checked,
+    onClick: function onClick() {
+      return tableInstance.toggleHideAllColumns(false);
+    }
+  }, localization == null ? void 0 : localization.columnShowHideMenuShowAll)), React__default.createElement(material.Divider, null), tableInstance.columns.map(function (column, index) {
     return React__default.createElement(MRT_ShowHideColumnsMenu, {
       key: index + "-" + column.id,
       column: column
@@ -2062,10 +2086,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__default.createElement(material.Tooltip, {
     arrow: true,
@@ -2086,11 +2110,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);
@@ -2110,25 +2134,46 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton() {
   }, showSearch ? React__default.createElement(SearchOffIcon, null) : React__default.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__default.createElement(material.Tooltip, {
+    arrow: true,
+    title: (_localization$toggleF = localization == null ? void 0 : localization.toggleFullScreenButtonTitle) != null ? _localization$toggleF : ''
+  }, React__default.createElement(material.IconButton, {
+    "aria-label": localization == null ? void 0 : localization.toggleFilterButtonTitle,
+    onClick: function onClick() {
+      return setFullScreen(!fullScreen);
+    },
+    size: "small"
+  }, fullScreen ? React__default.createElement(FilterListOffIcon$1, null) : React__default.createElement(FilterListIcon, null)));
+};
+
 var ToolbarButtonsContainer = /*#__PURE__*/material.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__default.createElement(ToolbarButtonsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_ToggleSearchButton, null), !disableFilters && React__default.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React__default.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React__default.createElement(MRT_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__default.createElement(ToolbarButtonsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_ToggleSearchButton, null), !disableFilters && React__default.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React__default.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React__default.createElement(MRT_DensePaddingSwitch, null), !disableFullScreenToggle && React__default.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;
 
@@ -2149,67 +2194,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__*/material.styled(material.Alert, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'displayAbsolute' && prop !== 'toolbarPosition';
+  }
+})(function (_ref) {
+  var displayAbsolute = _ref.displayAbsolute,
+      toolbarPosition = _ref.toolbarPosition;
+  return {
+    borderRadius: 0,
+    fontSize: '1rem',
+    left: 0,
+    marginLeft: !displayAbsolute ? '-0.5rem' : undefined,
+    padding: toolbarPosition === 'bottom' ? '0 1rem' : '0.5rem 1.25rem',
+    position: displayAbsolute ? 'absolute' : 'relative',
+    right: 0,
+    top: 0,
+    width: "calc(100% - " + (displayAbsolute ? '2.5rem' : '1.5rem') + ")",
+    zIndex: 2
+  };
+});
+var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
+  var _localization$toolbar, _localization$toolbar2;
+
+  var _useMRT = useMRT(),
+      muiTableToolbarAlertBannerProps = _useMRT.muiTableToolbarAlertBannerProps,
+      tableInstance = _useMRT.tableInstance,
+      positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
+      positionToolbarActions = _useMRT.positionToolbarActions,
+      localization = _useMRT.localization,
+      renderToolbarCustomActions = _useMRT.renderToolbarCustomActions;
+
+  var isMobile = material.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__default.createElement("span", null, localization == null ? void 0 : localization.toolbarAlertGroupedByMessage, ' ', tableInstance.state.groupBy.map(function (columnId, index) {
+    var _tableInstance$allCol;
+
+    return React__default.createElement(React.Fragment, {
+      key: index + "-" + columnId
+    }, index > 0 ? localization == null ? void 0 : localization.toolbarAlertGroupedThenByMessage : '', React__default.createElement(material.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__default.createElement(material.Collapse, {
+    "in": !!selectMessage || !!groupedByMessage,
+    timeout: displayAbsolute ? 0 : 200
+  }, React__default.createElement(Alert, Object.assign({
+    displayAbsolute: displayAbsolute,
+    icon: false,
+    color: "info"
+  }, alertProps), selectMessage, groupedByMessage));
+};
+
 var Toolbar = /*#__PURE__*/material.styled(material.Toolbar)({
   display: 'grid',
-  padding: '0.5rem !important'
+  padding: '0 0.5rem !important'
 });
 var ToolbarTopRow = /*#__PURE__*/material.styled('div')({
-  padding: '0.5rem',
+  padding: '1rem 0.5rem',
   display: 'flex',
   justifyContent: 'space-between'
 });
 var ToolbarActionsContainer = /*#__PURE__*/material.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__default.createElement(Toolbar, Object.assign({
     variant: "dense"
-  }, toolbarProps), React__default.createElement(ToolbarTopRow, null, (_renderToolbarActions = renderToolbarActions == null ? void 0 : renderToolbarActions(tableInstance)) != null ? _renderToolbarActions : React__default.createElement("span", null), React__default.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarButtons, null))), React__default.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null)));
+  }, toolbarProps), positionToolbarAlertBanner === 'top' && React__default.createElement(MRT_ToolbarAlertBanner, null), React__default.createElement(ToolbarTopRow, null, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React__default.createElement("span", null), React__default.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarInternalButtons, null))), React__default.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null)));
 };
 
 var Toolbar$1 = /*#__PURE__*/material.styled(material.Toolbar)({
   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__default.createElement(Toolbar$1, Object.assign({
-    style: {
-      padding: 0
-    },
     variant: "dense"
-  }, toolbarProps), !hideToolbarActions && positionToolbarActions === 'bottom' ? React__default.createElement(MRT_ToolbarButtons, null) : React__default.createElement("span", null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null));
+  }, toolbarProps), !hideToolbarActions && positionToolbarActions === 'bottom' ? React__default.createElement(MRT_ToolbarInternalButtons, null) : React__default.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React__default.createElement(MRT_ToolbarAlertBanner, null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null));
 };
 
-var CircularProgressWrapper = /*#__PURE__*/material.styled('div')(function (_ref) {
-  var theme = _ref.theme;
+var TableContainer = /*#__PURE__*/material.styled(material.TableContainer, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'fullScreen';
+  }
+})(function (_ref) {
+  var fullScreen = _ref.fullScreen;
+  return {
+    bottom: fullScreen ? '0' : undefined,
+    height: fullScreen ? '100%' : undefined,
+    left: fullScreen ? '0' : undefined,
+    margin: fullScreen ? '0' : undefined,
+    position: fullScreen ? '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__*/material.styled('div')(function (_ref2) {
+  var theme = _ref2.theme;
   return {
     alignItems: 'center',
     backgroundColor: material.alpha(theme.palette.background.paper, 0.5),
@@ -2222,16 +2351,20 @@ var CircularProgressWrapper = /*#__PURE__*/material.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;
-
-  return React__default.createElement(material.TableContainer, Object.assign({
-    component: material.Paper
-  }, muiTableContainerProps), !hideToolbarTop && React__default.createElement(MRT_ToolbarTop, null), isFetching && React__default.createElement(material.LinearProgress, null), isLoading && React__default.createElement(CircularProgressWrapper, null, React__default.createElement(material.CircularProgress, {
+  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__default.createElement(TableContainer, Object.assign({
+    component: material.Paper,
+    fullScreen: fullScreen
+  }, tableContainerProps), !hideToolbarTop && React__default.createElement(MRT_ToolbarTop, null), isFetching && React__default.createElement(material.LinearProgress, null), isLoading && React__default.createElement(CircularProgressWrapper, null, React__default.createElement(material.CircularProgress, {
     "aria-busy": "true",
     "aria-label": "Loading data"
   })), React__default.createElement(MRT_Table, null), !hideToolbarBottom && React__default.createElement(MRT_ToolbarBottom, null));
@@ -2246,6 +2379,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',
@@ -2254,18 +2389,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 ? {
@@ -2280,14 +2419,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__default.createElement(MaterialReactTableProvider, Object.assign({
     defaultColumn: defaultColumn,
     localization: _extends({}, defaultLocalization, localization),
-    positionPagination: positionPagination,
     positionActionsColumn: positionActionsColumn,
-    positionToolbarActions: positionToolbarActions
+    positionPagination: positionPagination,
+    positionToolbarActions: positionToolbarActions,
+    positionToolbarAlertBanner: positionToolbarAlertBanner
   }, rest), React__default.createElement(MRT_TableContainer, null));
 });