material-react-table 0.4.2 → 0.4.5

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

@@ -17,6 +17,8 @@ import CancelIcon from '@mui/icons-material/Cancel';
 import SearchIcon from '@mui/icons-material/Search';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import DensityMediumIcon from '@mui/icons-material/DensityMedium';
+import DensitySmallIcon from '@mui/icons-material/DensitySmall';
 import SearchOffIcon from '@mui/icons-material/SearchOff';
 import FilterListIcon from '@mui/icons-material/Fullscreen';
 import FilterListOffIcon$1 from '@mui/icons-material/FullscreenExit';
@@ -332,6 +334,8 @@ var IconButton = /*#__PURE__*/styled(IconButton$2)({
   }
 });
 var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
+  var _localization$columnA;
+
   var column = _ref.column;
 
   var _useMRT = useMRT(),
@@ -347,12 +351,16 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
     setAnchorEl(event.currentTarget);
   };
 
-  return React.createElement(React.Fragment, null, React.createElement(IconButton, {
+  return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: (_localization$columnA = localization == null ? void 0 : localization.columnActionMenuButtonTitle) != null ? _localization$columnA : ''
+  }, React.createElement(IconButton, {
     "aria-label": localization == null ? void 0 : localization.columnActionMenuButtonTitle,
     onClick: handleClick,
-    size: "small",
-    title: localization == null ? void 0 : localization.columnActionMenuButtonTitle
-  }, React.createElement(MoreVertIcon, null)), React.createElement(MRT_ColumnActionMenu, {
+    size: "small"
+  }, React.createElement(MoreVertIcon, null))), React.createElement(MRT_ColumnActionMenu, {
     anchorEl: anchorEl,
     column: column,
     setAnchorEl: setAnchorEl
@@ -397,7 +405,7 @@ var Divider = /*#__PURE__*/styled(Divider$1)({
   maxHeight: '2rem'
 });
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
-  var _column$columns$lengt, _column$columns, _mTableHeadCellProps$, _mcTableHeadCellProps;
+  var _column$columns$lengt, _column$columns, _mTableHeadCellProps$, _mcTableHeadCellProps, _localization$columnA, _localization$columnA2, _localization$columnA3, _localization$columnA4, _localization$columnA5;
 
   var column = _ref2.column;
 
@@ -419,6 +427,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 : {})
   });
 
