material-react-table 0.4.4 → 0.4.7

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

@@ -1,27 +1,28 @@
-import React, { useMemo, useState, useContext, createContext, Fragment, useEffect } from 'react';
+import React, { useMemo, useState, useContext, createContext, Fragment, useRef, useEffect } from 'react';
 import { useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns, useFlexLayout, useAsyncDebounce } from 'react-table';
 import { TextField as TextField$1, Tooltip, InputAdornment, IconButton as IconButton$2, Menu, Divider as Divider$1, styled, MenuItem as MenuItem$2, TableCell as TableCell$3, TableSortLabel, Collapse, Checkbox, TableRow as TableRow$1, TableHead, alpha, TableBody as TableBody$1, TableFooter, Table, FormControlLabel, Switch, Button, TablePagination, useMediaQuery, Chip, Alert as Alert$1, Toolbar as Toolbar$2, Paper, LinearProgress, CircularProgress, TableContainer as TableContainer$1 } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import FilterIcon from '@mui/icons-material/FilterList';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
+import CancelIcon from '@mui/icons-material/Cancel';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
-import SortIcon from '@mui/icons-material/Sort';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import CloseIcon from '@mui/icons-material/Close';
+import DensityMediumIcon from '@mui/icons-material/DensityMedium';
+import DensitySmallIcon from '@mui/icons-material/DensitySmall';
+import DoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
-import MuiArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
-import MuiExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import EditIcon from '@mui/icons-material/Edit';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import FilterListOffIcon from '@mui/icons-material/FilterListOff';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 import SaveIcon from '@mui/icons-material/Save';
-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';
+import SortIcon from '@mui/icons-material/Sort';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -159,11 +160,14 @@ var useMRT = function useMRT() {
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterT, _localization$filterT2, _localization$filterT3, _localization$filterT4;
+  var _localization$filterT, _localization$filterT2, _localization$filterT3;
 
   var column = _ref.column;
 
   var _useMRT = useMRT(),
+      _useMRT$icons = _useMRT.icons,
+      FilterListIcon = _useMRT$icons.FilterListIcon,
+      CloseIcon = _useMRT$icons.CloseIcon,
       localization = _useMRT.localization;
 
   var _useState = useState(''),
@@ -194,7 +198,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       }
     },
     margin: "dense",
