material-react-table 0.3.1 → 0.3.2

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$1, TableSortLabel, Collapse, Checkbox, TableRow, TableHead, Tooltip, useTheme, alpha, CircularProgress, TableBody as TableBody$1, TableFooter, Table, FormControlLabel, Switch, Typography, TablePagination, Toolbar as Toolbar$2, TableContainer, Paper, LinearProgress } from '@mui/material';
+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 CloseIcon from '@mui/icons-material/Close';
 import FilterIcon from '@mui/icons-material/FilterList';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -8,8 +8,8 @@ import ClearAllIcon from '@mui/icons-material/ClearAll';
 import SortIcon from '@mui/icons-material/Sort';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
-import ArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+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 SaveIcon from '@mui/icons-material/Save';
@@ -140,16 +140,16 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
       setDensePadding = _useState2[1];
 
   var _useState3 = useState(null),
-      currentEditingRowId = _useState3[0],
-      setCurrentEditingRowId = _useState3[1];
+      currentEditingRow = _useState3[0],
+      setCurrentEditingRow = _useState3[1];
 
   return React.createElement(MaterialReactTableContext.Provider, {
     value: _extends({}, mrtCalcs, props, {
       densePadding: densePadding,
       setDensePadding: setDensePadding,
       setShowFilters: setShowFilters,
-      currentEditingRowId: currentEditingRowId,
-      setCurrentEditingRowId: setCurrentEditingRowId,
+      currentEditingRow: currentEditingRow,
+      setCurrentEditingRow: setCurrentEditingRow,
       showFilters: showFilters,
       // @ts-ignore
       tableInstance: tableInstance
@@ -182,7 +182,6 @@ var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
   };
 
   if (column.Filter) {
-    //@ts-ignore
     return React.createElement(React.Fragment, null, column.Filter({
       column: column
     }));
@@ -332,9 +331,19 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }));
 };
 
