material-react-table 0.6.2 → 0.6.5

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

@@ -1,6 +1,6 @@
-import React, { useState, useCallback, useMemo, useContext, createContext, Fragment, useRef, useEffect } from 'react';
+import React, { useState, useCallback, useMemo, useContext, createContext, Fragment, useEffect } from 'react';
 import { useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns, useFlexLayout, useAsyncDebounce } from 'react-table';
-import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, FormControlLabel, Switch, Box, Button, Divider, TableCell, TableSortLabel, Collapse, Skeleton, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, TablePagination, useMediaQuery, Alert, Toolbar, TableContainer, Paper, LinearProgress } from '@mui/material';
+import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, FormControlLabel, Switch, Box, Button, Divider, ListItemIcon, TableCell, TableSortLabel, Collapse, Skeleton, Checkbox, TableRow, TableHead, TableBody, TableFooter, Table, TablePagination, useMediaQuery, Alert, LinearProgress, Toolbar, alpha, TableContainer, Paper } from '@mui/material';
 import { matchSorter } from 'match-sorter';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -97,6 +97,35 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var findLowestLevelCols = function findLowestLevelCols(columns) {
+  var lowestLevelColumns = columns;
+  var currentCols = columns;
+
+  while (!!((_currentCols = currentCols) != null && _currentCols.length) && currentCols.some(function (col) {
+    return col.columns;
+  })) {
+    var _currentCols;
+
+    var nextCols = currentCols.filter(function (col) {
+      return !!col.columns;
+    }).map(function (col) {
+      return col.columns;
+    }).flat();
+
+    if (nextCols.every(function (col) {
+      return !(col != null && col.columns);
+    })) {
+      lowestLevelColumns = [].concat(lowestLevelColumns, nextCols);
+    }
+
+    currentCols = nextCols;
+  }
+
+  return lowestLevelColumns.filter(function (col) {
+    return !col.columns;
+  });
+};
+
 var MaterialReactTableContext = /*#__PURE__*/function () {
   return createContext({});
 }();
@@ -127,35 +156,8 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
       showSearch = _useState5[0],
       setShowSearch = _useState5[1];
 