+  var sortTooltip = column.isSorted ? column.isSortedDesc ? (_localization$columnA = localization == null ? void 0 : localization.columnActionMenuItemClearSort) != null ? _localization$columnA : '' : (_localization$columnA2 = localization == null ? void 0 : (_localization$columnA3 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA3.replace('{column}', column.Header)) != null ? _localization$columnA2 : '' : (_localization$columnA4 = localization == null ? void 0 : (_localization$columnA5 = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA5.replace('{column}', column.Header)) != null ? _localization$columnA4 : '';
   return React.createElement(MRT_StyledTableHeadCell, Object.assign({
     align: isParentHeader ? 'center' : 'left',
     densePadding: densePadding,
@@ -427,11 +436,16 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
     style: {
       justifyContent: isParentHeader ? 'center' : undefined
     }
-  }, React.createElement(CellFlexItem, Object.assign({}, column.getSortByToggleProps()), column.render('Header'), !isParentHeader && column.canSort && React.createElement(TableSortLabel, {
-    "aria-label": column.isSorted ? column.sortDescFirst ? localization == null ? void 0 : localization.columnActionMenuItemClearSort : localization == null ? void 0 : localization.columnActionMenuItemSortDesc : localization == null ? void 0 : localization.columnActionMenuItemSortAsc,
+  }, React.createElement(CellFlexItem, Object.assign({}, column.getSortByToggleProps(), {
+    title: undefined
+  }), column.render('Header'), !isParentHeader && column.canSort && React.createElement(Tooltip, {
+    arrow: true,
+    title: sortTooltip
+  }, React.createElement(TableSortLabel, {
+    "aria-label": sortTooltip,
     active: column.isSorted,
     direction: column.isSortedDesc ? 'desc' : 'asc'
-  })), React.createElement(CellFlexItem, null, !disableColumnActions && !isParentHeader && React.createElement(MRT_ToggleColumnActionMenuButton, {
+  }))), React.createElement(CellFlexItem, null, !disableColumnActions && !isParentHeader && React.createElement(MRT_ToggleColumnActionMenuButton, {
     column: column
   }), enableColumnResizing && !isParentHeader && React.createElement(Divider, Object.assign({
     flexItem: true,
@@ -459,23 +473,47 @@ var MRT_TableButtonCell = /*#__PURE__*/styled(TableCell$3, {
   };
 });
 
-var MRT_SelectAllCheckbox = function MRT_SelectAllCheckbox() {
-  var _localization$selectA;
+var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
+  var _localization$selectA, _localization$selectC, _localization$selectA2, _localization$selectC2;
+
+  var row = _ref.row,
+      selectAll = _ref.selectAll;
 
   var _useMRT = useMRT(),
-      tableInstance = _useMRT.tableInstance,
-      disableSelectAll = _useMRT.disableSelectAll,
       densePadding = _useMRT.densePadding,
-      localization = _useMRT.localization;
+      localization = _useMRT.localization,
+      onRowSelectChange = _useMRT.onRowSelectChange,
+      onSelectAllChange = _useMRT.onSelectAllChange,
+      tableInstance = _useMRT.tableInstance;
 
+  var onSelectChange = function onSelectChange(event) {
+    if (selectAll) {
+      onSelectAllChange == null ? void 0 : onSelectAllChange(event, tableInstance.selectedFlatRows);
+      tableInstance.toggleAllRowsSelected(event.target.checked);
+    } else if (row) {
+      var _row$getToggleRowSele;
+
+      row == null ? void 0 : (_row$getToggleRowSele = row.getToggleRowSelectedProps()) == null ? void 0 : _row$getToggleRowSele.onChange == null ? void 0 : _row$getToggleRowSele.onChange(event);
+      onRowSelectChange == null ? void 0 : onRowSelectChange(event, row, tableInstance.selectedFlatRows);
+    }
+  };
+
+  var checkboxProps = selectAll ? tableInstance.getToggleAllRowsSelectedProps() : row == null ? void 0 : row.getToggleRowSelectedProps();
   return React.createElement(MRT_TableButtonCell, {
-    densePadding: densePadding,
-    variant: "head"
-  }, !disableSelectAll ? React.createElement(Checkbox, Object.assign({
+    densePadding: densePadding
+  }, React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: selectAll ? (_localization$selectA = localization == null ? void 0 : localization.selectAllCheckboxTitle) != null ? _localization$selectA : '' : (_localization$selectC = localization == null ? void 0 : localization.selectCheckboxTitle) != null ? _localization$selectC : ''
+  }, React.createElement(Checkbox, Object.assign({
     inputProps: {
-      'aria-label': (_localization$selectA = localization == null ? void 0 : localization.selectAllCheckboxTitle) != null ? _localization$selectA : ''
-    }
-  }, tableInstance.getToggleAllPageRowsSelectedProps())) : null);
+      'aria-label': selectAll ? (_localization$selectA2 = localization == null ? void 0 : localization.selectAllCheckboxTitle) != null ? _localization$selectA2 : '' : (_localization$selectC2 = localization == null ? void 0 : localization.selectCheckboxTitle) != null ? _localization$selectC2 : ''
+    },
+    onChange: onSelectChange
+  }, checkboxProps, {
+    title: undefined
+  }))));
 };
 
 var ArrowRightIcon = /*#__PURE__*/styled(MuiArrowRightIcon, {
@@ -548,8 +586,9 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
   var _useMRT = useMRT(),
       anyRowsCanExpand = _useMRT.anyRowsCanExpand,
       disableExpandAll = _useMRT.disableExpandAll,
-      enableRowNumbers = _useMRT.enableRowNumbers,
       enableRowActions = _useMRT.enableRowActions,
+      enableRowEditing = _useMRT.enableRowEditing,
+      enableRowNumbers = _useMRT.enableRowNumbers,
       enableSelection = _useMRT.enableSelection,
       muiTableHeadRowProps = _useMRT.muiTableHeadRowProps,
       positionActionsColumn = _useMRT.positionActionsColumn,
@@ -569,16 +608,18 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
     style: _extends({}, headerGroup.getHeaderGroupProps().style, (_mTableHeadRowProps$s = mTableHeadRowProps == null ? void 0 : mTableHeadRowProps.style) != null ? _mTableHeadRowProps$s : {})
   });
 
-  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), enableRowNumbers && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(MRT_StyledTableHeadCell, null, "#")), enableRowActions && positionActionsColumn === 'first' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(MRT_TableHeadCellActions, null)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React.createElement(MRT_ExpandAllButton, null) : React.createElement(MRT_TableSpacerCell, {
+  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), enableRowNumbers && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(MRT_StyledTableHeadCell, null, "#")), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(MRT_TableHeadCellActions, null)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React.createElement(MRT_ExpandAllButton, null) : React.createElement(MRT_TableSpacerCell, {
     width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
-  }) : null, enableSelection ? !isParentHeader ? React.createElement(MRT_SelectAllCheckbox, null) : React.createElement(MRT_TableSpacerCell, {
+  }) : null, enableSelection ? !isParentHeader ? React.createElement(MRT_SelectCheckbox, {
+    selectAll: true
+  }) : React.createElement(MRT_TableSpacerCell, {
     width: "1rem"
   }) : null, headerGroup.headers.map(function (column) {
     return React.createElement(MRT_TableHeadCell, {
       key: column.getHeaderProps().key,
       column: column
     });
-  }), enableRowActions && positionActionsColumn === 'last' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(MRT_TableHeadCellActions, null)));
+  }), (enableRowActions || enableRowEditing) && positionActionsColumn === 'last' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(MRT_TableHeadCellActions, null)));
 };
 
 var MRT_TableHead = function MRT_TableHead() {
@@ -602,7 +643,6 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 
   var _useMRT = useMRT(),
       currentEditingRow = _useMRT.currentEditingRow,
-      localization = _useMRT.localization,
       muiTableBodyCellEditTextFieldProps = _useMRT.muiTableBodyCellEditTextFieldProps,
       setCurrentEditingRow = _useMRT.setCurrentEditingRow;
 
@@ -634,7 +674,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
-    placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
+    placeholder: cell.column.Header,
     value: cell.value,
     variant: "standard"
   }, textFieldProps));
