material-react-table 0.3.3 → 0.3.4

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

@@ -1,6 +1,6 @@
 import React, { useMemo, useState, useContext, createContext } from 'react';
 import { useTable, useResizeColumns, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useFlexLayout, useAsyncDebounce } from 'react-table';
-import { TextField as TextField$1, InputAdornment, IconButton as IconButton$2, Menu, Divider as Divider$1, styled, MenuItem as MenuItem$2, TableCell as TableCell$6, TableSortLabel, Collapse, Checkbox, TableRow as TableRow$1, TableHead, Tooltip, alpha, TableBody as TableBody$1, TableFooter, Table, FormControlLabel, Switch, Typography, TablePagination, Toolbar as Toolbar$2, TableContainer, Paper, LinearProgress, CircularProgress } from '@mui/material';
+import { TextField as TextField$1, Tooltip, InputAdornment, IconButton as IconButton$2, Menu, Divider as Divider$1, styled, MenuItem as MenuItem$2, TableCell as TableCell$4, TableSortLabel, Collapse, Checkbox, TableRow as TableRow$1, TableHead, alpha, TableBody as TableBody$1, TableFooter, Table, FormControlLabel, Switch, Typography, TablePagination, Toolbar as Toolbar$2, TableContainer, Paper, LinearProgress, CircularProgress } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import FilterIcon from '@mui/icons-material/FilterList';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -17,6 +17,7 @@ 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 SearchOffIcon from '@mui/icons-material/SearchOff';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -122,7 +123,7 @@ var MaterialReactTableContext = /*#__PURE__*/function () {
 }();
 
 var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
-  var _props$defaultShowFil, _props$defaultDensePa;
+  var _props$defaultShowSea, _props$defaultShowFil, _props$defaultDensePa;
 
   var hooks = [useResizeColumns, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect];
   if (props.enableColumnResizing) hooks.unshift(useFlexLayout);
@@ -131,26 +132,32 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
     tableInstance: tableInstance
   });
 
-  var _useState = useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
-      showFilters = _useState[0],
-      setShowFilters = _useState[1];
+  var _useState = useState((_props$defaultShowSea = props.defaultShowSearchTextField) != null ? _props$defaultShowSea : false),
+      showSearch = _useState[0],
+      setShowSearch = _useState[1];
 
-  var _useState2 = useState((_props$defaultDensePa = props.defaultDensePadding) != null ? _props$defaultDensePa : false),
-      densePadding = _useState2[0],
-      setDensePadding = _useState2[1];
+  var _useState2 = useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
+      showFilters = _useState2[0],
+      setShowFilters = _useState2[1];
 
-  var _useState3 = useState(null),
-      currentEditingRow = _useState3[0],
-      setCurrentEditingRow = _useState3[1];
+  var _useState3 = useState((_props$defaultDensePa = props.defaultDensePadding) != null ? _props$defaultDensePa : false),
+      densePadding = _useState3[0],
+      setDensePadding = _useState3[1];
+
+  var _useState4 = useState(null),
+      currentEditingRow = _useState4[0],
+      setCurrentEditingRow = _useState4[1];
 
   return React.createElement(MaterialReactTableContext.Provider, {
     value: _extends({}, mrtCalcs, props, {
+      currentEditingRow: currentEditingRow,
       densePadding: densePadding,
+      setCurrentEditingRow: setCurrentEditingRow,
       setDensePadding: setDensePadding,
       setShowFilters: setShowFilters,
-      currentEditingRow: currentEditingRow,
-      setCurrentEditingRow: setCurrentEditingRow,
+      setShowSearch: setShowSearch,
       showFilters: showFilters,
+      showSearch: showSearch,
       // @ts-ignore
       tableInstance: tableInstance
     })
@@ -162,7 +169,9 @@ var useMaterialReactTable = function useMaterialReactTable() {
   );
 };
 
-var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
+var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
+  var _localization$filterT, _localization$filterT2, _localization$filterT3, _localization$filterT4;
+
   var column = _ref.column;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
@@ -182,14 +191,21 @@ var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
   };
 
   if (column.Filter) {
-    return React.createElement(React.Fragment, null, column.Filter({
+    return React.createElement(React.Fragment, null, column.Filter == null ? void 0 : column.Filter({
       column: column
     }));
   }
 
   return React.createElement(TextField$1, {
+    fullWidth: true,
+    id: "filter-" + column.id + "-column",
+    inputProps: {
+      style: {
+        textOverflow: 'ellipsis'
+      }
+    },
     margin: "dense",
-    placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
+    placeholder: localization == null ? void 0 : (_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);
@@ -200,20 +216,25 @@ var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
     value: filterValue != null ? filterValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: React.createElement(InputAdornment, {
+      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 : ''
+      }, React.createElement(InputAdornment, {
         position: "start"
-      }, React.createElement(FilterIcon, null)),
+      }, React.createElement(FilterIcon, null))),
       endAdornment: React.createElement(InputAdornment, {
         position: "end"
-      }, React.createElement(IconButton$2, {
+      }, React.createElement(Tooltip, {
+        arrow: true,
+        title: (_localization$filterT4 = localization == null ? void 0 : localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT4 : ''
+      }, React.createElement("span", null, React.createElement(IconButton$2, {
         "aria-label": localization == null ? void 0 : localization.filterTextFieldClearButtonTitle,
         disabled: (filterValue == null ? void 0 : filterValue.length) === 0,
         onClick: handleClear,
-        size: "small",
-        title: localization == null ? void 0 : localization.filterTextFieldClearButtonTitle
+        size: "small"
       }, React.createElement(CloseIcon, {
         fontSize: "small"
-      })))
+      })))))
     }
   });
 };