-  var findLowestLevelCols = useCallback(function () {
-    var lowestLevelColumns = props.columns;
-    var currentCols = props.columns;
-
-    while (!!currentCols.length && currentCols.some(function (col) {
-      return col.columns;
-    })) {
-      var nextCols = currentCols.filter(function (col) {
-        return !!col.columns;
-      }).map(function (col) {
-        return col.columns;
-      }).flat();
-
-      if (nextCols.every(function (col) {
-        return !col.columns;
-      })) {
-        lowestLevelColumns = [].concat(lowestLevelColumns, nextCols);
-      }
-
-      currentCols = nextCols;
-    }
-
-    return lowestLevelColumns.filter(function (col) {
-      return !col.columns;
-    });
-  }, [props.columns]);
-
   var _useState6 = useState(function () {
-    return Object.assign.apply(Object, [{}].concat(findLowestLevelCols().map(function (c) {
+    return Object.assign.apply(Object, [{}].concat(findLowestLevelCols(props.columns).map(function (c) {
       var _ref, _c$filter, _props$initialState5, _props$initialState5$, _ref2;
 
       return _ref2 = {}, _ref2[c.accessor] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.filters) == null ? void 0 : _props$initialState5$[c.accessor]) != null ? _ref : !!c.filterSelectOptions ? 'equals' : 'fuzzy', _ref2;
@@ -180,10 +182,20 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
   var columns = useMemo(function () {
     return applyFiltersToColumns(props.columns);
   }, [props.columns, applyFiltersToColumns]);
+  var data = useMemo(function () {
+    return !props.isLoading || !!props.data.length ? props.data : [].concat(Array(10).fill(null)).map(function (_) {
+      return Object.assign.apply(Object, [{}].concat(findLowestLevelCols(props.columns).map(function (c) {
+        var _ref3;
+
+        return _ref3 = {}, _ref3[c.accessor] = null, _ref3;
+      })));
+    });
+  }, [props.data, props.isLoading]);
   var tableInstance = useTable.apply(void 0, [// @ts-ignore
   _extends({}, props, {
     // @ts-ignore
     columns: columns,
+    data: data,
     useControlledState: function useControlledState(state) {
       return useMemo(function () {
         return _extends({}, state, {
@@ -248,7 +260,7 @@ var MRT_FILTER_TYPE;
   MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
 })(MRT_FILTER_TYPE || (MRT_FILTER_TYPE = {}));
 
-var fuzzyFilterFN = function fuzzyFilterFN(rows, columnIds, filterValue) {
+var fuzzy = function fuzzy(rows, columnIds, filterValue) {
   return matchSorter(rows, filterValue.toString().trim(), {
     keys: Array.isArray(columnIds) ? columnIds.map(function (c) {
       return "values." + c;
@@ -259,111 +271,111 @@ var fuzzyFilterFN = function fuzzyFilterFN(rows, columnIds, filterValue) {
   });
 };
 
-fuzzyFilterFN.autoRemove = function (val) {
+fuzzy.autoRemove = function (val) {
   return !val;
 };
 
-var containsFilterFN = function containsFilterFN(rows, id, filterValue) {
+var contains = function contains(rows, id, filterValue) {
   return rows.filter(function (row) {
     return row.values[id].toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim());
   });
 };
 
-containsFilterFN.autoRemove = function (val) {
+contains.autoRemove = function (val) {
   return !val;
 };
 
-var startsWithFilterFN = function startsWithFilterFN(rows, id, filterValue) {
+var startsWith = function startsWith(rows, id, filterValue) {
   return rows.filter(function (row) {
     return row.values[id].toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim());
   });
 };
 
-startsWithFilterFN.autoRemove = function (val) {
+startsWith.autoRemove = function (val) {
   return !val;
 };
 
-var endsWithFilterFN = function endsWithFilterFN(rows, id, filterValue) {
+var endsWith = function endsWith(rows, id, filterValue) {
   return rows.filter(function (row) {
     return row.values[id].toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim());
   });
 };
 
-endsWithFilterFN.autoRemove = function (val) {
+endsWith.autoRemove = function (val) {
   return !val;
 };
 
-var equalsFilterFN = function equalsFilterFN(rows, id, filterValue) {
+var equals = function equals(rows, id, filterValue) {
   return rows.filter(function (row) {
     return row.values[id].toString().toLowerCase().trim() === filterValue.toString().toLowerCase().trim();
   });
 };
 
-equalsFilterFN.autoRemove = function (val) {
+equals.autoRemove = function (val) {
   return !val;
 };
 
-var notEqualsFilterFN = function notEqualsFilterFN(rows, id, filterValue) {
+var notEquals = function notEquals(rows, id, filterValue) {
   return rows.filter(function (row) {
     return row.values[id].toString().toLowerCase().trim() !== filterValue.toString().toLowerCase().trim();
   });
 };
 
-notEqualsFilterFN.autoRemove = function (val) {
+notEquals.autoRemove = function (val) {
   return !val;
 };
 
-var greaterThanFilterFN = function greaterThanFilterFN(rows, id, filterValue) {
+var greaterThan = function greaterThan(rows, id, filterValue) {
   return rows.filter(function (row) {
     return !isNaN(+filterValue) && !isNaN(+row.values[id]) ? +row.values[id] > +filterValue : row.values[id].toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
   });
 };
 
-greaterThanFilterFN.autoRemove = function (val) {
+greaterThan.autoRemove = function (val) {
   return !val;
 };
 
-var lessThanFilterFN = function lessThanFilterFN(rows, id, filterValue) {
+var lessThan = function lessThan(rows, id, filterValue) {
   return rows.filter(function (row) {
     return !isNaN(+filterValue) && !isNaN(+row.values[id]) ? +row.values[id] < +filterValue : row.values[id].toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
   });
 };
 
-lessThanFilterFN.autoRemove = function (val) {
+lessThan.autoRemove = function (val) {
   return !val;
 };
 
-var emptyFilterFN = function emptyFilterFN(rows, id, _filterValue) {
+var empty = function empty(rows, id, _filterValue) {
   return rows.filter(function (row) {
     return !row.values[id].toString().toLowerCase().trim();
   });
 };
 
-emptyFilterFN.autoRemove = function (val) {
+empty.autoRemove = function (val) {
   return !val;
 };
 
-var notEmptyFilterFN = function notEmptyFilterFN(rows, id, _filterValue) {
+var notEmpty = function notEmpty(rows, id, _filterValue) {
   return rows.filter(function (row) {
     return !!row.values[id].toString().toLowerCase().trim();
   });
 };
 
-notEmptyFilterFN.autoRemove = function (val) {
+notEmpty.autoRemove = function (val) {
   return !val;
 };
 
 var defaultFilterFNs = {
-  contains: containsFilterFN,
-  empty: emptyFilterFN,
-  endsWith: endsWithFilterFN,
-  equals: equalsFilterFN,
-  fuzzy: fuzzyFilterFN,
-  greaterThan: greaterThanFilterFN,
-  lessThan: lessThanFilterFN,
-  notEmpty: notEmptyFilterFN,
-  notEquals: notEqualsFilterFN,
-  startsWith: startsWithFilterFN
+  contains: contains,
+  empty: empty,
+  endsWith: endsWith,
+  equals: equals,
+  fuzzy: fuzzy,
+  greaterThan: greaterThan,
+  lessThan: lessThan,
+  notEmpty: notEmpty,
+  notEquals: notEquals,
+  startsWith: startsWith
 };
 
 var commonMenuItemStyles = {
@@ -387,52 +399,52 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       type: MRT_FILTER_TYPE.FUZZY,
       label: localization.filterFuzzy,
       divider: false,
-      fn: fuzzyFilterFN
+      fn: fuzzy
     }, {
       type: MRT_FILTER_TYPE.CONTAINS,
       label: localization.filterContains,
       divider: true,
-      fn: containsFilterFN
+      fn: contains
     }, {
       type: MRT_FILTER_TYPE.STARTS_WITH,
       label: localization.filterStartsWith,
       divider: false,
-      fn: startsWithFilterFN
+      fn: startsWith
     }, {
       type: MRT_FILTER_TYPE.ENDS_WITH,
       label: localization.filterEndsWith,
       divider: true,
-      fn: endsWithFilterFN
+      fn: endsWith
     }, {
       type: MRT_FILTER_TYPE.EQUALS,
       label: localization.filterEquals,
       divider: false,
-      fn: equalsFilterFN
+      fn: equals
     }, {
       type: MRT_FILTER_TYPE.NOT_EQUALS,
       label: localization.filterNotEquals,
       divider: true,
-      fn: notEqualsFilterFN
+      fn: notEquals
     }, {
       type: MRT_FILTER_TYPE.GREATER_THAN,
       label: localization.filterGreaterThan,
       divider: false,
-      fn: greaterThanFilterFN
+      fn: greaterThan
     }, {
       type: MRT_FILTER_TYPE.LESS_THAN,
       label: localization.filterLessThan,
       divider: true,
-      fn: lessThanFilterFN
+      fn: lessThan
     }, {
       type: MRT_FILTER_TYPE.EMPTY,
       label: localization.filterEmpty,
       divider: false,
-      fn: emptyFilterFN
+      fn: empty
     }, {
       type: MRT_FILTER_TYPE.NOT_EMPTY,
       label: localization.filterNotEmpty,
       divider: false,
-      fn: notEmptyFilterFN
+      fn: notEmpty
     }];
   }, []);
 
@@ -484,7 +496,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterB, _localization$clearFi, _column$filterSelectO;
+  var _localization$filterB, _localization$filterM, _localization$, _localization$clearFi, _column$filterSelectO;
 
   var column = _ref.column;
 
@@ -542,6 +554,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     }));
   }
 
+  var filterId = "mrt-" + idPrefix + "-" + column.id + "-filter-text-field";
   var filterType = tableInstance.state.currentFilterTypes[column.id];
   var isSelectFilter = !!column.filterSelectOptions;
   var filterChipLabel = !(filterType instanceof Function) && [MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(filterType) ? //@ts-ignore
@@ -549,7 +562,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var filterPlaceholder = (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.Header));
   return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
     fullWidth: true,
-    id: "mrt-" + idPrefix + "-" + column.id + "-filter-text-field",
+    id: filterId,
     inputProps: {
       disabled: !!filterChipLabel,
       sx: {
@@ -558,8 +571,11 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       },
       title: filterPlaceholder
     },
-    helperText: filterType instanceof Function ? '' : localization.filterMode.replace('{filterType}', // @ts-ignore
-    localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))]),
+    helperText: React.createElement("label", {
+      htmlFor: filterId
+    }, filterType instanceof Function ? (_localization$filterM = localization.filterMode.replace('{filterType}', // @ts-ignore
+    (_localization$ = localization["filter" + (filterType.name.charAt(0).toUpperCase() + filterType.name.slice(1))]) != null ? _localization$ : '')) != null ? _localization$filterM : '' : localization.filterMode.replace('{filterType}', // @ts-ignore
+    localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))])),
     FormHelperTextProps: {
       sx: {
         fontSize: '0.6rem',
@@ -667,6 +683,11 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
 
   var column = _ref.column,
       isSubMenu = _ref.isSubMenu;
+
+  var _useMRT = useMRT(),
+      onColumnHide = _useMRT.onColumnHide,
+      tableInstance = _useMRT.tableInstance;
+
   var isParentHeader = !!(column != null && (_column$columns = column.columns) != null && _column$columns.length);
   var allChildColumnsVisible = isParentHeader && !!((_column$columns2 = column.columns) != null && _column$columns2.every(function (childColumn) {
     return childColumn.isVisible;
@@ -683,6 +704,8 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     } else {
       column.toggleHidden();
     }
+
+    onColumnHide == null ? void 0 : onColumnHide(column, tableInstance.state.hiddenColumns);
   };
 
   return React.createElement(React.Fragment, null, React.createElement(MenuItem, {
@@ -765,7 +788,6 @@ var commonMenuItemStyles$1 = {
 };
 var commonListItemStyles = {
   display: 'flex',
-  gap: '0.75rem',
   alignItems: 'center'
 };
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
@@ -843,15 +865,16 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     setAnchorEl(null);
   };
 
+  var handleShowAllColumns = function handleShowAllColumns() {
+    tableInstance.toggleHideAllColumns(false);
+    setAnchorEl(null);
+  };
+
   var handleOpenFilterModeMenu = function handleOpenFilterModeMenu(event) {
     event.stopPropagation();
     setFilterMenuAnchorEl(event.currentTarget);
   };
 
-  var handleShowAllColumns = function handleShowAllColumns() {
-    tableInstance.toggleHideAllColumns(false);
-  };
-
   var handleOpenShowHideColumnsMenu = function handleOpenShowHideColumnsMenu(event) {
     event.stopPropagation();
     setShowHideColumnsMenuAnchorEl(event.currentTarget);
@@ -873,14 +896,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ClearAllIcon, null), localization.clearSort)), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(ClearAllIcon, null)), localization.clearSort)), React.createElement(MenuItem, {
     disabled: column.isSorted && !column.isSortedDesc,
     key: 1,
     onClick: handleSortAsc,
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(SortIcon, null), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
     divider: !disableFilters || enableColumnGrouping || !disableColumnHiding,
     key: 2,
     disabled: column.isSorted && column.isSortedDesc,
@@ -888,25 +911,25 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(SortIcon, {
+  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, {
     style: {
       transform: 'rotate(180deg) scaleX(-1)'
     }
-  }), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [React.createElement(MenuItem, {
+  })), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [React.createElement(MenuItem, {
     disabled: !column.filterValue,
     key: 0,
     onClick: handleClearFilter,
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(FilterListOffIcon, null), localization.clearFilter)), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(FilterListOffIcon, null)), localization.clearFilter)), React.createElement(MenuItem, {
     divider: enableColumnGrouping || !disableColumnHiding,
     key: 1,
     onClick: handleFilterByColumn,
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(FilterListIcon, null), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.Header))), !column.filterSelectOptions && React.createElement(IconButton, {
+  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.Header))), !column.filterSelectOptions && React.createElement(IconButton, {
     onClick: handleOpenFilterModeMenu,
     onMouseEnter: handleOpenFilterModeMenu,
     size: "small",
@@ -926,20 +949,20 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(DynamicFeedIcon, null), (_localization = localization[column.isGrouped ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), (_localization = localization[column.isGrouped ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React.createElement(MenuItem, {
     key: 0,
     onClick: handleHideColumn,
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(VisibilityOffIcon, null), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
     disabled: !((_tableInstance$state$ = tableInstance.state.hiddenColumns) != null && _tableInstance$state$.length),
     key: 1,
     onClick: handleShowAllColumns,
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ViewColumnIcon, null), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.Header))), !column.filterSelectOptions && React.createElement(IconButton, {
+  }, React.createElement(ListItemIcon, null, React.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.Header))), !column.filterSelectOptions && React.createElement(IconButton, {
     onClick: handleOpenShowHideColumnsMenu,
     onMouseEnter: handleOpenShowHideColumnsMenu,
     size: "small",
@@ -1144,7 +1167,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
     style: _extends({}, muiTableBodyCellEditTextFieldProps == null ? void 0 : muiTableBodyCellEditTextFieldProps.style, (_cell$column$muiTable = cell.column.muiTableBodyCellEditTextFieldProps) == null ? void 0 : _cell$column$muiTable.style)
   });
 
-  if (cell.column.editable && cell.column.Edit) {
+  if (!cell.column.disableEditing && cell.column.Edit) {
     return React.createElement(React.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
       cell: cell
     })));
@@ -1205,7 +1228,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     animation: "wave",
     height: 20,
     width: Math.random() * (120 - 60) + 60
-  }, muiTableBodyCellSkeletonProps)) : (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React.createElement(MRT_EditCellTextField, {
+  }, muiTableBodyCellSkeletonProps)) : !cell.column.disableEditing && (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React.createElement(MRT_EditCellTextField, {
     cell: cell
   }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
 };
@@ -1401,9 +1424,18 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   var _useMRT = useMRT(),
       ExpandMoreIcon = _useMRT.icons.ExpandMoreIcon,
       localization = _useMRT.localization,
+      onRowExpandChange = _useMRT.onRowExpandChange,
       renderDetailPanel = _useMRT.renderDetailPanel,
       densePadding = _useMRT.tableInstance.state.densePadding;
 
+  var handleToggleExpand = function handleToggleExpand(event) {
+    var _row$getToggleRowExpa;
+
+    // @ts-ignore
+    (_row$getToggleRowExpa = row.getToggleRowExpandedProps()) == null ? void 0 : _row$getToggleRowExpa.onClick(event);
+    onRowExpandChange == null ? void 0 : onRowExpandChange(event, row);
+  };
+
   return React.createElement(TableCell, {
     size: "small",
     sx: _extends({}, commonTableBodyButtonCellStyles(densePadding), {
@@ -1414,7 +1446,9 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     "aria-label": localization.expand,
     disabled: !row.canExpand && !renderDetailPanel,
     title: localization.expand
-  }, row.getToggleRowExpandedProps()), React.createElement(ExpandMoreIcon, {
+  }, row.getToggleRowExpandedProps(), {
+    onClick: handleToggleExpand
+  }), React.createElement(ExpandMoreIcon, {
     style: {
       transform: "rotate(" + (!row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0) + "deg)",
       transition: 'transform 0.2s'
@@ -1449,7 +1483,9 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
   }, enableRowEditing && React.createElement(MenuItem, {
     onClick: handleEdit,
     sx: commonMenuItemStyles$1
-  }, React.createElement(EditIcon, null), localization.edit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
+  }, React.createElement(Box, {
+    sx: commonListItemStyles
+  }, React.createElement(ListItemIcon, null, React.createElement(EditIcon, null)), localization.edit)), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
     return setAnchorEl(null);
   })) != null ? _renderRowActionMenuI : null);
 };
@@ -2372,14 +2408,9 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
     hover: true,
     onClick: function onClick(event) {
       return onRowClick == null ? void 0 : onRowClick(event, row);
-    }
-  }, tableRowProps, {
-    sx: function sx(theme) {
-      return _extends({
-        backgroundColor: row.isSelected ? alpha(theme.palette.primary.light, 0.1) : 'transparent'
-      }, tableRowProps == null ? void 0 : tableRowProps.sx);
-    }
-  }), enableRowNumbers && React.createElement(TableCell, {
+    },
+    selected: row.isSelected
+  }, tableRowProps), enableRowNumbers && React.createElement(TableCell, {
     sx: _extends({}, commonTableBodyCellStyles(densePadding))
   }, row.index + 1), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
@@ -2413,9 +2444,7 @@ var MRT_TableBody = function MRT_TableBody() {
   });
 
   return React.createElement(TableBody, Object.assign({}, tableBodyProps, {
-    sx: _extends({
-      overflowY: 'hidden'
-    }, tableBodyProps == null ? void 0 : tableBodyProps.sx)
+    sx: _extends({}, tableBodyProps == null ? void 0 : tableBodyProps.sx)
   }), rows.map(function (row) {
     tableInstance.prepareRow(row);
     return React.createElement(MRT_TableBodyRow, {
@@ -2775,7 +2804,7 @@ var MRT_TablePagination = function MRT_TablePagination() {
     showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2
   }, tablePaginationProps, {
     sx: _extends({
-      p: 0,
+      m: '0 0.5rem',
       position: 'relative',
       zIndex: 2
     }, tablePaginationProps == null ? void 0 : tablePaginationProps.sx)
@@ -2837,6 +2866,34 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
   }, selectMessage, groupedByMessage)));
 };
 
+var MRT_LinearProgressBar = function MRT_LinearProgressBar() {
+  var _useMRT = useMRT(),
+      muiLinearProgressProps = _useMRT.muiLinearProgressProps,
+      isFetching = _useMRT.isFetching,
+      isLoading = _useMRT.isLoading,
+      tableInstance = _useMRT.tableInstance;
+
+  var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps(tableInstance) : muiLinearProgressProps;
+  return React.createElement(Collapse, {
+    "in": isFetching || isLoading,
+    unmountOnExit: true
+  }, React.createElement(LinearProgress, Object.assign({
+    "aria-label": "Loading",
+    "aria-busy": "true"
+  }, linearProgressProps)));
+};
+
+var commonToolbarStyles = function commonToolbarStyles(theme, tableInstance) {
+  return {
+    backgroundColor: theme.palette.background["default"],
+    backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
+    display: 'grid',
+    opacity: tableInstance.state.fullScreen ? 0.95 : 1,
+    p: '0 !important',
+    width: '100%',
+    zIndex: 1
+  };
+};
 var MRT_ToolbarTop = function MRT_ToolbarTop() {
   var _renderToolbarCustomA;
 
@@ -2857,15 +2914,9 @@ var MRT_ToolbarTop = function MRT_ToolbarTop() {
   }, toolbarProps, {
     sx: function sx(theme) {
       return _extends({
-        backgroundColor: theme.palette.background["default"],
-        backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
-        display: 'grid',
-        p: '0 !important',
         position: tableInstance.state.fullScreen ? 'sticky' : undefined,
-        top: tableInstance.state.fullScreen ? '0' : undefined,
-        width: '100%',
-        zIndex: 1
-      }, toolbarProps == null ? void 0 : toolbarProps.sx);
+        top: tableInstance.state.fullScreen ? '0' : undefined
+      }, commonToolbarStyles(theme, tableInstance), toolbarProps == null ? void 0 : toolbarProps.sx);
     }
   }), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, null), React.createElement(Box, {
     sx: {
@@ -2880,7 +2931,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop() {
       position: 'relative',
       zIndex: 3
     }
-  }, !disableGlobalFilter && React.createElement(MRT_SearchTextField, null), !hideToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, null))), React.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)));
+  }, !disableGlobalFilter && React.createElement(MRT_SearchTextField, null), !hideToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, null))), React.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)), React.createElement(MRT_LinearProgressBar, null));
 };
 
 var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