@@ -774,32 +814,6 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
   })));
 };
 
-var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
-  var row = _ref.row;
-
-  var _useMRT = useMRT(),
-      tableInstance = _useMRT.tableInstance,
-      onRowSelectChange = _useMRT.onRowSelectChange,
-      densePadding = _useMRT.densePadding,
-      localization = _useMRT.localization;
-
-  var onSelectChange = function onSelectChange(event) {
-    var _row$getToggleRowSele;
-
-    (_row$getToggleRowSele = row.getToggleRowSelectedProps()) == null ? void 0 : _row$getToggleRowSele.onChange == null ? void 0 : _row$getToggleRowSele.onChange(event);
-    onRowSelectChange == null ? void 0 : onRowSelectChange(event, row, tableInstance.selectedFlatRows);
-  };
-
-  return React.createElement(MRT_TableButtonCell, {
-    densePadding: densePadding
-  }, React.createElement(Checkbox, Object.assign({
-    inputProps: {
-      'aria-label': localization == null ? void 0 : localization.selectCheckboxTitle
-    },
-    onChange: onSelectChange
-  }, row.getToggleRowSelectedProps())));
-};
-
 var MenuItem$1 = /*#__PURE__*/styled(MenuItem$2)({
   display: 'flex',
   gap: '0.75rem'
@@ -1734,6 +1748,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
   var _useMRT = useMRT(),
       anyRowsCanExpand = _useMRT.anyRowsCanExpand,
       enableRowActions = _useMRT.enableRowActions,
+      enableRowEditing = _useMRT.enableRowEditing,
       enableRowNumbers = _useMRT.enableRowNumbers,
       enableSelection = _useMRT.enableSelection,
       muiTableBodyRowProps = _useMRT.muiTableBodyRowProps,
@@ -1753,7 +1768,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
     onClick: function onClick(event) {
       return onRowClick == null ? void 0 : onRowClick(event, row);
     }
-  }, tableRowProps), enableRowNumbers && React.createElement(MRT_StyledTableBodyCell, null, row.index + 1), enableRowActions && positionActionsColumn === 'first' && React.createElement(MRT_ToggleRowActionMenuButton, {
+  }, tableRowProps), enableRowNumbers && React.createElement(MRT_StyledTableBodyCell, null, row.index + 1), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
   }), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_ExpandButton, {
     row: row
@@ -1764,7 +1779,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
       key: cell.getCellProps().key,
       cell: cell
     });