@@ -223,6 +244,8 @@ var MenuItem = /*#__PURE__*/styled(MenuItem$2)({
   gap: '0.75rem'
 });
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
+  var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
+
   var anchorEl = _ref.anchorEl,
       column = _ref.column,
       setAnchorEl = _ref.setAnchorEl;
@@ -231,7 +254,9 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
       enableColumnGrouping = _useMaterialReactTabl.enableColumnGrouping,
       disableSortBy = _useMaterialReactTabl.disableSortBy,
-      localization = _useMaterialReactTabl.localization;
+      localization = _useMaterialReactTabl.localization,
+      disableFilters = _useMaterialReactTabl.disableFilters,
+      setShowFilters = _useMaterialReactTabl.setShowFilters;
 
   var handleClearSort = function handleClearSort() {
     column.clearSortBy();
@@ -258,6 +283,17 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     setAnchorEl(null);
   };
 
+  var handleFilterByColumn = function handleFilterByColumn() {
+    setShowFilters(true);
+    setTimeout(function () {
+      var _document$getElementB, _column$muiTableHeadC, _column$muiTableHeadC2;
+
+      return (_document$getElementB = document.getElementById( // @ts-ignore
+      (_column$muiTableHeadC = (_column$muiTableHeadC2 = column.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _column$muiTableHeadC2.id) != null ? _column$muiTableHeadC : "filter-" + column.id + "-column")) == null ? void 0 : _document$getElementB.focus();
+    }, 200);
+    setAnchorEl(null);
+  };
+
   return React.createElement(Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
@@ -272,7 +308,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     key: 2,
     disabled: column.isSorted && !column.isSortedDesc,
     onClick: handleSortAsc
-  }, React.createElement(SortIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemSortAsc), React.createElement(MenuItem, {
+  }, 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, {
     key: 3,
     disabled: column.isSorted && column.isSortedDesc,
     onClick: handleSortDesc
@@ -280,25 +316,30 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     style: {
       transform: 'rotate(180deg) scaleX(-1)'
     }
-  }), ' ', localization == null ? void 0 : localization.columnActionMenuItemSortDesc), React.createElement(Divider$1, {
-    key: 4
-  })], !disableColumnHiding && React.createElement(MenuItem, {
-    onClick: handleHideColumn
-  }, React.createElement(VisibilityOffIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemHideColumn), enableColumnGrouping && column.canGroupBy && React.createElement(MenuItem, {
-    disabled: column.isGrouped,
-    onClick: handleGroupByColumn
-  }, React.createElement(DynamicFeedIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemGroupBy), enableColumnGrouping && column.canGroupBy && React.createElement(MenuItem, {
-    disabled: !column.isGrouped,
+  }), ' ', 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, {
+    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, {
+    key: 1
+  }), React.createElement(MenuItem, {
+    key: 2,
     onClick: handleGroupByColumn
-  }, React.createElement(DynamicFeedIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemUnGroupBy));
+  }, 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, {
+    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)))]);
 };
 
 var IconButton = /*#__PURE__*/styled(IconButton$2)({
   opacity: 0.5,
   transition: 'opacity 0.2s',
   marginRight: '2px',
-  height: '2rem',
-  width: '2rem',
+  height: '1.6rem',
+  width: '1.6rem',
   '&:hover': {
     opacity: 1
   }
@@ -321,9 +362,9 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
 
   return React.createElement(React.Fragment, null, React.createElement(IconButton, {
     "aria-label": localization == null ? void 0 : localization.columnActionMenuButtonTitle,
-    title: localization == null ? void 0 : localization.columnActionMenuButtonTitle,
     onClick: handleClick,
-    size: "small"
+    size: "small",
+    title: localization == null ? void 0 : localization.columnActionMenuButtonTitle
   }, React.createElement(MoreVertIcon, null)), React.createElement(MRT_ColumnActionMenu, {
     anchorEl: anchorEl,
     column: column,
@@ -331,7 +372,7 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }));
 };
 
-var StyledTableHeadCell = /*#__PURE__*/styled(TableCell$6, {
+var StyledTableHeadCell = /*#__PURE__*/styled(TableCell$4, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding' && prop !== 'enableColumnResizing';
   }
@@ -340,23 +381,27 @@ var StyledTableHeadCell = /*#__PURE__*/styled(TableCell$6, {
       enableColumnResizing = _ref.enableColumnResizing;
   return {
     fontWeight: 'bold',
-    verticalAlign: 'text-top',
+    height: '100%',
     padding: densePadding ? '0.5rem' : '1rem',
-    transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out"
+    transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
+    verticalAlign: 'text-top'
   };
 });
-var TableCellContents = /*#__PURE__*/styled('div')({
-  display: 'grid'
+var TableCellWrapper = /*#__PURE__*/styled('div')({
+  alignContent: 'space-between',
+  display: 'grid',
+  height: '100%'
 });
-var TableCellText = /*#__PURE__*/styled('div')({
+var TableCellTopContents = /*#__PURE__*/styled('div')({
   width: '100%',
   display: 'flex',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  alignItems: 'flex-start'
 });
 var CellFlexItem = /*#__PURE__*/styled('span')({
+  alignItems: 'center',
   display: 'flex',
-  flexWrap: 'nowrap',
-  alignItems: 'center'
+  flexWrap: 'nowrap'
 });
 var Divider = /*#__PURE__*/styled(Divider$1)({
   borderRightWidth: '2px',
@@ -390,17 +435,14 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
     align: isParentHeader ? 'center' : 'left',
     densePadding: densePadding,
     enableColumnResizing: enableColumnResizing
-  }, tableCellProps), React.createElement(TableCellContents, null, React.createElement(TableCellText, {
+  }, tableCellProps), React.createElement(TableCellWrapper, null, React.createElement(TableCellTopContents, {
     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,
     active: column.isSorted,
-    direction: column.isSortedDesc ? 'desc' : 'asc',
-    style: {
-      margin: 0
-    }
+    direction: column.isSortedDesc ? 'desc' : 'asc'
   })), React.createElement(CellFlexItem, null, !disableColumnActions && !isParentHeader && React.createElement(MRT_ToggleColumnActionMenuButton, {
     column: column
   }), enableColumnResizing && !isParentHeader && React.createElement(Divider, Object.assign({
@@ -411,34 +453,40 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
     }
   }, column.getResizerProps())))), !disableFilters && column.canFilter && React.createElement(Collapse, {
     "in": showFilters
-  }, React.createElement(MRT_FilterTextfield, {
+  }, React.createElement(MRT_FilterTextField, {
     column: column
   }))));
 };
 
-var TableCell = /*#__PURE__*/styled(TableCell$6, {
+var MRT_TableButtonCell = /*#__PURE__*/styled(TableCell$4, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding';
   }
 })(function (_ref) {
   var densePadding = _ref.densePadding;
   return {
-    padding: densePadding ? '0' : '0.6rem',
+    padding: densePadding ? '1px' : '0.6rem',
+    textAlign: 'center',
     transition: 'all 0.2s ease-in-out'
   };
 });
+
 var MRT_SelectAllCheckbox = function MRT_SelectAllCheckbox() {
+  var _localization$selectA;
+
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
       disableSelectAll = _useMaterialReactTabl.disableSelectAll,
       densePadding = _useMaterialReactTabl.densePadding,
       localization = _useMaterialReactTabl.localization;
 
-  return React.createElement(TableCell, {
+  return React.createElement(MRT_TableButtonCell, {
     densePadding: densePadding,
     variant: "head"
   }, !disableSelectAll ? React.createElement(Checkbox, Object.assign({
-    "aria-label": localization == null ? void 0 : localization.selectAllCheckboxTitle
+    inputProps: {
+      'aria-label': (_localization$selectA = localization == null ? void 0 : localization.selectAllCheckboxTitle) != null ? _localization$selectA : ''
+    }
   }, tableInstance.getToggleAllPageRowsSelectedProps())) : null);
 };
 
@@ -458,18 +506,12 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
       tableInstance = _useMaterialReactTabl.tableInstance,
       localization = _useMaterialReactTabl.localization,
       anyRowsExpanded = _useMaterialReactTabl.anyRowsExpanded,
-      densePadding = _useMaterialReactTabl.densePadding,
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+      densePadding = _useMaterialReactTabl.densePadding;
 
-  return React.createElement(TableCell$6, Object.assign({
-    size: "small"
-  }, tableInstance.getToggleAllRowsExpandedProps(), {
-    style: {
-      padding: densePadding ? '0' : '0.5rem 0.5rem',
-      transition: 'all 0.2s ease-in-out',
-      width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 2) + "rem"
-    }
-  }), React.createElement(IconButton$2, {
+  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, {
@@ -494,7 +536,7 @@ var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
     }, (_mTableBodyCellrops$s = mTableBodyCellrops == null ? void 0 : mTableBodyCellrops.style) != null ? _mTableBodyCellrops$s : {})
   });
 
-  return React.createElement(TableCell$6, Object.assign({}, tableCellProps));
+  return React.createElement(TableCell$4, Object.assign({}, tableCellProps));
 };
 
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
@@ -527,7 +569,11 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
     style: _extends({}, headerGroup.getHeaderGroupProps().style, (_mTableHeadRowProps$s = mTableHeadRowProps == null ? void 0 : mTableHeadRowProps.style) != null ? _mTableHeadRowProps$s : {})
   });
 
-  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(StyledTableHeadCell, null, localization == null ? void 0 : localization.actionsHeadColumnTitle)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React.createElement(MRT_ExpandAllButton, null) : React.createElement(MRT_TableSpacerCell, {
+  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(StyledTableHeadCell, {
+    style: {
+      textAlign: 'center'
+    }
+  }, localization == null ? void 0 : localization.actionsHeadColumnTitle)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React.createElement(MRT_ExpandAllButton, null) : React.createElement(MRT_TableSpacerCell, {
     width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
   }) : null, enableSelection ? !isParentHeader ? React.createElement(MRT_SelectAllCheckbox, null) : React.createElement(MRT_TableSpacerCell, {
     width: "1rem"
@@ -555,51 +601,52 @@ var MRT_TableHead = function MRT_TableHead() {
   }));
 };
 
-var MRT_EditCellTextfield = function MRT_EditCellTextfield(_ref) {
-  var _cell$column$muiTable, _currentEditingRow$va;
+var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
+  var _cell$column$muiTable;
 
   var cell = _ref.cell;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      localization = _useMaterialReactTabl.localization,
       currentEditingRow = _useMaterialReactTabl.currentEditingRow,
-      setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
-      muiTableBodyCellEditTextFieldProps = _useMaterialReactTabl.muiTableBodyCellEditTextFieldProps;
+      localization = _useMaterialReactTabl.localization,
+      muiTableBodyCellEditTextFieldProps = _useMaterialReactTabl.muiTableBodyCellEditTextFieldProps,
+      setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow;
 
   var handleChange = function handleChange(event) {
     if (currentEditingRow) {
-      var _extends2;
-
-      setCurrentEditingRow(_extends({}, currentEditingRow, {
-        values: _extends({}, cell.row.values, (_extends2 = {}, _extends2[cell.column.id] = event.target.value, _extends2))
-      }));
+      cell.row.values[cell.column.id] = event.target.value;
+      setCurrentEditingRow(_extends({}, currentEditingRow));
     }
+
+    cell.column.onCellEditChange == null ? void 0 : cell.column.onCellEditChange(event, cell);
   };
 
-  var textFieldProps = _extends({}, muiTableBodyCellEditTextFieldProps, cell.column.muiTableBodyCellEditTextFieldProps, {
+  var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps(cell) : muiTableBodyCellEditTextFieldProps;
+  var mcTableBodyCellEditTextFieldProps = cell.column.muiTableBodyCellEditTextFieldProps instanceof Function ? cell.column.muiTableBodyCellEditTextFieldProps(cell) : cell.column.muiTableBodyCellEditTextFieldProps;
+
+  var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps, {
     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) {
     return React.createElement(React.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
-      cell: cell,
-      onChange: handleChange
+      cell: cell
     })));
   }
 
   return React.createElement(TextField$1, Object.assign({
     margin: "dense",
-    placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
     onChange: handleChange,
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
-    value: currentEditingRow == null ? void 0 : (_currentEditingRow$va = currentEditingRow.values) == null ? void 0 : _currentEditingRow$va[cell.column.id],
+    placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
+    value: cell.value,
     variant: "standard"
   }, textFieldProps));
 };
 
-var TableCell$1 = /*#__PURE__*/styled(TableCell$6, {
+var TableCell = /*#__PURE__*/styled(TableCell$4, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding';
   }
@@ -607,7 +654,8 @@ var TableCell$1 = /*#__PURE__*/styled(TableCell$6, {
   var densePadding = _ref.densePadding;
   return {
     padding: densePadding ? '0.5rem' : '1rem',
-    transition: 'all 0.2s ease-in-out'
+    transition: 'all 0.2s ease-in-out',
+    whiteSpace: densePadding ? 'nowrap' : 'normal'
   };
 });
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref2) {
@@ -628,17 +676,17 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref2) {
     style: _extends({}, cell.getCellProps().style, (_mTableCellBodyProps$ = mTableCellBodyProps == null ? void 0 : mTableCellBodyProps.style) != null ? _mTableCellBodyProps$ : {}, (_mcTableCellBodyProps = mcTableCellBodyProps == null ? void 0 : mcTableCellBodyProps.style) != null ? _mcTableCellBodyProps : {})
   });
 
-  return React.createElement(TableCell$1, Object.assign({
+  return React.createElement(TableCell, Object.assign({
     densePadding: densePadding,
     onClick: function onClick(event) {
       return onCellClick == null ? void 0 : onCellClick(event, cell);
     }
-  }, tableCellProps), (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React.createElement(MRT_EditCellTextfield, {
+  }, tableCellProps), (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'));
 };
 
-var TableCell$2 = /*#__PURE__*/styled(TableCell$6, {
+var TableCell$1 = /*#__PURE__*/styled(TableCell$4, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'isExpanded';
   }
@@ -677,7 +725,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
 
   return React.createElement(TableRow$1, Object.assign({
     hover: true
-  }, tableRowProps), React.createElement(TableCell$2, Object.assign({
+  }, tableRowProps), React.createElement(TableCell$1, Object.assign({
     colSpan: tableInstance.visibleColumns.length + 10,
     isExpanded: row.isExpanded,
     onClick: function onClick(event) {
@@ -688,17 +736,15 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
   }, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
 };
 
-var TableCell$3 = /*#__PURE__*/styled(TableCell$6, {
+var TableCell$2 = /*#__PURE__*/styled(MRT_TableButtonCell, {
   shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'densePadding' && prop !== 'depth';
+    return prop !== 'depth';
   }
 })(function (_ref) {
-  var densePadding = _ref.densePadding,
-      depth = _ref.depth;
+  var depth = _ref.depth;
   return {
-    padding: densePadding ? '0' : '0.6rem',
     paddingLeft: depth + 0.5 + "rem",
-    transition: 'all 0.2s ease-in-out'
+    textAlign: 'left'
   };
 });
 var ExpandMoreIcon = /*#__PURE__*/styled(MuiExpandMoreIcon, {
@@ -720,7 +766,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
       densePadding = _useMaterialReactTabl.densePadding,
       renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
 
-  return React.createElement(TableCell$3, {
+  return React.createElement(TableCell$2, {
     size: "small",
     densePadding: densePadding,
     depth: row.depth
@@ -734,24 +780,14 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
   })));
 };
 
-var TableCell$4 = /*#__PURE__*/styled(TableCell$6, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'densePadding';
-  }
-})(function (_ref) {
-  var densePadding = _ref.densePadding;
-  return {
-    padding: densePadding ? '0' : '0.6rem',
-    transition: 'all 0.2s ease-in-out'
-  };
-});
-var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref2) {
-  var row = _ref2.row;
+var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
+  var row = _ref.row;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
       onRowSelectChange = _useMaterialReactTabl.onRowSelectChange,
-      densePadding = _useMaterialReactTabl.densePadding;
+      densePadding = _useMaterialReactTabl.densePadding,
+      localization = _useMaterialReactTabl.localization;
 
   var onSelectChange = function onSelectChange(event) {
     var _row$getToggleRowSele;
@@ -760,11 +796,14 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref2) {
     onRowSelectChange == null ? void 0 : onRowSelectChange(event, row, tableInstance.selectedFlatRows);
   };
 
-  return React.createElement(TableCell$4, {
+  return React.createElement(MRT_TableButtonCell, {
     densePadding: densePadding
-  }, React.createElement(Checkbox, Object.assign({}, row.getToggleRowSelectedProps(), {
+  }, 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)({
@@ -776,20 +815,15 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
 
   var anchorEl = _ref.anchorEl,
       row = _ref.row,
+      handleEdit = _ref.handleEdit,
       setAnchorEl = _ref.setAnchorEl;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       enableRowEditing = _useMaterialReactTabl.enableRowEditing,
       localization = _useMaterialReactTabl.localization,
       renderRowActionMenuItems = _useMaterialReactTabl.renderRowActionMenuItems,
-      setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
       tableInstance = _useMaterialReactTabl.tableInstance;
 
-  var handleEdit = function handleEdit() {
-    setCurrentEditingRow(_extends({}, row));
-    setAnchorEl(null);
-  };
-
   return React.createElement(Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
@@ -1579,6 +1613,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
       currentEditingRow = _useMaterialReactTabl.currentEditingRow;
 
   var handleCancel = function handleCancel() {
+    row.values = row.original;
     setCurrentEditingRow(null);
   };
 
@@ -1634,11 +1669,17 @@ var IconButton$1 = /*#__PURE__*/styled(IconButton$2)({
   }
 });
 var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
+  var _localization$rowActi;
+
   var row = _ref.row;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      localization = _useMaterialReactTabl.localization,
       currentEditingRow = _useMaterialReactTabl.currentEditingRow,
+      densePadding = _useMaterialReactTabl.densePadding,
+      localization = _useMaterialReactTabl.localization,
+      renderRowActionMenuItems = _useMaterialReactTabl.renderRowActionMenuItems,
+      enableRowEditing = _useMaterialReactTabl.enableRowEditing,
+      setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
       renderRowActions = _useMaterialReactTabl.renderRowActions,
       tableInstance = _useMaterialReactTabl.tableInstance;
 
@@ -1652,26 +1693,32 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
     setAnchorEl(event.currentTarget);
   };
 
-  if (renderRowActions) {
-    return React.createElement(React.Fragment, null, renderRowActions(row, tableInstance));
-  }
-
-  if (row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id)) {
-    return React.createElement(MRT_EditActionButtons, {
-      row: row
-    });
-  }
+  var handleEdit = function handleEdit() {
+    setCurrentEditingRow(_extends({}, row));
+    setAnchorEl(null);
+  };
 
-  return React.createElement(React.Fragment, null, React.createElement(IconButton$1, {
+  return React.createElement(MRT_TableButtonCell, {
+    densePadding: densePadding
+  }, renderRowActions ? React.createElement(React.Fragment, null, renderRowActions(row, tableInstance)) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React.createElement(MRT_EditActionButtons, {
+    row: row
+  }) : !renderRowActionMenuItems && enableRowEditing ? React.createElement(Tooltip, {
+    placement: "right",
+    arrow: true,
+    title: (_localization$rowActi = localization == null ? void 0 : localization.rowActionMenuItemEdit) != null ? _localization$rowActi : ''
+  }, 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,
     onClick: handleOpenRowActionMenu,
     size: "small"
   }, React.createElement(MoreHorizIcon, null)), React.createElement(MRT_RowActionMenu, {
     anchorEl: anchorEl,
+    handleEdit: handleEdit,
     row: row,
     setAnchorEl: setAnchorEl
-  }));
+  })) : null);
 };
 
 var TableRow = /*#__PURE__*/styled(TableRow$1, {
@@ -1711,9 +1758,9 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
     onClick: function onClick(event) {
       return onRowClick == null ? void 0 : onRowClick(event, row);
     }
-  }, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React.createElement(TableCell$6, null, React.createElement(MRT_ToggleRowActionMenuButton, {
+  }, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
-  })), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_ExpandButton, {
+  }), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_ExpandButton, {
     row: row
   }), enableSelection && React.createElement(MRT_SelectCheckbox, {
     row: row
@@ -1722,9 +1769,9 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
       key: cell.getCellProps().key,
       cell: cell
     });
-  }), enableRowActions && positionActionsColumn === 'last' && React.createElement(TableCell$6, null, React.createElement(MRT_ToggleRowActionMenuButton, {
+  }), enableRowActions && positionActionsColumn === 'last' && React.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
-  }))), renderDetailPanel && React.createElement(MRT_TableDetailPanel, {
+  })), renderDetailPanel && React.createElement(MRT_TableDetailPanel, {
     row: row
   }));
 };
@@ -1755,7 +1802,7 @@ var MRT_TableBody = function MRT_TableBody() {
   }));
 };
 
-var TableCell$5 = /*#__PURE__*/styled(TableCell$6, {
+var TableCell$3 = /*#__PURE__*/styled(TableCell$4, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'densePadding' && prop !== 'enableColumnResizing';
   }
@@ -1787,7 +1834,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref2) {
     style: _extends({}, column.getFooterProps().style, (_mTableFooterCellProp = mTableFooterCellProps == null ? void 0 : mTableFooterCellProps.style) != null ? _mTableFooterCellProp : {}, (_mcTableFooterCellPro = mcTableFooterCellProps == null ? void 0 : mcTableFooterCellProps.style) != null ? _mcTableFooterCellPro : {})
   });
 
-  return React.createElement(TableCell$5, Object.assign({
+  return React.createElement(TableCell$3, Object.assign({
     align: isParentHeader ? 'center' : 'left',
     densePadding: densePadding,
     enableColumnResizing: enableColumnResizing,
@@ -1866,10 +1913,11 @@ var TextField = /*#__PURE__*/styled(TextField$1)({
 });
 var MRT_SearchTextField = function MRT_SearchTextField() {
   var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps,
+      showSearch = _useMaterialReactTabl.showSearch,
       localization = _useMaterialReactTabl.localization,
-      onGlobalFilterChange = _useMaterialReactTabl.onGlobalFilterChange;
+      muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps,
+      onGlobalFilterChange = _useMaterialReactTabl.onGlobalFilterChange,
+      tableInstance = _useMaterialReactTabl.tableInstance;
 
   var _useState = useState(''),
       searchValue = _useState[0],
@@ -1887,7 +1935,11 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
     tableInstance.setGlobalFilter(undefined);
   };
 
-  return React.createElement(TextField, Object.assign({
+  return React.createElement(Collapse, {
+    "in": showSearch,
+    orientation: "horizontal"
+  }, React.createElement(TextField, Object.assign({
+    id: "global-search-text-field",
     placeholder: localization == null ? void 0 : localization.searchTextFieldPlaceholder,
     onChange: function onChange(event) {
       setSearchValue(event.target.value);
@@ -1913,7 +1965,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
         fontSize: "small"
       })))
     }
-  }, muiSearchTextFieldProps));
+  }, muiSearchTextFieldProps)));
 };
 
 var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton() {
@@ -2001,7 +2053,7 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
 };
 
 var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
-  var _localization$toggleD;
+  var _localization$toggleD, _localization$toggleD2;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       densePadding = _useMaterialReactTabl.densePadding,
@@ -2012,6 +2064,9 @@ var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
     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",
@@ -2021,6 +2076,33 @@ var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
   }));
 };
 