-    placeholder: localization == null ? void 0 : (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)),
+    placeholder: (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)),
     onChange: function onChange(e) {
       setFilterValue(e.target.value);
       handleChange(e.target.value);
@@ -207,17 +211,17 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     InputProps: {
       startAdornment: React.createElement(Tooltip, {
         arrow: true,
-        title: (_localization$filterT2 = localization == null ? void 0 : (_localization$filterT3 = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT3.replace('{column}', String(column.Header))) != null ? _localization$filterT2 : ''
+        title: (_localization$filterT2 = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT2.replace('{column}', String(column.Header))
       }, React.createElement(InputAdornment, {
         position: "start"
-      }, React.createElement(FilterIcon, null))),
+      }, React.createElement(FilterListIcon, null))),
       endAdornment: React.createElement(InputAdornment, {
         position: "end"
       }, React.createElement(Tooltip, {
         arrow: true,
-        title: (_localization$filterT4 = localization == null ? void 0 : localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT4 : ''
+        title: (_localization$filterT3 = localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT3 : ''
       }, React.createElement("span", null, React.createElement(IconButton$2, {
-        "aria-label": localization == null ? void 0 : localization.filterTextFieldClearButtonTitle,
+        "aria-label": localization.filterTextFieldClearButtonTitle,
         disabled: (filterValue == null ? void 0 : filterValue.length) === 0,
         onClick: handleClear,
         size: "small"
@@ -245,7 +249,13 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       disableSortBy = _useMRT.disableSortBy,
       enableColumnGrouping = _useMRT.enableColumnGrouping,
       localization = _useMRT.localization,
-      setShowFilters = _useMRT.setShowFilters;
+      setShowFilters = _useMRT.setShowFilters,
+      _useMRT$icons = _useMRT.icons,
+      FilterListIcon = _useMRT$icons.FilterListIcon,
+      SortIcon = _useMRT$icons.SortIcon,
+      ClearAllIcon = _useMRT$icons.ClearAllIcon,
+      DynamicFeedIcon = _useMRT$icons.DynamicFeedIcon,
+      VisibilityOffIcon = _useMRT$icons.VisibilityOffIcon;
 
   var handleClearSort = function handleClearSort() {
     column.clearSortBy();
@@ -293,11 +303,11 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     key: 1,
     disabled: !column.isSorted,
     onClick: handleClearSort
-  }, React.createElement(ClearAllIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemClearSort), React.createElement(MenuItem, {
+  }, React.createElement(ClearAllIcon, null), " ", localization.columnActionMenuItemClearSort), React.createElement(MenuItem, {
     key: 2,
     disabled: column.isSorted && !column.isSortedDesc,
     onClick: handleSortAsc
-  }, React.createElement(SortIcon, null), ' ', localization == null ? void 0 : (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header))), React.createElement(MenuItem, {
+  }, React.createElement(SortIcon, null), ' ', (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header))), React.createElement(MenuItem, {
     key: 3,
     disabled: column.isSorted && column.isSortedDesc,
     onClick: handleSortDesc
@@ -305,22 +315,22 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     style: {
       transform: 'rotate(180deg) scaleX(-1)'
     }
-  }), ' ', localization == null ? void 0 : (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header)))], !disableFilters && column.canFilter && [React.createElement(Divider$1, {
+  }), ' ', (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header)))], !disableFilters && column.canFilter && [React.createElement(Divider$1, {
     key: 0
   }), React.createElement(MenuItem, {
     key: 1,
     onClick: handleFilterByColumn
-  }, React.createElement(FilterIcon, null), ' ', localization == null ? void 0 : (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)))], enableColumnGrouping && column.canGroupBy && [React.createElement(Divider$1, {
+  }, React.createElement(FilterListIcon, null), ' ', (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)))], enableColumnGrouping && column.canGroupBy && [React.createElement(Divider$1, {
     key: 1
   }), React.createElement(MenuItem, {
     key: 2,
     onClick: handleGroupByColumn
-  }, React.createElement(DynamicFeedIcon, null), ' ', localization == null ? void 0 : (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header)))], !disableColumnHiding && [React.createElement(Divider$1, {
+  }, React.createElement(DynamicFeedIcon, null), ' ', (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header)))], !disableColumnHiding && [React.createElement(Divider$1, {
     key: 0
   }), React.createElement(MenuItem, {
     key: 1,
     onClick: handleHideColumn
-  }, React.createElement(VisibilityOffIcon, null), ' ', localization == null ? void 0 : (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header)))]);
+  }, React.createElement(VisibilityOffIcon, null), ' ', (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header)))]);
 };
 
 var IconButton = /*#__PURE__*/styled(IconButton$2)({
@@ -337,7 +347,8 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   var column = _ref.column;
 
   var _useMRT = useMRT(),
-      localization = _useMRT.localization;
+      localization = _useMRT.localization,
+      MoreVertIcon = _useMRT.icons.MoreVertIcon;
 
   var _useState = useState(null),
       anchorEl = _useState[0],
@@ -349,12 +360,16 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
     setAnchorEl(event.currentTarget);
   };
 
-  return React.createElement(React.Fragment, null, React.createElement(IconButton, {
-    "aria-label": localization == null ? void 0 : localization.columnActionMenuButtonTitle,
+  return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: localization.columnActionMenuButtonTitle
+  }, React.createElement(IconButton, {
+    "aria-label": 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
@@ -399,7 +414,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;
 
   var column = _ref2.column;
 
@@ -421,6 +436,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.columnActionMenuItemClearSort : (_localization$columnA = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA.replace('{column}', column.Header) : (_localization$columnA2 = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA2.replace('{column}', column.Header);
   return React.createElement(MRT_StyledTableHeadCell, Object.assign({
     align: isParentHeader ? 'center' : 'left',
     densePadding: densePadding,
@@ -429,11 +445,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,
@@ -461,52 +482,68 @@ var MRT_TableButtonCell = /*#__PURE__*/styled(TableCell$3, {
   };
 });
 
-var MRT_SelectAllCheckbox = function MRT_SelectAllCheckbox() {
-  var _localization$selectA;
+var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
+  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) {
+      var _tableInstance$getTog;
+
+      tableInstance == null ? void 0 : tableInstance.getToggleAllRowsSelectedProps == null ? void 0 : (_tableInstance$getTog = tableInstance.getToggleAllRowsSelectedProps()) == null ? void 0 : _tableInstance$getTog.onChange == null ? void 0 : _tableInstance$getTog.onChange(event);
+      onSelectAllChange == null ? void 0 : onSelectAllChange(event, tableInstance.selectedFlatRows);
+    } 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.selectAllCheckboxTitle : localization.selectCheckboxTitle
+  }, 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.selectAllCheckboxTitle : localization.selectCheckboxTitle
+    },
+    onChange: onSelectChange
+  }, checkboxProps, {
+    title: undefined
+  }))));
 };
 
-var ArrowRightIcon = /*#__PURE__*/styled(MuiArrowRightIcon, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'rotation';
-  }
-})(function (_ref) {
-  var rotation = _ref.rotation;
-  return {
-    transform: "rotate(" + rotation + "deg)",
-    transition: 'transform 0.2s'
-  };
-});
 var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
   var _useMRT = useMRT(),
       tableInstance = _useMRT.tableInstance,
       localization = _useMRT.localization,
       anyRowsExpanded = _useMRT.anyRowsExpanded,