-  }), enableRowActions && positionActionsColumn === 'last' && React.createElement(MRT_ToggleRowActionMenuButton, {
+  }), (enableRowActions || enableRowEditing) && positionActionsColumn === 'last' && React.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
   })), renderDetailPanel && React.createElement(MRT_TableDetailPanel, {
     row: row
@@ -1843,15 +1858,16 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
   var footerGroup = _ref.footerGroup;
 
   var _useMRT = useMRT(),
-      renderDetailPanel = _useMRT.renderDetailPanel,
-      columns = _useMRT.columns,
       anyRowsCanExpand = _useMRT.anyRowsCanExpand,
-      enableSelection = _useMRT.enableSelection,
+      columns = _useMRT.columns,
       enableRowActions = _useMRT.enableRowActions,
+      enableRowEditing = _useMRT.enableRowEditing,
       enableRowNumbers = _useMRT.enableRowNumbers,
+      enableSelection = _useMRT.enableSelection,
+      muiTableFooterRowProps = _useMRT.muiTableFooterRowProps,
       positionActionsColumn = _useMRT.positionActionsColumn,
-      tableInstance = _useMRT.tableInstance,
-      muiTableFooterRowProps = _useMRT.muiTableFooterRowProps; //if no content in row, skip row
+      renderDetailPanel = _useMRT.renderDetailPanel,
+      tableInstance = _useMRT.tableInstance; //if no content in row, skip row
 
 
   if (!(columns != null && columns.some(function (c) {
@@ -1863,7 +1879,7 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
     style: _extends({}, footerGroup.getFooterGroupProps().style, (_mTableFooterRowProps = mTableFooterRowProps == null ? void 0 : mTableFooterRowProps.style) != null ? _mTableFooterRowProps : {})
   });
 
-  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), enableRowNumbers && React.createElement(MRT_TableSpacerCell, null), enableRowActions && positionActionsColumn === 'first' && React.createElement(MRT_TableSpacerCell, null), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_TableSpacerCell, {
+  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), enableRowNumbers && React.createElement(MRT_TableSpacerCell, null), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React.createElement(MRT_TableSpacerCell, null), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_TableSpacerCell, {
     width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
   }), enableSelection && React.createElement(MRT_TableSpacerCell, {
     width: "1rem"
@@ -1872,7 +1888,7 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
       key: column.getFooterProps().key,
       column: column
     });
-  }), enableRowActions && positionActionsColumn === 'last' && React.createElement(MRT_TableSpacerCell, null));
+  }), (enableRowActions || enableRowEditing) && positionActionsColumn === 'last' && React.createElement(MRT_TableSpacerCell, null));
 };
 
 var MRT_TableFooter = function MRT_TableFooter() {
@@ -1964,9 +1980,11 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
   }, muiSearchTextFieldProps)));
 };
 