+var MRT_ToggleSearchButton = function MRT_ToggleSearchButton() {
+  var _localization$toggleS;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      localization = _useMaterialReactTabl.localization,
+      setShowSearch = _useMaterialReactTabl.setShowSearch,
+      showSearch = _useMaterialReactTabl.showSearch,
+      muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps;
+
+  var handleToggleSearch = function handleToggleSearch() {
+    setShowSearch(!showSearch);
+    setTimeout(function () {
+      var _document$getElementB, _muiSearchTextFieldPr;
+
+      return (_document$getElementB = document.getElementById((_muiSearchTextFieldPr = muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.id) != null ? _muiSearchTextFieldPr : "global-search-text-field")) == null ? void 0 : _document$getElementB.focus();
+    }, 200);
+  };
+
+  return React.createElement(Tooltip, {
+    arrow: true,
+    title: (_localization$toggleS = localization == null ? void 0 : localization.toggleSearchButtonTitle) != null ? _localization$toggleS : ''
+  }, React.createElement(IconButton$2, {
+    size: "small",
+    onClick: handleToggleSearch
+  }, showSearch ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
+};
+
 var ToolbarButtonsContainer = /*#__PURE__*/styled('div')({
   display: 'flex',
   gap: '0.5rem',
@@ -2030,9 +2112,10 @@ var MRT_ToolbarButtons = function MRT_ToolbarButtons() {
   var _useMaterialReactTabl = useMaterialReactTable(),
       disableFilters = _useMaterialReactTabl.disableFilters,
       disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
-      disableDensePaddingToggle = _useMaterialReactTabl.disableDensePaddingToggle;
+      disableDensePaddingToggle = _useMaterialReactTabl.disableDensePaddingToggle,
+      disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter;
 
-  return React.createElement(ToolbarButtonsContainer, null, !disableFilters && React.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React.createElement(MRT_DensePaddingSwitch, 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_DensePaddingSwitch, null));
 };
 
 var MRT_TablePagination = function MRT_TablePagination() {
@@ -2057,12 +2140,16 @@ var MRT_TablePagination = function MRT_TablePagination() {
     page: tableInstance.state.pageIndex,
     rowsPerPage: tableInstance.state.pageSize,
     showFirstButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
-    showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2
+    showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
+    style: {
+      padding: 0
+    }
   }, tablePaginationProps));
 };
 
 var Toolbar = /*#__PURE__*/styled(Toolbar$2)({
-  display: 'grid'
+  display: 'grid',
+  padding: '0.5rem !important'
 });
 var ToolbarTopRow = /*#__PURE__*/styled('div')({
   padding: '0.5rem',
@@ -2074,27 +2161,25 @@ var ToolbarActionsContainer = /*#__PURE__*/styled('div')({
   gap: '0.5rem'
 });
 var MRT_ToolbarTop = function MRT_ToolbarTop() {
+  var _renderToolbarActions;
+
   var _useMaterialReactTabl = useMaterialReactTable(),
       disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter,
       hideToolbarActions = _useMaterialReactTabl.hideToolbarActions,
       manualPagination = _useMaterialReactTabl.manualPagination,
-      muiTableTitleProps = _useMaterialReactTabl.muiTableTitleProps,
       muiTableToolbarTopProps = _useMaterialReactTabl.muiTableToolbarTopProps,
       positionPagination = _useMaterialReactTabl.positionPagination,
       positionToolbarActions = _useMaterialReactTabl.positionToolbarActions,
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      title = _useMaterialReactTabl.title;
+      renderToolbarActions = _useMaterialReactTabl.renderToolbarActions,
+      tableInstance = _useMaterialReactTabl.tableInstance;
 
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
   return React.createElement(Toolbar, Object.assign({
     variant: "dense"
-  }, toolbarProps), React.createElement(ToolbarTopRow, null, title ? React.createElement(Typography, Object.assign({
-    variant: "h5"
-  }, muiTableTitleProps), title) : React.createElement("span", null), React.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarButtons, null))), React.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)));
+  }, toolbarProps), React.createElement(ToolbarTopRow, null, (_renderToolbarActions = renderToolbarActions == null ? void 0 : renderToolbarActions(tableInstance)) != null ? _renderToolbarActions : React.createElement("span", null), React.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarButtons, null))), React.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)));
 };
 
 var Toolbar$1 = /*#__PURE__*/styled(Toolbar$2)({
-  padding: 0,
   display: 'flex',
   justifyContent: 'space-between'
 });