-      densePadding = _useMRT.densePadding;
+      densePadding = _useMRT.densePadding,
+      DoubleArrowDownIcon = _useMRT.icons.DoubleArrowDownIcon;
 
   return React.createElement(MRT_TableButtonCell, Object.assign({
     size: "small",
     densePadding: densePadding
   }, tableInstance.getToggleAllRowsExpandedProps()), React.createElement(IconButton$2, {
-    "aria-label": localization == null ? void 0 : localization.expandAllButtonTitle,
-    title: localization == null ? void 0 : localization.expandAllButtonTitle
-  }, React.createElement(ArrowRightIcon, {
-    fontSize: "small",
-    rotation: tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
+    "aria-label": localization.expandAllButtonTitle,
+    title: localization.expandAllButtonTitle
+  }, React.createElement(DoubleArrowDownIcon, {
+    style: {
+      transform: "rotate(" + (tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0) + "deg)",
+      transition: 'transform 0.2s'
+    }
   })));
 };
 
@@ -539,7 +576,7 @@ var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
     style: {
       textAlign: 'center'
     }
-  }, localization == null ? void 0 : localization.actionsHeadColumnTitle);
+  }, localization.actionsHeadColumnTitle);
 };
 
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
@@ -550,8 +587,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,
@@ -571,16 +609,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() {
@@ -604,7 +644,6 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 
   var _useMRT = useMRT(),
       currentEditingRow = _useMRT.currentEditingRow,
-      localization = _useMRT.localization,
       muiTableBodyCellEditTextFieldProps = _useMRT.muiTableBodyCellEditTextFieldProps,
       setCurrentEditingRow = _useMRT.setCurrentEditingRow;
 
@@ -636,7 +675,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));
@@ -696,29 +735,24 @@ var TableCell = /*#__PURE__*/styled(TableCell$3, {
   };
 });
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
-  var _mTableBodyRowProps$s, _mTableDetailPanelPro;
+  var _mTableBodyRowProps$s;
 
   var row = _ref2.row;
 
   var _useMRT = useMRT(),
-      tableInstance = _useMRT.tableInstance,
-      renderDetailPanel = _useMRT.renderDetailPanel,
-      muiTableDetailPanelProps = _useMRT.muiTableDetailPanelProps,
       muiTableBodyRowProps = _useMRT.muiTableBodyRowProps,
-      onDetailPanelClick = _useMRT.onDetailPanelClick;
+      muiTableDetailPanelProps = _useMRT.muiTableDetailPanelProps,
+      onDetailPanelClick = _useMRT.onDetailPanelClick,
+      renderDetailPanel = _useMRT.renderDetailPanel,
+      tableInstance = _useMRT.tableInstance;
 
   var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
 