-var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton() {
+var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
   var _localization$toggleF;
 
+  var rest = _extends({}, _ref);
+
   var _useMRT = useMRT(),
       localization = _useMRT.localization,
       setShowFilters = _useMRT.setShowFilters,
@@ -1975,13 +1993,13 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton() {
   return React.createElement(Tooltip, {
     arrow: true,
     title: (_localization$toggleF = localization == null ? void 0 : localization.toggleFilterButtonTitle) != null ? _localization$toggleF : ''
-  }, React.createElement(IconButton$2, {
+  }, React.createElement(IconButton$2, Object.assign({
     "aria-label": localization == null ? void 0 : localization.toggleFilterButtonTitle,
     onClick: function onClick() {
       return setShowFilters(!showFilters);
     },
     size: "small"
-  }, showFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterIcon, null)));
+  }, rest), showFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterIcon, null)));
 };
 
 var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
@@ -2030,9 +2048,11 @@ var MenuButtons = /*#__PURE__*/styled('div')({
   justifyContent: 'space-between',
   padding: '0 0.5rem 0.5rem 0.5rem'
 });
-var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
+var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
   var _localization$showHid;
 
+  var rest = _extends({}, _ref);
+
   var _useMRT = useMRT(),
       tableInstance = _useMRT.tableInstance,
       localization = _useMRT.localization;
@@ -2048,11 +2068,11 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
   return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
     arrow: true,
     title: (_localization$showHid = localization == null ? void 0 : localization.showHideColumnsButtonTitle) != null ? _localization$showHid : ''
-  }, React.createElement(IconButton$2, {
+  }, React.createElement(IconButton$2, Object.assign({
     "aria-label": localization == null ? void 0 : localization.showHideColumnsButtonTitle,
     onClick: handleClick,
     size: "small"
-  }, React.createElement(ViewColumnIcon, null))), React.createElement(Menu, {
+  }, rest), React.createElement(ViewColumnIcon, null))), React.createElement(Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
     onClose: function onClose() {
@@ -2076,8 +2096,10 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
   })));
 };
 
-var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
-  var _localization$toggleD, _localization$toggleD2;
+var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
+  var _localization$toggleD;
+
+  var rest = _extends({}, _ref);
 
   var _useMRT = useMRT(),
       densePadding = _useMRT.densePadding,
@@ -2087,22 +2109,20 @@ var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
   return React.createElement(Tooltip, {
     arrow: true,
     title: (_localization$toggleD = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD : ''
-  }, React.createElement(Switch, {
-    inputProps: {
-      'aria-label': (_localization$toggleD2 = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD2 : ''
-    },
-    color: "default",
-    checked: densePadding,
-    size: "small",
-    onChange: function onChange() {
+  }, React.createElement(IconButton$2, Object.assign({
+    "aria-label": localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle,
+    onClick: function onClick() {
       return setDensePadding(!densePadding);
-    }
-  }));
+    },
+    size: "small"
+  }, rest), densePadding ? React.createElement(DensitySmallIcon, null) : React.createElement(DensityMediumIcon, null)));
 };
 