@@ -2109,6 +2194,9 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
 
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
   return React.createElement(Toolbar$1, Object.assign({
+    style: {
+      padding: 0
+    },
     variant: "dense"
   }, toolbarProps), !hideToolbarActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarButtons, null) : React.createElement("span", null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null));
 };
@@ -2146,26 +2234,28 @@ var defaultLocalization = {
   actionsHeadColumnTitle: 'Actions',
   columnActionMenuButtonTitle: 'Column Actions',
   columnActionMenuItemClearSort: 'Clear sorting',
-  columnActionMenuItemGroupBy: 'Group by column',
-  columnActionMenuItemHideColumn: 'Hide column',
-  columnActionMenuItemSortAsc: 'Sort ascending',
-  columnActionMenuItemSortDesc: 'Sort descending',
-  columnActionMenuItemUnGroupBy: 'Ungroup column',
+  columnActionMenuItemGroupBy: 'Group by {column}',
+  columnActionMenuItemHideColumn: 'Hide {column} column',
+  columnActionMenuItemSortAsc: 'Sort by {column} ascending',
+  columnActionMenuItemSortDesc: 'Sort by {column} descending',
+  columnActionMenuItemUnGroupBy: 'Ungroup by {column}',
   expandAllButtonTitle: 'Expand all',
   expandButtonTitle: 'Expand',
   filterTextFieldClearButtonTitle: 'Clear filter',
-  filterTextFieldPlaceholder: 'Filter',
+  filterTextFieldPlaceholder: 'Filter by {column}',
   rowActionButtonCancel: 'Cancel',
   rowActionButtonSave: 'Save',
   rowActionMenuButtonTitle: 'Row Actions',
   rowActionMenuItemEdit: 'Edit',
+  selectCheckboxTitle: 'Select row',
   rowActionsColumnTitle: 'Actions',
   searchTextFieldClearButtonTitle: 'Clear search',
   searchTextFieldPlaceholder: 'Search',
   selectAllCheckboxTitle: 'Select all',
   showHideColumnsButtonTitle: 'Show/Hide columns',
   toggleDensePaddingSwitchTitle: 'Toggle dense padding',
-  toggleFilterButtonTitle: 'Toggle filters'
+  toggleFilterButtonTitle: 'Toggle filters',
+  toggleSearchButtonTitle: 'Toggle search'
 };
 
 var _excluded = ["defaultColumn", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions"];