-  var tableRowProps = _extends({}, mTableBodyRowProps, row.getToggleRowExpandedProps(), {
-    style: _extends({}, row.getToggleRowExpandedProps().style, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
-  });
-
-  var mTableDetailPanelProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps(row) : muiTableDetailPanelProps;
-
-  var tableCellProps = _extends({}, mTableDetailPanelProps, {
-    style: _extends({}, (_mTableDetailPanelPro = mTableDetailPanelProps == null ? void 0 : mTableDetailPanelProps.style) != null ? _mTableDetailPanelPro : {})
+  var tableRowProps = _extends({}, mTableBodyRowProps, row.getRowProps(), {
+    style: _extends({}, row.getRowProps().style, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
   });
 
+  var tableCellProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps(row) : muiTableDetailPanelProps;
   return React.createElement(TableRow$1, Object.assign({
     hover: true
   }, tableRowProps), React.createElement(TableCell, Object.assign({
@@ -743,23 +777,13 @@ var TableCell$1 = /*#__PURE__*/styled(MRT_TableButtonCell, {
     textAlign: 'left'
   };
 });
-var ExpandMoreIcon = /*#__PURE__*/styled(MuiExpandMoreIcon, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'rotation';
-  }
-})(function (_ref2) {
-  var rotation = _ref2.rotation;
-  return {
-    transform: "rotate(" + rotation + "deg)",
-    transition: 'transform 0.2s'
-  };
-});
-var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
-  var row = _ref3.row;
+var MRT_ExpandButton = function MRT_ExpandButton(_ref2) {
+  var row = _ref2.row;
 
   var _useMRT = useMRT(),
-      localization = _useMRT.localization,
       densePadding = _useMRT.densePadding,
+      ExpandMoreIcon = _useMRT.icons.ExpandMoreIcon,
+      localization = _useMRT.localization,
       renderDetailPanel = _useMRT.renderDetailPanel;
 
   return React.createElement(TableCell$1, {
@@ -767,41 +791,17 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
     densePadding: densePadding,
     depth: row.depth
   }, React.createElement(IconButton$2, Object.assign({
-    "aria-label": localization == null ? void 0 : localization.expandButtonTitle,
+    "aria-label": localization.expandButtonTitle,
     disabled: !row.canExpand && !renderDetailPanel,
-    title: localization == null ? void 0 : localization.expandButtonTitle
+    title: localization.expandButtonTitle
   }, row.getToggleRowExpandedProps()), React.createElement(ExpandMoreIcon, {
-    fontSize: row.canExpand || renderDetailPanel ? 'medium' : 'small',
-    rotation: !row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0
+    style: {
+      transform: "rotate(" + (!row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0) + "deg)",
+      transition: 'transform 0.2s'
+    }
   })));
 };
 
-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'
@@ -815,6 +815,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
       setAnchorEl = _ref.setAnchorEl;
 
   var _useMRT = useMRT(),
+      EditIcon = _useMRT.icons.EditIcon,
       enableRowEditing = _useMRT.enableRowEditing,
       localization = _useMRT.localization,
       renderRowActionMenuItems = _useMRT.renderRowActionMenuItems,
@@ -828,7 +829,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     }
   }, enableRowEditing && React.createElement(MenuItem$1, {
     onClick: handleEdit
-  }, React.createElement(EditIcon, null), " ", localization == null ? void 0 : localization.rowActionMenuItemEdit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
+  }, React.createElement(EditIcon, null), " ", localization.rowActionMenuItemEdit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
     return setAnchorEl(null);
   })) != null ? _renderRowActionMenuI : null);
 };
@@ -1598,11 +1599,12 @@ var EditActionButtonWrappers = /*#__PURE__*/styled('div')({
   gap: '0.75rem'
 });
 var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
-  var _localization$rowActi, _localization$rowActi2;
-
   var row = _ref.row;
 
   var _useMRT = useMRT(),
+      _useMRT$icons = _useMRT.icons,
+      CancelIcon = _useMRT$icons.CancelIcon,
+      SaveIcon = _useMRT$icons.SaveIcon,
       localization = _useMRT.localization,
       setCurrentEditingRow = _useMRT.setCurrentEditingRow,
       onRowEditSubmit = _useMRT.onRowEditSubmit,