-var MRT_ToggleSearchButton = function MRT_ToggleSearchButton() {
+var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
   var _localization$toggleS;
 
+  var rest = _extends({}, _ref);
+
   var _useMRT = useMRT(),
       localization = _useMRT.localization,
       setShowSearch = _useMRT.setShowSearch,
@@ -2121,15 +2141,17 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton() {
   return React.createElement(Tooltip, {
     arrow: true,
     title: (_localization$toggleS = localization == null ? void 0 : localization.toggleSearchButtonTitle) != null ? _localization$toggleS : ''
-  }, React.createElement(IconButton$2, {
+  }, React.createElement(IconButton$2, Object.assign({
     size: "small",
     onClick: handleToggleSearch
-  }, showSearch ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
+  }, rest), showSearch ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
 };
 
-var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton() {
+var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
   var _localization$toggleF;
 
+  var rest = _extends({}, _ref);
+
   var _useMRT = useMRT(),
       localization = _useMRT.localization,
       setFullScreen = _useMRT.setFullScreen,
@@ -2138,13 +2160,13 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton() {
   return React.createElement(Tooltip, {
     arrow: true,
     title: (_localization$toggleF = localization == null ? void 0 : localization.toggleFullScreenButtonTitle) != null ? _localization$toggleF : ''
-  }, React.createElement(IconButton$2, {
+  }, React.createElement(IconButton$2, Object.assign({
     "aria-label": localization == null ? void 0 : localization.toggleFilterButtonTitle,
     onClick: function onClick() {
       return setFullScreen(!fullScreen);
     },
     size: "small"
-  }, fullScreen ? React.createElement(FilterListOffIcon$1, null) : React.createElement(FilterListIcon, null)));
+  }, rest), fullScreen ? React.createElement(FilterListOffIcon$1, null) : React.createElement(FilterListIcon, null)));
 };
 
 var ToolbarButtonsContainer = /*#__PURE__*/styled('div')({
@@ -2158,9 +2180,21 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons() {
       disableColumnHiding = _useMRT.disableColumnHiding,
       disableDensePaddingToggle = _useMRT.disableDensePaddingToggle,
       disableGlobalFilter = _useMRT.disableGlobalFilter,
-      disableFullScreenToggle = _useMRT.disableFullScreenToggle;
+      disableFullScreenToggle = _useMRT.disableFullScreenToggle,
+      renderToolbarInternalActions = _useMRT.renderToolbarInternalActions,
+      tableInstance = _useMRT.tableInstance;
+
+  if (renderToolbarInternalActions) {
+    return React.createElement(React.Fragment, null, renderToolbarInternalActions(tableInstance, {
+      MRT_ToggleSearchButton: MRT_ToggleSearchButton,
+      MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
+      MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
+      MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
+      MRT_FullScreenToggleButton: MRT_FullScreenToggleButton
+    }));
+  }
 
-  return React.createElement(ToolbarButtonsContainer, null, !disableGlobalFilter && React.createElement(MRT_ToggleSearchButton, null), !disableFilters && React.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React.createElement(MRT_DensePaddingSwitch, null), !disableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, null));
+  return React.createElement(ToolbarButtonsContainer, null, !disableGlobalFilter && React.createElement(MRT_ToggleSearchButton, null), !disableFilters && React.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React.createElement(MRT_ToggleDensePaddingButton, null), !disableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, null));
 };
 
 var MRT_TablePagination = function MRT_TablePagination() {
@@ -2184,6 +2218,11 @@ var MRT_TablePagination = function MRT_TablePagination() {
     onRowsPerPageChange: handleChangeRowsPerPage,
     page: tableInstance.state.pageIndex,
     rowsPerPage: tableInstance.state.pageSize,
+    SelectProps: {
+      style: {
+        margin: '0 1rem 0 1ch'
+      }
+    },
     showFirstButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
     showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
     style: {
@@ -2254,12 +2293,26 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
   }, alertProps), selectMessage, groupedByMessage));
 };
 
-var Toolbar = /*#__PURE__*/styled(Toolbar$2)({
-  display: 'grid',
-  padding: '0 0.5rem !important'
+var Toolbar = /*#__PURE__*/styled(Toolbar$2, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'fullScreen';
+  }
+})(function (_ref) {
+  var fullScreen = _ref.fullScreen,
+      theme = _ref.theme;
+  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',
+    padding: '0 0.5rem !important',
+    position: fullScreen ? 'sticky' : undefined,
+    top: fullScreen ? '0' : undefined,
+    width: 'calc(100% - 1rem)',
+    zIndex: 1
+  };
 });
 var ToolbarTopRow = /*#__PURE__*/styled('div')({
-  padding: '1rem 0.5rem',
+  padding: '0.5rem',
   display: 'flex',
   justifyContent: 'space-between'
 });