@@ -2899,53 +2950,37 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
   }, toolbarProps, {
     sx: function sx(theme) {
       return _extends({
-        backgroundColor: theme.palette.background["default"],
-        backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
         bottom: tableInstance.state.fullScreen ? '0' : undefined,
-        display: 'flex',
-        justifyContent: 'space-between',
-        overflowY: 'hidden',
-        p: '0 0.5rem !important',
-        position: tableInstance.state.fullScreen ? 'fixed' : undefined,
-        width: 'calc(100% - 1rem)',
-        zIndex: 1
-      }, toolbarProps == null ? void 0 : toolbarProps.sx);
+        position: tableInstance.state.fullScreen ? 'fixed' : undefined
+      }, commonToolbarStyles(theme, tableInstance), toolbarProps == null ? void 0 : toolbarProps.sx);
+    }
+  }), React.createElement(MRT_LinearProgressBar, null), React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      width: '100%'
     }
-  }), !hideToolbarInternalActions && 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));
+  }, !hideToolbarInternalActions && 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 MRT_TableContainer = function MRT_TableContainer() {
   var _useMRT = useMRT(),
       hideToolbarBottom = _useMRT.hideToolbarBottom,
       hideToolbarTop = _useMRT.hideToolbarTop,
-      isFetching = _useMRT.isFetching,
-      isLoading = _useMRT.isLoading,
-      muiLinearProgressProps = _useMRT.muiLinearProgressProps,
       muiTableContainerProps = _useMRT.muiTableContainerProps,
       tableInstance = _useMRT.tableInstance;
 
   var fullScreen = tableInstance.state.fullScreen;
-  var originalBodyOverflowStyle = useRef();
-  useEffect(function () {
-    if (typeof window !== 'undefined') {
-      var _document, _document$body, _document$body$style;
-
-      originalBodyOverflowStyle.current = (_document = document) == null ? void 0 : (_document$body = _document.body) == null ? void 0 : (_document$body$style = _document$body.style) == null ? void 0 : _document$body$style.overflow;
-    }
-  }, []);
   useEffect(function () {
     if (typeof window !== 'undefined') {
       if (fullScreen) {
         document.body.style.overflow = 'hidden';
       } else {
-        var _originalBodyOverflow;
-
-        document.body.style.overflow = (_originalBodyOverflow = originalBodyOverflowStyle.current) != null ? _originalBodyOverflow : 'auto';
+        document.body.style.overflow = 'auto';
       }
     }
   }, [fullScreen]);
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
-  var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps(tableInstance) : muiLinearProgressProps;
   return React.createElement(TableContainer, Object.assign({
     component: Paper
   }, tableContainerProps, {
@@ -2954,6 +2989,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
       height: fullScreen ? '100%' : undefined,
       left: fullScreen ? '0' : undefined,
       m: fullScreen ? '0' : undefined,
+      overflowY: !fullScreen ? 'hidden' : undefined,
       position: fullScreen ? 'fixed' : undefined,
       right: fullScreen ? '0' : undefined,
       top: fullScreen ? '0' : undefined,
@@ -2961,10 +2997,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
       width: fullScreen ? '100vw' : undefined,
       zIndex: fullScreen ? 1200 : 1
     }, tableContainerProps == null ? void 0 : tableContainerProps.sx)
-  }), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), React.createElement(Collapse, {
-    "in": isFetching || isLoading,
-    unmountOnExit: true
-  }, React.createElement(LinearProgress, Object.assign({}, linearProgressProps))), React.createElement(Box, {
+  }), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), React.createElement(Box, {
     sx: {
       maxWidth: '100%',
       overflowX: 'auto'
@@ -3069,10 +3102,13 @@ var MaterialReactTable = (function (_ref) {
       positionToolbarAlertBanner = _ref$positionToolbarA2 === void 0 ? 'top' : _ref$positionToolbarA2,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  return React.createElement(MaterialReactTableProvider, Object.assign({
+  return React.createElement(MaterialReactTableProvider //@ts-ignore
+  , Object.assign({
+    //@ts-ignore
     defaultColumn: defaultColumn,
-    // @ts-ignore
+    //@ts-ignore
     filterTypes: _extends({}, defaultFilterFNs, filterTypes),
+    //@ts-ignore
     globalFilter: globalFilter,
     icons: _extends({}, MRT_Default_Icons, icons),
     localization: _extends({}, MRT_DefaultLocalization_EN, localization),