@@ -1640,15 +1642,15 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
 
   return React.createElement(EditActionButtonWrappers, null, React.createElement(Tooltip, {
     arrow: true,
-    title: (_localization$rowActi = localization == null ? void 0 : localization.rowActionButtonCancel) != null ? _localization$rowActi : ''
+    title: localization.rowActionButtonCancel
   }, React.createElement(IconButton$2, {
-    "aria-label": localization == null ? void 0 : localization.rowActionButtonCancel,
+    "aria-label": localization.rowActionButtonCancel,
     onClick: handleCancel
   }, React.createElement(CancelIcon, null))), React.createElement(Tooltip, {
     arrow: true,
-    title: (_localization$rowActi2 = localization == null ? void 0 : localization.rowActionButtonSave) != null ? _localization$rowActi2 : ''
+    title: localization.rowActionButtonSave
   }, React.createElement(IconButton$2, {
-    "aria-label": localization == null ? void 0 : localization.rowActionButtonSave,
+    "aria-label": localization.rowActionButtonSave,
     color: "info",
     onClick: handleSave
   }, React.createElement(SaveIcon, null))));
@@ -1665,18 +1667,19 @@ var IconButton$1 = /*#__PURE__*/styled(IconButton$2)({
   }
 });
 var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
-  var _localization$rowActi;
-
   var row = _ref.row;
 
   var _useMRT = useMRT(),
       currentEditingRow = _useMRT.currentEditingRow,
       densePadding = _useMRT.densePadding,
+      enableRowEditing = _useMRT.enableRowEditing,
+      _useMRT$icons = _useMRT.icons,
+      EditIcon = _useMRT$icons.EditIcon,
+      MoreHorizIcon = _useMRT$icons.MoreHorizIcon,
       localization = _useMRT.localization,
       renderRowActionMenuItems = _useMRT.renderRowActionMenuItems,
-      enableRowEditing = _useMRT.enableRowEditing,
-      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
       renderRowActions = _useMRT.renderRowActions,
+      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
       tableInstance = _useMRT.tableInstance;
 
   var _useState = useState(null),