@@ -2274,41 +2327,59 @@ var MRT_ToolbarTop = function MRT_ToolbarTop() {
 
   var _useMRT = useMRT(),
       disableGlobalFilter = _useMRT.disableGlobalFilter,
-      hideToolbarActions = _useMRT.hideToolbarActions,
+      hideToolbarInternalActions = _useMRT.hideToolbarInternalActions,
       manualPagination = _useMRT.manualPagination,
       muiTableToolbarTopProps = _useMRT.muiTableToolbarTopProps,
       positionPagination = _useMRT.positionPagination,
       positionToolbarActions = _useMRT.positionToolbarActions,
+      fullScreen = _useMRT.fullScreen,
       positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
       renderToolbarCustomActions = _useMRT.renderToolbarCustomActions,
       tableInstance = _useMRT.tableInstance;
 
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
   return React.createElement(Toolbar, Object.assign({
+    fullScreen: fullScreen,
     variant: "dense"
-  }, toolbarProps), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, null), React.createElement(ToolbarTopRow, null, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React.createElement("span", null), React.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, null))), React.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)));
+  }, toolbarProps), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, null), React.createElement(ToolbarTopRow, null, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React.createElement("span", null), React.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React.createElement(MRT_SearchTextField, null), !hideToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, null))), React.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)));
 };
 
-var Toolbar$1 = /*#__PURE__*/styled(Toolbar$2)({
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 0.5rem !important',
-  overflowY: 'hidden'
+var Toolbar$1 = /*#__PURE__*/styled(Toolbar$2, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'fullScreen';
+  }
+})(function (_ref) {
+  var fullScreen = _ref.fullScreen,
+      theme = _ref.theme;
+  return {
+    backgroundColor: theme.palette.background["default"],
+    backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
+    bottom: fullScreen ? '0' : undefined,
+    display: 'flex',
+    justifyContent: 'space-between',
+    overflowY: 'hidden',
+    padding: '0 0.5rem !important',
+    position: fullScreen ? 'fixed' : undefined,
+    width: 'calc(100% - 1rem)',
+    zIndex: 1
+  };
 });
 var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
   var _useMRT = useMRT(),
-      hideToolbarActions = _useMRT.hideToolbarActions,
+      hideToolbarInternalActions = _useMRT.hideToolbarInternalActions,
       manualPagination = _useMRT.manualPagination,
       muiTableToolbarBottomProps = _useMRT.muiTableToolbarBottomProps,
       positionPagination = _useMRT.positionPagination,
+      fullScreen = _useMRT.fullScreen,
       positionToolbarActions = _useMRT.positionToolbarActions,
       positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
       tableInstance = _useMRT.tableInstance;
 
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
   return React.createElement(Toolbar$1, Object.assign({
+    fullScreen: fullScreen,
     variant: "dense"
-  }, toolbarProps), !hideToolbarActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarInternalButtons, null) : React.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null));
+  }, toolbarProps), !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 TableContainer = /*#__PURE__*/styled(TableContainer$1, {
@@ -2322,7 +2393,7 @@ var TableContainer = /*#__PURE__*/styled(TableContainer$1, {
     height: fullScreen ? '100%' : undefined,
     left: fullScreen ? '0' : undefined,
     margin: fullScreen ? '0' : undefined,
-    position: fullScreen ? 'absolute' : undefined,
+    position: fullScreen ? 'fixed' : undefined,
     right: fullScreen ? '0' : undefined,
     top: fullScreen ? '0' : undefined,
     transition: 'all 0.2s ease-in-out',
@@ -2366,7 +2437,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
 var defaultLocalization = {
   actionsHeadColumnTitle: 'Actions',
   columnActionMenuButtonTitle: 'Column Actions',
-  columnActionMenuItemClearSort: 'Clear sorting',
+  columnActionMenuItemClearSort: 'Clear sort',
   columnActionMenuItemGroupBy: 'Group by {column}',
   columnActionMenuItemHideColumn: 'Hide {column} column',
   columnActionMenuItemSortAsc: 'Sort by {column} ascending',
@@ -2385,8 +2456,8 @@ var defaultLocalization = {
   rowActionsColumnTitle: 'Actions',
   searchTextFieldClearButtonTitle: 'Clear search',
   searchTextFieldPlaceholder: 'Search',
-  selectAllCheckboxTitle: 'Select all',
-  selectCheckboxTitle: 'Select row',
+  selectAllCheckboxTitle: 'Toggle select all',
+  selectCheckboxTitle: 'Toggle select row',
   showHideColumnsButtonTitle: 'Show/Hide columns',
   toggleDensePaddingSwitchTitle: 'Toggle dense padding',
   toggleFilterButtonTitle: 'Toggle filters',