-var StyledTableHeadCell = /*#__PURE__*/styled(TableCell$1)({
-  fontWeight: 'bold',
-  verticalAlign: 'text-top'
+var StyledTableHeadCell = /*#__PURE__*/styled(TableCell$6, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'densePadding' && prop !== 'enableColumnResizing';
+  }
+})(function (_ref) {
+  var densePadding = _ref.densePadding,
+      enableColumnResizing = _ref.enableColumnResizing;
+  return {
+    fontWeight: 'bold',
+    verticalAlign: 'text-top',
+    padding: densePadding ? '0.5rem' : '1rem',
+    transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out"
+  };
 });
 var TableCellContents = /*#__PURE__*/styled('div')({
   display: 'grid'
@@ -354,10 +363,10 @@ var Divider = /*#__PURE__*/styled(Divider$1)({
   borderRadius: '2px',
   maxHeight: '2rem'
 });
-var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _column$columns$lengt, _column$columns, _mTableHeadCellProps$;
+var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
+  var _column$columns$lengt, _column$columns, _mTableHeadCellProps$, _mcTableHeadCellProps;
 
-  var column = _ref.column;
+  var column = _ref2.column;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       densePadding = _useMaterialReactTabl.densePadding,
@@ -371,16 +380,16 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
   var mTableHeadCellProps = muiTableHeadCellProps instanceof Function ? muiTableHeadCellProps(column) : muiTableHeadCellProps;
+  var mcTableHeadCellProps = column.muiTableHeadCellProps instanceof Function ? column.muiTableHeadCellProps(column) : column.muiTableHeadCellProps;
 
-  var tableCellProps = _extends({}, mTableHeadCellProps, column.getHeaderProps(), {
-    style: _extends({
-      padding: densePadding ? '0.5rem' : '1rem',
-      transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out"
-    }, column.getHeaderProps().style, (_mTableHeadCellProps$ = mTableHeadCellProps == null ? void 0 : mTableHeadCellProps.style) != null ? _mTableHeadCellProps$ : {})
+  var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps, column.getHeaderProps(), {
+    style: _extends({}, column.getHeaderProps().style, (_mTableHeadCellProps$ = mTableHeadCellProps == null ? void 0 : mTableHeadCellProps.style) != null ? _mTableHeadCellProps$ : {}, (_mcTableHeadCellProps = mcTableHeadCellProps == null ? void 0 : mcTableHeadCellProps.style) != null ? _mcTableHeadCellProps : {})
   });
 
   return React.createElement(StyledTableHeadCell, Object.assign({
-    align: isParentHeader ? 'center' : 'left'
+    align: isParentHeader ? 'center' : 'left',
+    densePadding: densePadding,
+    enableColumnResizing: enableColumnResizing
   }, tableCellProps), React.createElement(TableCellContents, null, React.createElement(TableCellText, {
     style: {
       justifyContent: isParentHeader ? 'center' : undefined
@@ -407,24 +416,43 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   }))));
 };
 
+var TableCell = /*#__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_SelectAllCheckbox = function MRT_SelectAllCheckbox() {
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
       disableSelectAll = _useMaterialReactTabl.disableSelectAll,
-      densePadding = _useMaterialReactTabl.densePadding;
+      densePadding = _useMaterialReactTabl.densePadding,
+      localization = _useMaterialReactTabl.localization;
 
-  return React.createElement(TableCell$1, {
-    style: {
-      width: '2rem',
-      padding: densePadding ? '0' : '0.6rem',
-      transition: 'all 0.2s ease-in-out'
-    },
+  return React.createElement(TableCell, {
+    densePadding: densePadding,
     variant: "head"
   }, !disableSelectAll ? React.createElement(Checkbox, Object.assign({
-    "aria-label": ""
+    "aria-label": localization == null ? void 0 : localization.selectAllCheckboxTitle
   }, tableInstance.getToggleAllPageRowsSelectedProps())) : null);
 };
 
+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 _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
@@ -433,7 +461,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
       densePadding = _useMaterialReactTabl.densePadding,
       renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
 
-  return React.createElement(TableCell$1, Object.assign({
+  return React.createElement(TableCell$6, Object.assign({
     size: "small"
   }, tableInstance.getToggleAllRowsExpandedProps(), {
     style: {
@@ -446,30 +474,27 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
     title: localization == null ? void 0 : localization.expandAllButtonTitle
   }, React.createElement(ArrowRightIcon, {
     fontSize: "small",
-    style: {
-      transform: tableInstance.isAllRowsExpanded ? 'rotate(-180deg)' : anyRowsExpanded ? 'rotate(-90deg)' : 'rotate(0)',
-      transition: 'transform 0.2s'
-    }
+    rotation: tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
   })));
 };
 
 var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
-  var _mTableBodyRowProps$s;
+  var _mTableBodyCellrops$s;
 
   var width = _ref.width;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       muiTableBodyCellProps = _useMaterialReactTabl.muiTableBodyCellProps;
 
-  var mTableBodyRowProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
+  var mTableBodyCellrops = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
 
-  var tableCellProps = _extends({}, mTableBodyRowProps, {
+  var tableCellProps = _extends({}, mTableBodyCellrops, {
     style: _extends({
       width: width
-    }, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
+    }, (_mTableBodyCellrops$s = mTableBodyCellrops == null ? void 0 : mTableBodyCellrops.style) != null ? _mTableBodyCellrops$s : {})
   });
 
-  return React.createElement(TableCell$1, Object.assign({}, tableCellProps));
+  return React.createElement(TableCell$6, Object.assign({}, tableCellProps));
 };
 
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
@@ -479,6 +504,7 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
+      densePadding = _useMaterialReactTabl.densePadding,
       disableExpandAll = _useMaterialReactTabl.disableExpandAll,
       enableRowActions = _useMaterialReactTabl.enableRowActions,
       enableSelection = _useMaterialReactTabl.enableSelection,
@@ -501,7 +527,7 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
     style: _extends({}, headerGroup.getHeaderGroupProps().style, (_mTableHeadRowProps$s = mTableHeadRowProps == null ? void 0 : mTableHeadRowProps.style) != null ? _mTableHeadRowProps$s : {})
   });
 
-  return React.createElement(TableRow, 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, null, 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"
@@ -510,7 +536,9 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
       key: column.getHeaderProps().key,
       column: column
     });
-  }), enableRowActions && positionActionsColumn === 'last' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(StyledTableHeadCell, null, localization == null ? void 0 : localization.actionsHeadColumnTitle)));
+  }), enableRowActions && positionActionsColumn === 'last' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(StyledTableHeadCell, {
+    densePadding: densePadding
+  }, localization == null ? void 0 : localization.actionsHeadColumnTitle)));
 };
 
 var MRT_TableHead = function MRT_TableHead() {
@@ -519,44 +547,114 @@ var MRT_TableHead = function MRT_TableHead() {
       muiTableHeadProps = _useMaterialReactTabl.muiTableHeadProps;
 
   var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps(tableInstance) : muiTableHeadProps;
-  return React.createElement(TableHead, Object.assign({}, tableHeadProps), tableInstance.headerGroups.map(function (headerGroup, index) {
+  return React.createElement(TableHead, Object.assign({}, tableHeadProps), tableInstance.headerGroups.map(function (headerGroup) {
     return React.createElement(MRT_TableHeadRow, {
-      key: index + "-" + headerGroup.id,
+      key: headerGroup.getHeaderGroupProps().key,
       headerGroup: headerGroup
     });
   }));
 };
 
-var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var _mTableCellBodyProps$;
+var MRT_EditCellTextfield = function MRT_EditCellTextfield(_ref) {
+  var _cell$column$muiTable, _currentEditingRow$va;
 
   var cell = _ref.cell;
 
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      localization = _useMaterialReactTabl.localization,
+      currentEditingRow = _useMaterialReactTabl.currentEditingRow,
+      setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
+      muiTableBodyCellEditTextFieldProps = _useMaterialReactTabl.muiTableBodyCellEditTextFieldProps;
+
+  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))
+      }));
+    }
+  };
+
+  var textFieldProps = _extends({}, muiTableBodyCellEditTextFieldProps, cell.column.muiTableBodyCellEditTextFieldProps, {
+    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
+    })));
+  }
+
+  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],
+    variant: "standard"
+  }, textFieldProps));
+};
+
+var TableCell$1 = /*#__PURE__*/styled(TableCell$6, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'densePadding';
+  }
+})(function (_ref) {
+  var densePadding = _ref.densePadding;
+  return {
+    padding: densePadding ? '0.5rem' : '1rem',
+    transition: 'all 0.2s ease-in-out'
+  };
+});
+var MRT_TableBodyCell = function MRT_TableBodyCell(_ref2) {
+  var _mTableCellBodyProps$, _mcTableCellBodyProps;
+
+  var cell = _ref2.cell;
+
   var _useMaterialReactTabl = useMaterialReactTable(),
       onCellClick = _useMaterialReactTabl.onCellClick,
       muiTableBodyCellProps = _useMaterialReactTabl.muiTableBodyCellProps,
-      densePadding = _useMaterialReactTabl.densePadding;
+      densePadding = _useMaterialReactTabl.densePadding,
+      currentEditingRow = _useMaterialReactTabl.currentEditingRow;
 
   var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
+  var mcTableCellBodyProps = cell.column.muiTableBodyCellProps instanceof Function ? cell.column.muiTableBodyCellProps(cell) : cell.column.muiTableBodyCellProps;
 
-  var tableCellProps = _extends({}, mTableCellBodyProps, cell.getCellProps(), {
-    style: _extends({
-      padding: densePadding ? '0.5rem' : '1rem',
-      transition: 'all 0.2s ease-in-out'
-    }, cell.getCellProps().style, (_mTableCellBodyProps$ = mTableCellBodyProps == null ? void 0 : mTableCellBodyProps.style) != null ? _mTableCellBodyProps$ : {})
+  var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps, cell.getCellProps(), {
+    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({
+    densePadding: densePadding,
     onClick: function onClick(event) {
       return onCellClick == null ? void 0 : onCellClick(event, cell);
     }
-  }, tableCellProps), cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
+  }, 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 MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
-  var _mTableBodyRowProps$s;
+var TableCell$2 = /*#__PURE__*/styled(TableCell$6, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'isExpanded';
+  }
+})(function (_ref) {
+  var isExpanded = _ref.isExpanded;
+  return {
+    borderBottom: !isExpanded ? 'none' : undefined,
+    paddingBottom: isExpanded ? '1rem' : 0,
+    paddingTop: isExpanded ? '1rem' : 0,
+    transition: 'all 0.2s ease-in-out'
+  };
+});
+var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
+  var _mTableBodyRowProps$s, _mTableDetailPanelPro;
 
-  var row = _ref.row;
+  var row = _ref2.row;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
@@ -574,18 +672,14 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
   var mTableDetailPanelProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps(row) : muiTableDetailPanelProps;
 
   var tableCellProps = _extends({}, mTableDetailPanelProps, {
-    style: _extends({
-      borderBottom: !row.isExpanded ? 'none' : undefined,
-      paddingBottom: row.isExpanded ? '1rem' : 0,
-      paddingTop: row.isExpanded ? '1rem' : 0,
-      transition: 'all 0.2s ease-in-out'
-    }, (mTableDetailPanelProps == null ? void 0 : mTableDetailPanelProps.style) || {})
+    style: _extends({}, (_mTableDetailPanelPro = mTableDetailPanelProps == null ? void 0 : mTableDetailPanelProps.style) != null ? _mTableDetailPanelPro : {})
   });
 
-  return React.createElement(TableRow, Object.assign({
+  return React.createElement(TableRow$1, Object.assign({
     hover: true
-  }, tableRowProps), React.createElement(TableCell$1, Object.assign({
+  }, tableRowProps), React.createElement(TableCell$2, Object.assign({
     colSpan: tableInstance.visibleColumns.length + 10,
+    isExpanded: row.isExpanded,
     onClick: function onClick(event) {
       return onDetailPanelClick == null ? void 0 : onDetailPanelClick(event, row);
     }
@@ -594,38 +688,65 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
   }, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
 };
 
-var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
-  var row = _ref.row;
+var TableCell$3 = /*#__PURE__*/styled(TableCell$6, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'densePadding' && prop !== 'depth';
+  }
+})(function (_ref) {
+  var densePadding = _ref.densePadding,
+      depth = _ref.depth;
+  return {
+    padding: densePadding ? '0' : '0.6rem',
+    paddingLeft: depth + 0.5 + "rem",
+    transition: 'all 0.2s ease-in-out'
+  };
+});
+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 _useMaterialReactTabl = useMaterialReactTable(),
       localization = _useMaterialReactTabl.localization,
-      tableInstance = _useMaterialReactTabl.tableInstance,
       densePadding = _useMaterialReactTabl.densePadding,
       renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
 
-  return React.createElement(TableCell$1, {
+  return React.createElement(TableCell$3, {
     size: "small",
-    style: {
-      padding: densePadding ? '0' : '0.6rem 0',
-      paddingLeft: row.depth + 0.5 + "rem",
-      transition: 'all 0.2s ease-in-out',
-      width: (renderDetailPanel ? 2 : tableInstance.expandedDepth - row.depth + 2) + "rem"
-    }
+    densePadding: densePadding,
+    depth: row.depth
   }, React.createElement(IconButton$2, Object.assign({
-    disabled: !row.canExpand && !renderDetailPanel,
     "aria-label": localization == null ? void 0 : localization.expandButtonTitle,
+    disabled: !row.canExpand && !renderDetailPanel,
     title: localization == null ? void 0 : localization.expandButtonTitle
   }, row.getToggleRowExpandedProps()), React.createElement(ExpandMoreIcon, {
     fontSize: row.canExpand || renderDetailPanel ? 'medium' : 'small',
-    style: {
-      transform: !row.canExpand && !renderDetailPanel ? 'rotate(-90deg)' : row.isExpanded ? 'rotate(-180deg)' : 'rotate(0)',
-      transition: 'transform 0.2s'
-    }
+    rotation: !row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0
   })));
 };
 
-var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
-  var row = _ref.row;
+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 _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
@@ -639,12 +760,8 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     onRowSelectChange == null ? void 0 : onRowSelectChange(event, row, tableInstance.selectedFlatRows);
   };
 
-  return React.createElement(TableCell$1, {
-    style: {
-      width: '2rem',
-      padding: densePadding ? '0' : '0.6rem',
-      transition: 'all 0.2s ease-in-out'
-    }
+  return React.createElement(TableCell$4, {
+    densePadding: densePadding
   }, React.createElement(Checkbox, Object.assign({}, row.getToggleRowSelectedProps(), {
     onChange: onSelectChange
   })));
@@ -665,11 +782,11 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
       enableRowEditing = _useMaterialReactTabl.enableRowEditing,
       localization = _useMaterialReactTabl.localization,
       renderRowActionMenuItems = _useMaterialReactTabl.renderRowActionMenuItems,
-      setCurrentEditingRowId = _useMaterialReactTabl.setCurrentEditingRowId,
+      setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
       tableInstance = _useMaterialReactTabl.tableInstance;
 
   var handleEdit = function handleEdit() {
-    setCurrentEditingRowId(row.id);
+    setCurrentEditingRow(_extends({}, row));
     setAnchorEl(null);
   };
 
@@ -1457,11 +1574,12 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       localization = _useMaterialReactTabl.localization,
-      setCurrentEditingRowId = _useMaterialReactTabl.setCurrentEditingRowId,
-      onRowEditSubmit = _useMaterialReactTabl.onRowEditSubmit;
+      setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
+      onRowEditSubmit = _useMaterialReactTabl.onRowEditSubmit,
+      currentEditingRow = _useMaterialReactTabl.currentEditingRow;
 
   var handleCancel = function handleCancel() {
-    setCurrentEditingRowId(null);
+    setCurrentEditingRow(null);
   };
 
   var handleSave = /*#__PURE__*/function () {
@@ -1470,9 +1588,11 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              setCurrentEditingRowId(null);
-              _context.next = 3;
-              return onRowEditSubmit == null ? void 0 : onRowEditSubmit(row);
+              _context.next = 2;
+              return onRowEditSubmit == null ? void 0 : onRowEditSubmit(currentEditingRow != null ? currentEditingRow : row);
+
+            case 2:
+              setCurrentEditingRow(null);
 
             case 3:
             case "end":
@@ -1518,7 +1638,7 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       localization = _useMaterialReactTabl.localization,
-      currentEditingRowId = _useMaterialReactTabl.currentEditingRowId,
+      currentEditingRow = _useMaterialReactTabl.currentEditingRow,
       renderRowActions = _useMaterialReactTabl.renderRowActions,
       tableInstance = _useMaterialReactTabl.tableInstance;
 
@@ -1536,7 +1656,7 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
     return React.createElement(React.Fragment, null, renderRowActions(row, tableInstance));
   }
 
-  if (row.id === currentEditingRowId) {
+  if (row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id)) {
     return React.createElement(MRT_EditActionButtons, {
       row: row
     });
@@ -1554,10 +1674,21 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
   }));
 };
 
-var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
+var TableRow = /*#__PURE__*/styled(TableRow$1, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'isSelected';
+  }
+})(function (_ref) {
+  var isSelected = _ref.isSelected,
+      theme = _ref.theme;
+  return {
+    backgroundColor: isSelected ? alpha(theme.palette.primary.light, 0.1) : 'transparent'
+  };
+});
+var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
   var _mTableBodyRowProps$s;
 
-  var row = _ref.row;
+  var row = _ref2.row;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
@@ -1568,21 +1699,19 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       positionActionsColumn = _useMaterialReactTabl.positionActionsColumn,
       renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
 
-  var theme = useTheme();
   var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
 
   var tableRowProps = _extends({}, mTableBodyRowProps, row.getRowProps(), {
-    style: _extends({
-      backgroundColor: row.isSelected ? alpha(theme.palette.primary.light, 0.1) : 'transparent'
-    }, row.getRowProps().style, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
+    style: _extends({}, row.getRowProps().style, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
   });
 
   return React.createElement(React.Fragment, null, React.createElement(TableRow, Object.assign({
+    isSelected: row.isSelected,
     hover: true,
     onClick: function onClick(event) {
       return onRowClick == null ? void 0 : onRowClick(event, row);
     }
-  }, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React.createElement(TableCell$1, null, React.createElement(MRT_ToggleRowActionMenuButton, {
+  }, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React.createElement(TableCell$6, null, React.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
   })), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_ExpandButton, {
     row: row
@@ -1593,7 +1722,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       key: cell.getCellProps().key,
       cell: cell
     });
-  }), enableRowActions && positionActionsColumn === 'last' && React.createElement(TableCell$1, null, React.createElement(MRT_ToggleRowActionMenuButton, {
+  }), enableRowActions && positionActionsColumn === 'last' && React.createElement(TableCell$6, null, React.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
   }))), renderDetailPanel && React.createElement(MRT_TableDetailPanel, {
     row: row
@@ -1603,26 +1732,12 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
 var TableBody = /*#__PURE__*/styled(TableBody$1)({
   overflowY: 'hidden'
 });
-var CircularProgressWrapper = /*#__PURE__*/styled('div')(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    backgroundColor: alpha(theme.palette.background.paper, 0.5),
-    display: 'grid',
-    height: '100%',
-    justifyContent: 'center',
-    margin: 'auto',
-    paddingTop: '5rem',
-    position: 'fixed',
-    width: 'calc(100% - 2rem)'
-  };
-});
 var MRT_TableBody = function MRT_TableBody() {
   var _muiTableBodyProps$st;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
       muiTableBodyProps = _useMaterialReactTabl.muiTableBodyProps,
-      isLoading = _useMaterialReactTabl.isLoading,
       manualPagination = _useMaterialReactTabl.manualPagination;
 
   var rows = manualPagination ? tableInstance.rows : tableInstance.page;
@@ -1631,7 +1746,7 @@ var MRT_TableBody = function MRT_TableBody() {
     style: _extends({}, tableInstance.getTableBodyProps().style, (_muiTableBodyProps$st = muiTableBodyProps == null ? void 0 : muiTableBodyProps.style) != null ? _muiTableBodyProps$st : {})
   });
 
-  return React.createElement(TableBody, Object.assign({}, tableBodyProps), isLoading && React.createElement(CircularProgressWrapper, null, React.createElement(CircularProgress, null)), rows.map(function (row) {
+  return React.createElement(TableBody, Object.assign({}, tableBodyProps), rows.map(function (row) {
     tableInstance.prepareRow(row);
     return React.createElement(MRT_TableBodyRow, {
       key: row.getRowProps().key,
@@ -1640,30 +1755,42 @@ var MRT_TableBody = function MRT_TableBody() {
   }));
 };
 
-var TableCell = /*#__PURE__*/styled(TableCell$1)({
-  fontWeight: 'bold'
+var TableCell$5 = /*#__PURE__*/styled(TableCell$6, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'densePadding' && prop !== 'enableColumnResizing';
+  }
+})(function (_ref) {
+  var densePadding = _ref.densePadding,
+      enableColumnResizing = _ref.enableColumnResizing;
+  return {
+    fontWeight: 'bold',
+    verticalAlign: 'text-top',
+    padding: densePadding ? '0.5rem' : '1rem',
+    transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out"
+  };
 });
-var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
-  var _column$columns$lengt, _column$columns, _mTableFooterCellProp;
+var MRT_TableFooterCell = function MRT_TableFooterCell(_ref2) {
+  var _column$columns$lengt, _column$columns, _mTableFooterCellProp, _mcTableFooterCellPro;
 
-  var column = _ref.column;
+  var column = _ref2.column;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       muiTableFooterCellProps = _useMaterialReactTabl.muiTableFooterCellProps,
-      densePadding = _useMaterialReactTabl.densePadding;
+      densePadding = _useMaterialReactTabl.densePadding,
+      enableColumnResizing = _useMaterialReactTabl.enableColumnResizing;
 
   var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
   var mTableFooterCellProps = muiTableFooterCellProps instanceof Function ? muiTableFooterCellProps(column) : muiTableFooterCellProps;
+  var mcTableFooterCellProps = column.muiTableFooterCellProps instanceof Function ? column.muiTableFooterCellProps(column) : column.muiTableFooterCellProps;
 
-  var tableCellProps = _extends({}, mTableFooterCellProps, column.getFooterProps(), {
-    style: _extends({
-      padding: densePadding ? '0.5rem' : '1rem',
-      transition: 'all 0.2s ease-in-out'
-    }, column.getFooterProps().style, (_mTableFooterCellProp = mTableFooterCellProps == null ? void 0 : mTableFooterCellProps.style) != null ? _mTableFooterCellProp : {})
+  var tableCellProps = _extends({}, mTableFooterCellProps, mcTableFooterCellProps, column.getFooterProps(), {
+    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, Object.assign({
+  return React.createElement(TableCell$5, Object.assign({
     align: isParentHeader ? 'center' : 'left',
+    densePadding: densePadding,
+    enableColumnResizing: enableColumnResizing,
     variant: "head"
   }, tableCellProps), column.render('Footer'));
 };
@@ -1693,13 +1820,13 @@ 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, Object.assign({}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React.createElement(MRT_TableSpacerCell, null), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_TableSpacerCell, {
+  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), enableRowActions && 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"
-  }), footerGroup.headers.map(function (column, index) {
+  }), footerGroup.headers.map(function (column) {
     return React.createElement(MRT_TableFooterCell, {
-      key: index + "-" + column.id,
+      key: column.getFooterProps().key,
       column: column
     });
   }), enableRowActions && positionActionsColumn === 'last' && React.createElement(MRT_TableSpacerCell, null));
@@ -1710,9 +1837,9 @@ var MRT_TableFooter = function MRT_TableFooter() {
       muiTableFooterProps = _useMaterialReactTabl.muiTableFooterProps,
       tableInstance = _useMaterialReactTabl.tableInstance;
 
-  return React.createElement(TableFooter, Object.assign({}, muiTableFooterProps), tableInstance.footerGroups.map(function (footerGroup, index) {
+  return React.createElement(TableFooter, Object.assign({}, muiTableFooterProps), tableInstance.footerGroups.map(function (footerGroup) {
     return React.createElement(MRT_TableFooterRow, {
-      key: index + "-" + footerGroup.id,
+      key: footerGroup.getFooterGroupProps().key,
       footerGroup: footerGroup
     });
   }));
@@ -1949,21 +2076,14 @@ var ToolbarActionsContainer = /*#__PURE__*/styled('div')({
 var MRT_ToolbarTop = function MRT_ToolbarTop() {
   var _useMaterialReactTabl = useMaterialReactTable(),
       disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter,
-      disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
-      muiTableTitleProps = _useMaterialReactTabl.muiTableTitleProps,
-      disableFilters = _useMaterialReactTabl.disableFilters,
+      hideToolbarActions = _useMaterialReactTabl.hideToolbarActions,
       manualPagination = _useMaterialReactTabl.manualPagination,
-      positionPagination = _useMaterialReactTabl.positionPagination,
+      muiTableTitleProps = _useMaterialReactTabl.muiTableTitleProps,
       muiTableToolbarTopProps = _useMaterialReactTabl.muiTableToolbarTopProps,
-      hideToolbarActions = _useMaterialReactTabl.hideToolbarActions,
+      positionPagination = _useMaterialReactTabl.positionPagination,
       positionToolbarActions = _useMaterialReactTabl.positionToolbarActions,
-      title = _useMaterialReactTabl.title,
-      tableInstance = _useMaterialReactTabl.tableInstance; // if no features in the toolbar are enabled, don't render anything
-
-
-  if (!muiTableToolbarTopProps && !title && disableColumnHiding && disableFilters && disableGlobalFilter) {
-    return null;
-  }
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      title = _useMaterialReactTabl.title;
 
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
   return React.createElement(Toolbar, Object.assign({
@@ -1980,21 +2100,12 @@ var Toolbar$1 = /*#__PURE__*/styled(Toolbar$2)({
 });
 var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
   var _useMaterialReactTabl = useMaterialReactTable(),
-      disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter,
-      disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
+      hideToolbarActions = _useMaterialReactTabl.hideToolbarActions,
       manualPagination = _useMaterialReactTabl.manualPagination,
+      muiTableToolbarBottomProps = _useMaterialReactTabl.muiTableToolbarBottomProps,
       positionPagination = _useMaterialReactTabl.positionPagination,
-      disableFilters = _useMaterialReactTabl.disableFilters,
-      hideToolbarActions = _useMaterialReactTabl.hideToolbarActions,
       positionToolbarActions = _useMaterialReactTabl.positionToolbarActions,
-      muiTableToolbarBottomProps = _useMaterialReactTabl.muiTableToolbarBottomProps,
-      title = _useMaterialReactTabl.title,
-      tableInstance = _useMaterialReactTabl.tableInstance; // if no features in the toolbar are enabled, don't render anything
-
-
-  if (!muiTableToolbarBottomProps && !title && disableColumnHiding && disableFilters && disableGlobalFilter) {
-    return null;
-  }
+      tableInstance = _useMaterialReactTabl.tableInstance;
 
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
   return React.createElement(Toolbar$1, Object.assign({
@@ -2002,16 +2113,33 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
   }, 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));
 };
 
+var CircularProgressWrapper = /*#__PURE__*/styled('div')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    alignItems: 'center',
+    backgroundColor: alpha(theme.palette.background.paper, 0.5),
+    display: 'grid',
+    height: '100%',
+    justifyContent: 'center',
+    margin: 'auto',
+    position: 'absolute',
+    width: 'calc(100% - 2rem)'
+  };
+});
 var MRT_TableContainer = function MRT_TableContainer() {
   var _useMaterialReactTabl = useMaterialReactTable(),
       muiTableContainerProps = _useMaterialReactTabl.muiTableContainerProps,
       hideToolbarTop = _useMaterialReactTabl.hideToolbarTop,
       hideToolbarBottom = _useMaterialReactTabl.hideToolbarBottom,
+      isLoading = _useMaterialReactTabl.isLoading,
       isFetching = _useMaterialReactTabl.isFetching;
 
   return React.createElement(TableContainer, Object.assign({
     component: Paper
-  }, muiTableContainerProps), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), isFetching && React.createElement(LinearProgress, null), React.createElement(MRT_Table, null), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, null));
+  }, muiTableContainerProps), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), isFetching && React.createElement(LinearProgress, null), isLoading && React.createElement(CircularProgressWrapper, null, React.createElement(CircularProgress, {
+    "aria-busy": "true",
+    "aria-label": "Loading data"
+  })), React.createElement(MRT_Table, null), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, null));
 };
 
 var defaultLocalization = {
@@ -2027,13 +2155,14 @@ var defaultLocalization = {
   expandButtonTitle: 'Expand',
   filterTextFieldClearButtonTitle: 'Clear filter',
   filterTextFieldPlaceholder: 'Filter',
+  rowActionButtonCancel: 'Cancel',
+  rowActionButtonSave: 'Save',
   rowActionMenuButtonTitle: 'Row Actions',
-  rowActionsColumnTitle: 'Actions',
   rowActionMenuItemEdit: 'Edit',
-  rowActionButtonSave: 'Save',
-  rowActionButtonCancel: 'Cancel',
+  rowActionsColumnTitle: 'Actions',
   searchTextFieldClearButtonTitle: 'Clear search',
   searchTextFieldPlaceholder: 'Search',
+  selectAllCheckboxTitle: 'Select all',
   showHideColumnsButtonTitle: 'Show/Hide columns',
   toggleDensePaddingSwitchTitle: 'Toggle dense padding',
   toggleFilterButtonTitle: 'Toggle filters'