@@ -1701,12 +1704,12 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
   }) : !renderRowActionMenuItems && enableRowEditing ? React.createElement(Tooltip, {
     placement: "right",
     arrow: true,
-    title: (_localization$rowActi = localization == null ? void 0 : localization.rowActionMenuItemEdit) != null ? _localization$rowActi : ''
+    title: localization.rowActionMenuItemEdit
   }, React.createElement(IconButton$1, {
     onClick: handleEdit
   }, React.createElement(EditIcon, null))) : renderRowActionMenuItems ? React.createElement(React.Fragment, null, React.createElement(IconButton$1, {
-    "aria-label": localization == null ? void 0 : localization.rowActionMenuButtonTitle,
-    title: localization == null ? void 0 : localization.rowActionMenuButtonTitle,
+    "aria-label": localization.rowActionMenuButtonTitle,
+    title: localization.rowActionMenuButtonTitle,
     onClick: handleOpenRowActionMenu,
     size: "small"
   }, React.createElement(MoreHorizIcon, null)), React.createElement(MRT_RowActionMenu, {
@@ -1736,6 +1739,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,
@@ -1755,7 +1759,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
@@ -1766,7 +1770,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
@@ -1845,15 +1849,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) {
@@ -1865,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.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"
@@ -1874,7 +1879,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() {
@@ -1911,6 +1916,9 @@ var TextField = /*#__PURE__*/styled(TextField$1)({
 });
 var MRT_SearchTextField = function MRT_SearchTextField() {
   var _useMRT = useMRT(),
+      _useMRT$icons = _useMRT.icons,
+      SearchIcon = _useMRT$icons.SearchIcon,
+      CloseIcon = _useMRT$icons.CloseIcon,
       showSearch = _useMRT.showSearch,
       localization = _useMRT.localization,
       muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
@@ -1938,7 +1946,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
     orientation: "horizontal"
   }, React.createElement(TextField, Object.assign({
     id: "global-search-text-field",
-    placeholder: localization == null ? void 0 : localization.searchTextFieldPlaceholder,
+    placeholder: localization.searchTextFieldPlaceholder,
     onChange: function onChange(event) {
       setSearchValue(event.target.value);
       handleChange(event);
@@ -1954,11 +1962,11 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
       endAdornment: React.createElement(InputAdornment, {
         position: "end"
       }, React.createElement(IconButton$2, {
-        "aria-label": localization == null ? void 0 : localization.searchTextFieldClearButtonTitle,
+        "aria-label": localization.searchTextFieldClearButtonTitle,
         disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
         onClick: handleClear,
         size: "small",
-        title: localization == null ? void 0 : localization.searchTextFieldClearButtonTitle
+        title: localization.searchTextFieldClearButtonTitle
       }, React.createElement(CloseIcon, {
         fontSize: "small"
       })))
@@ -1966,24 +1974,27 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
   }, muiSearchTextFieldProps)));
 };
 
-var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton() {
-  var _localization$toggleF;
+var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
+  var rest = _extends({}, _ref);
 
   var _useMRT = useMRT(),
       localization = _useMRT.localization,
       setShowFilters = _useMRT.setShowFilters,
-      showFilters = _useMRT.showFilters;
+      showFilters = _useMRT.showFilters,
+      _useMRT$icons = _useMRT.icons,
+      FilterListIcon = _useMRT$icons.FilterListIcon,
+      FilterListOffIcon = _useMRT$icons.FilterListOffIcon;
 
   return React.createElement(Tooltip, {
     arrow: true,
-    title: (_localization$toggleF = localization == null ? void 0 : localization.toggleFilterButtonTitle) != null ? _localization$toggleF : ''
-  }, React.createElement(IconButton$2, {
-    "aria-label": localization == null ? void 0 : localization.toggleFilterButtonTitle,
+    title: localization.toggleFilterButtonTitle
+  }, React.createElement(IconButton$2, Object.assign({
+    "aria-label": 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(FilterListIcon, null)));
 };
 
 var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
@@ -2032,12 +2043,13 @@ var MenuButtons = /*#__PURE__*/styled('div')({
   justifyContent: 'space-between',
   padding: '0 0.5rem 0.5rem 0.5rem'
 });
-var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
-  var _localization$showHid;
+var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
+  var rest = _extends({}, _ref);
 
   var _useMRT = useMRT(),
       tableInstance = _useMRT.tableInstance,
-      localization = _useMRT.localization;
+      localization = _useMRT.localization,
+      ViewColumnIcon = _useMRT.icons.ViewColumnIcon;
 
   var _useState = useState(null),
       anchorEl = _useState[0],
@@ -2049,12 +2061,12 @@ 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, {
-    "aria-label": localization == null ? void 0 : localization.showHideColumnsButtonTitle,
+    title: localization.showHideColumnsButtonTitle
+  }, React.createElement(IconButton$2, Object.assign({
+    "aria-label": 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() {
@@ -2065,12 +2077,12 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
     onClick: function onClick() {
       return tableInstance.toggleHideAllColumns(true);
     }
-  }, localization == null ? void 0 : localization.columnShowHideMenuHideAll), React.createElement(Button, {
+  }, localization.columnShowHideMenuHideAll), React.createElement(Button, {
     disabled: tableInstance.getToggleHideAllColumnsProps().checked,
     onClick: function onClick() {
       return tableInstance.toggleHideAllColumns(false);
     }
-  }, localization == null ? void 0 : localization.columnShowHideMenuShowAll)), React.createElement(Divider$1, null), tableInstance.columns.map(function (column, index) {
+  }, localization.columnShowHideMenuShowAll)), React.createElement(Divider$1, null), tableInstance.columns.map(function (column, index) {
     return React.createElement(MRT_ShowHideColumnsMenu, {
       key: index + "-" + column.id,
       column: column
@@ -2078,34 +2090,40 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
   })));
 };
 
-var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton() {
-  var _localization$toggleD;
+var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
+  var rest = _extends({}, _ref);
 
   var _useMRT = useMRT(),
       densePadding = _useMRT.densePadding,
       setDensePadding = _useMRT.setDensePadding,
-      localization = _useMRT.localization;
+      localization = _useMRT.localization,
+      _useMRT$icons = _useMRT.icons,
+      DensityMediumIcon = _useMRT$icons.DensityMediumIcon,
+      DensitySmallIcon = _useMRT$icons.DensitySmallIcon;
 
   return React.createElement(Tooltip, {
     arrow: true,
-    title: (_localization$toggleD = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD : ''
-  }, React.createElement(IconButton$2, {
-    "aria-label": localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle,
+    title: localization.toggleDensePaddingSwitchTitle
+  }, React.createElement(IconButton$2, Object.assign({
+    "aria-label": localization.toggleDensePaddingSwitchTitle,
     onClick: function onClick() {
       return setDensePadding(!densePadding);
     },
     size: "small"
-  }, densePadding ? React.createElement(DensitySmallIcon, null) : React.createElement(DensityMediumIcon, null)));
+  }, rest), densePadding ? React.createElement(DensitySmallIcon, null) : React.createElement(DensityMediumIcon, null)));
 };
 
-var MRT_ToggleSearchButton = function MRT_ToggleSearchButton() {
-  var _localization$toggleS;
+var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
+  var rest = _extends({}, _ref);
 
   var _useMRT = useMRT(),
+      _useMRT$icons = _useMRT.icons,
+      SearchIcon = _useMRT$icons.SearchIcon,
+      SearchOffIcon = _useMRT$icons.SearchOffIcon,
       localization = _useMRT.localization,
+      muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
       setShowSearch = _useMRT.setShowSearch,
-      showSearch = _useMRT.showSearch,
-      muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps;
+      showSearch = _useMRT.showSearch;
 
   var handleToggleSearch = function handleToggleSearch() {
     setShowSearch(!showSearch);
@@ -2118,31 +2136,34 @@ 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, {
+    title: localization.toggleSearchButtonTitle
+  }, 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 _localization$toggleF;
+var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
+  var rest = _extends({}, _ref);
 
   var _useMRT = useMRT(),
+      fullScreen = _useMRT.fullScreen,
+      _useMRT$icons = _useMRT.icons,
+      FullscreenExitIcon = _useMRT$icons.FullscreenExitIcon,
+      FullscreenIcon = _useMRT$icons.FullscreenIcon,
       localization = _useMRT.localization,
-      setFullScreen = _useMRT.setFullScreen,
-      fullScreen = _useMRT.fullScreen;
+      setFullScreen = _useMRT.setFullScreen;
 
   return React.createElement(Tooltip, {
     arrow: true,
-    title: (_localization$toggleF = localization == null ? void 0 : localization.toggleFullScreenButtonTitle) != null ? _localization$toggleF : ''
-  }, React.createElement(IconButton$2, {
-    "aria-label": localization == null ? void 0 : localization.toggleFilterButtonTitle,
+    title: localization.toggleFullScreenButtonTitle
+  }, React.createElement(IconButton$2, Object.assign({
+    "aria-label": localization.toggleFilterButtonTitle,
     onClick: function onClick() {
       return setFullScreen(!fullScreen);
     },
     size: "small"
-  }, fullScreen ? React.createElement(FilterListOffIcon$1, null) : React.createElement(FilterListIcon, null)));
+  }, rest), fullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
 };
 
 var ToolbarButtonsContainer = /*#__PURE__*/styled('div')({
@@ -2194,6 +2215,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: {
@@ -2237,13 +2263,13 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
 
   var isMobile = useMediaQuery('(max-width:720px)');
   var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps(tableInstance) : muiTableToolbarAlertBannerProps;
-  var selectMessage = tableInstance.selectedFlatRows.length > 0 ? localization == null ? void 0 : (_localization$toolbar = localization.toolbarAlertSelectionMessage) == null ? void 0 : (_localization$toolbar2 = _localization$toolbar.replace('{selectedCount}', tableInstance.selectedFlatRows.length.toString())) == null ? void 0 : _localization$toolbar2.replace('{rowCount}', tableInstance.flatRows.length.toString()) : null;
-  var groupedByMessage = tableInstance.state.groupBy.length > 0 ? React.createElement("span", null, localization == null ? void 0 : localization.toolbarAlertGroupedByMessage, ' ', tableInstance.state.groupBy.map(function (columnId, index) {
+  var selectMessage = tableInstance.selectedFlatRows.length > 0 ? (_localization$toolbar = localization.toolbarAlertSelectionMessage) == null ? void 0 : (_localization$toolbar2 = _localization$toolbar.replace('{selectedCount}', tableInstance.selectedFlatRows.length.toString())) == null ? void 0 : _localization$toolbar2.replace('{rowCount}', tableInstance.flatRows.length.toString()) : null;
+  var groupedByMessage = tableInstance.state.groupBy.length > 0 ? React.createElement("span", null, localization.toolbarAlertGroupedByMessage, ' ', tableInstance.state.groupBy.map(function (columnId, index) {
     var _tableInstance$allCol;
 
     return React.createElement(Fragment, {
       key: index + "-" + columnId
-    }, index > 0 ? localization == null ? void 0 : localization.toolbarAlertGroupedThenByMessage : '', React.createElement(Chip, {
+    }, index > 0 ? localization.toolbarAlertGroupedThenByMessage : '', React.createElement(Chip, {
       color: "secondary",
       label: (_tableInstance$allCol = tableInstance.allColumns.find(function (column) {
         return column.id === columnId;
@@ -2395,11 +2421,23 @@ var MRT_TableContainer = function MRT_TableContainer() {
       muiTableContainerProps = _useMRT.muiTableContainerProps,
       tableInstance = _useMRT.tableInstance;
 
+  var originalBodyOverflowStyle = useRef();
   useEffect(function () {
-    if (fullScreen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'auto';
+    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';
+      }
     }
   }, [fullScreen]);
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
@@ -2412,10 +2450,10 @@ var MRT_TableContainer = function MRT_TableContainer() {
   })), React.createElement(MRT_Table, null), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, null));
 };
 
-var defaultLocalization = {
+var MRT_DefaultLocalization_EN = {
   actionsHeadColumnTitle: 'Actions',
   columnActionMenuButtonTitle: 'Column Actions',
-  columnActionMenuItemClearSort: 'Clear sorting',
+  columnActionMenuItemClearSort: 'Clear sort',
   columnActionMenuItemGroupBy: 'Group by {column}',
   columnActionMenuItemHideColumn: 'Hide {column} column',
   columnActionMenuItemSortAsc: 'Sort by {column} ascending',
@@ -2434,8 +2472,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',
@@ -2446,15 +2484,40 @@ var defaultLocalization = {
   toolbarAlertGroupedThenByMessage: ', then by '
 };
 
-var _excluded = ["defaultColumn", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
+var MRT_Default_Icons = {
+  CancelIcon: CancelIcon,
+  ClearAllIcon: ClearAllIcon,
+  CloseIcon: CloseIcon,
+  DensityMediumIcon: DensityMediumIcon,
+  DensitySmallIcon: DensitySmallIcon,
+  DoubleArrowDownIcon: DoubleArrowDownIcon,
+  DynamicFeedIcon: DynamicFeedIcon,
+  EditIcon: EditIcon,
+  ExpandLessIcon: ExpandLessIcon,
+  ExpandMoreIcon: ExpandMoreIcon,
+  FilterListIcon: FilterListIcon,
+  FilterListOffIcon: FilterListOffIcon,
+  FullscreenExitIcon: FullscreenExitIcon,
+  FullscreenIcon: FullscreenIcon,
+  MoreHorizIcon: MoreHorizIcon,
+  MoreVertIcon: MoreVertIcon,
+  SaveIcon: SaveIcon,
+  SearchIcon: SearchIcon,
+  SearchOffIcon: SearchOffIcon,
+  SortIcon: SortIcon,
+  ViewColumnIcon: ViewColumnIcon,
+  VisibilityOffIcon: VisibilityOffIcon
+};
+
+var _excluded = ["defaultColumn", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 var MaterialReactTable = (function (_ref) {
   var _ref$defaultColumn = _ref.defaultColumn,
       defaultColumn = _ref$defaultColumn === void 0 ? {
     minWidth: 50,
     maxWidth: 1000
   } : _ref$defaultColumn,
-      _ref$localization = _ref.localization,
-      localization = _ref$localization === void 0 ? defaultLocalization : _ref$localization,
+      icons = _ref.icons,
+      localization = _ref.localization,
       _ref$positionActionsC = _ref.positionActionsColumn,
       positionActionsColumn = _ref$positionActionsC === void 0 ? 'first' : _ref$positionActionsC,
       _ref$positionPaginati = _ref.positionPagination,
@@ -2467,7 +2530,8 @@ var MaterialReactTable = (function (_ref) {
 
   return React.createElement(MaterialReactTableProvider, Object.assign({
     defaultColumn: defaultColumn,
-    localization: _extends({}, defaultLocalization, localization),
+    icons: _extends({}, MRT_Default_Icons, icons),
+    localization: _extends({}, MRT_DefaultLocalization_EN, localization),
     positionActionsColumn: positionActionsColumn,
     positionPagination: positionPagination,
     positionToolbarActions: positionToolbarActions,