material-react-table 0.8.13 → 0.9.0

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

@@ -1,6 +1,6 @@
 import React, { useMemo, forwardRef, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityMedium, DensitySmall, KeyboardDoubleArrowDown, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
-import { createTable, useTableInstance, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
+import { createTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useTableInstance } from '@tanstack/react-table';
 import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
 import { rankItem, rankings } from '@tanstack/match-sorter-utils';
 import { useDrop, useDrag, DndProvider } from 'react-dnd';
@@ -187,7 +187,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       _tableInstance$option = tableInstance.options,
       ExpandMoreIcon = _tableInstance$option.icons.ExpandMoreIcon,
       localization = _tableInstance$option.localization,
-      onRowExpandChange = _tableInstance$option.onRowExpandChange,
+      onMrtRowExpandChange = _tableInstance$option.onMrtRowExpandChange,
       renderDetailPanel = _tableInstance$option.renderDetailPanel;
 
   var _getState = getState(),
@@ -195,7 +195,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
 
   var handleToggleExpand = function handleToggleExpand(event) {
     row.toggleExpanded();
-    onRowExpandChange == null ? void 0 : onRowExpandChange({
+    onMrtRowExpandChange == null ? void 0 : onMrtRowExpandChange({
       event: event,
       row: row,
       tableInstance: tableInstance
@@ -503,7 +503,8 @@ var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
 
   return React.createElement(Box, {
     sx: {
-      mr: '4px'
+      minWidth: '70px',
+      textAlign: 'center'
     }
   }, column.getIsPinned() ? React.createElement(Tooltip, {
     arrow: true,
@@ -572,6 +573,62 @@ var MRT_GrabHandleButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, React.createElement(DragHandleIcon, null)));
 });
 
+var getAllLeafColumnDefs = function getAllLeafColumnDefs(columns) {
+  var lowestLevelColumns = columns;
+  var currentCols = columns;
+
+  while (!!((_currentCols = currentCols) != null && _currentCols.length) && currentCols.some(function (col) {
+    return col.columns;
+  })) {
+    var _currentCols;
+
+    var nextCols = currentCols.filter(function (col) {
+      return !!col.columns;
+    }).map(function (col) {
+      return col.columns;
+    }).flat();
+
+    if (nextCols.every(function (col) {
+      return !(col != null && col.columns);
+    })) {
+      lowestLevelColumns = [].concat(lowestLevelColumns, nextCols);
+    }
+
+    currentCols = nextCols;
+  }
+
+  return lowestLevelColumns.filter(function (col) {
+    return !col.columns;
+  });
+};
+var createGroup = function createGroup(table, column, currentFilterFns) {
+  var _column$columns;
+
+  return table.createGroup(_extends({}, column, {
+    columns: column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.map == null ? void 0 : _column$columns.map(function (col) {
+      return col.columns ? createGroup(table, col, currentFilterFns) : createDataColumn(table, col, currentFilterFns);
+    })
+  }));
+};
+var createDataColumn = function createDataColumn(table, column, currentFilterFns) {
+  return (// @ts-ignore
+    table.createDataColumn(column.id, _extends({
+      filterFn: currentFilterFns[column.id] instanceof Function ? currentFilterFns[column.id] : defaultFilterFNs[currentFilterFns[column.id]]
+    }, column))
+  );
+};
+var createDisplayColumn = function createDisplayColumn(table, column) {
+  return table.createDisplayColumn(column);
+};
+var reorderColumn = function reorderColumn(movingColumn, receivingColumn, columnOrder, setColumnOrder) {
+  if (movingColumn.getCanPin()) {
+    movingColumn.pin(receivingColumn.getIsPinned());
+  }
+
+  columnOrder.splice(columnOrder.indexOf(receivingColumn.id), 0, columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0]);
+  setColumnOrder([].concat(columnOrder));
+};
+
 var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var _column$columns2;
 
@@ -582,7 +639,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
-      onToggleColumnVisibility = _tableInstance$option.onToggleColumnVisibility,
+      onMrtToggleColumnVisibility = _tableInstance$option.onMrtToggleColumnVisibility,
       setColumnOrder = tableInstance.setColumnOrder;
 
   var _getState = getState(),
@@ -592,19 +649,10 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var columnDef = column.columnDef,
       columnDefType = column.columnDefType;
 
-  var reorder = function reorder(movingColumn, receivingColumn) {
-    if (movingColumn.getCanPin()) {
-      movingColumn.pin(receivingColumn.getIsPinned());
-    }
-
-    columnOrder.splice(columnOrder.indexOf(receivingColumn.id), 0, columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0]);
-    setColumnOrder([].concat(columnOrder));
-  };
-
   var _useDrop = useDrop({
     accept: 'column',
     drop: function drop(movingColumn) {
-      return reorder(movingColumn, column);
+      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
     }
   }),
       dropRef = _useDrop[1];
@@ -638,7 +686,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       column.toggleVisibility();
     }
 
-    onToggleColumnVisibility == null ? void 0 : onToggleColumnVisibility({
+    onMrtToggleColumnVisibility == null ? void 0 : onMrtToggleColumnVisibility({
       column: column,
       columnVisibility: columnVisibility,
       tableInstance: tableInstance
@@ -658,7 +706,8 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     ref: previewRef,
     sx: {
       display: 'flex',
-      flexWrap: 'nowrap'
+      flexWrap: 'nowrap',
+      gap: '8px'
     }
   }, columnDefType !== 'group' && enableColumnOrdering && columnDef.enableColumnOrdering !== false && !allColumns.some(function (col) {
     return col.columnDefType === 'group';
@@ -679,13 +728,10 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     },
     checked: switchChecked,
     control: React.createElement(Switch, null),
-    disabled: isSubMenu && switchChecked || !column.getCanHide(),
+    disabled: isSubMenu && switchChecked || !column.getCanHide() || column.getIsGrouped(),
     label: columnDef.header,
     onChange: function onChange() {
       return handleToggleColumnHidden(column);
-    },
-    sx: {
-      ml: '4px'
     }
   }))), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
     return React.createElement(MRT_ShowHideColumnsMenuItems, {
@@ -705,9 +751,12 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       tableInstance = _ref.tableInstance;
   var getAllColumns = tableInstance.getAllColumns,
       getAllLeafColumns = tableInstance.getAllLeafColumns,
+      getCenterLeafColumns = tableInstance.getCenterLeafColumns,
       getIsAllColumnsVisible = tableInstance.getIsAllColumnsVisible,
       getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
       getIsSomeColumnsVisible = tableInstance.getIsSomeColumnsVisible,
+      getLeftLeafColumns = tableInstance.getLeftLeafColumns,
+      getRightLeafColumns = tableInstance.getRightLeafColumns,
       getState = tableInstance.getState,
       toggleAllColumnsVisible = tableInstance.toggleAllColumnsVisible,
       _tableInstance$option = tableInstance.options,
@@ -734,17 +783,15 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     if (columnOrder.length > 0 && !columns.some(function (col) {
       return col.columnDefType === 'group';
     })) {
-      var _columnOrder$map;
-
-      return (_columnOrder$map = columnOrder.map(function (colId) {
-        return columns.find(function (col) {
-          return col.id === colId;
+      return [].concat(getLeftLeafColumns(), Array.from(new Set(columnOrder)).map(function (colId) {
+        return getCenterLeafColumns().find(function (col) {
+          return (col == null ? void 0 : col.id) === colId;
         });
-      })) != null ? _columnOrder$map : columns;
+      }), getRightLeafColumns()).filter(Boolean);
     }
 
     return columns;
-  }, [getAllColumns(), columnOrder, columnPinning]);
+  }, [columnOrder, columnPinning, getAllColumns(), getCenterLeafColumns(), getLeftLeafColumns(), getRightLeafColumns()]);
   return React.createElement(Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
@@ -827,7 +874,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       SortIcon = _tableInstance$option2.SortIcon,
       RestartAltIcon = _tableInstance$option2.RestartAltIcon,
       VisibilityOffIcon = _tableInstance$option2.VisibilityOffIcon,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       localization = _tableInstance$option.localization,
       setShowFilters = tableInstance.setShowFilters;
   var column = header.column;
@@ -895,7 +942,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       var _document$getElementB, _header$muiTableHeadC, _header$muiTableHeadC2;
 
       return (_document$getElementB = document.getElementById( // @ts-ignore
-      (_header$muiTableHeadC = (_header$muiTableHeadC2 = header.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _header$muiTableHeadC2.id) != null ? _header$muiTableHeadC : "mrt-" + idPrefix + "-" + header.id + "-filter-text-field")) == null ? void 0 : _document$getElementB.focus();
+      (_header$muiTableHeadC = (_header$muiTableHeadC2 = header.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _header$muiTableHeadC2.id) != null ? _header$muiTableHeadC : "mrt-" + tableId + "-" + header.id + "-filter-text-field")) == null ? void 0 : _document$getElementB.focus();
     }, 200);
     setAnchorEl(null);
   };
@@ -1108,7 +1155,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
       CancelIcon = _tableInstance$option2.CancelIcon,
       SaveIcon = _tableInstance$option2.SaveIcon,
       localization = _tableInstance$option.localization,
-      onEditSubmit = _tableInstance$option.onEditSubmit,
+      onMrtEditRowSubmit = _tableInstance$option.onMrtEditRowSubmit,
       setCurrentEditingRow = tableInstance.setCurrentEditingRow;
 
   var _getState = getState(),
@@ -1122,7 +1169,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
   };
 
   var handleSave = function handleSave() {
-    onEditSubmit == null ? void 0 : onEditSubmit({
+    onMrtEditRowSubmit == null ? void 0 : onMrtEditRowSubmit({
       row: currentEditingRow != null ? currentEditingRow : row,
       tableInstance: tableInstance
     });
@@ -1234,23 +1281,29 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       _tableInstance$option = tableInstance.options,
       localization = _tableInstance$option.localization,
       muiSelectCheckboxProps = _tableInstance$option.muiSelectCheckboxProps,
-      onSelectChange = _tableInstance$option.onSelectChange,
-      onSelectAllChange = _tableInstance$option.onSelectAllChange;
+      onMrtSelectRowChange = _tableInstance$option.onMrtSelectRowChange,
+      onMrtSelectAllChange = _tableInstance$option.onMrtSelectAllChange,
+      selectAllMode = _tableInstance$option.selectAllMode;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
 
   var handleSelectChange = function handleSelectChange(event) {
     if (selectAll) {
-      tableInstance.getToggleAllRowsSelectedHandler()(event);
-      onSelectAllChange == null ? void 0 : onSelectAllChange({
+      if (selectAllMode === 'all') {
+        tableInstance.getToggleAllRowsSelectedHandler()(event);
+      } else if (selectAllMode === 'page') {
+        tableInstance.getToggleAllPageRowsSelectedHandler()(event);
+      }
+
+      onMrtSelectAllChange == null ? void 0 : onMrtSelectAllChange({
         event: event,
         selectedRows: event.target.checked ? getRowModel().flatRows : [],
         tableInstance: tableInstance
       });
     } else if (row) {
       row == null ? void 0 : row.getToggleSelectedHandler()(event);
-      onSelectChange == null ? void 0 : onSelectChange({
+      onMrtSelectRowChange == null ? void 0 : onMrtSelectRowChange({
         event: event,
         row: row,
         selectedRows: event.target.checked ? [].concat(getSelectedRowModel().flatRows, [row]) : getSelectedRowModel().flatRows.filter(function (selectedRow) {
@@ -1298,14 +1351,14 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
       FullscreenExitIcon = _tableInstance$option2.FullscreenExitIcon,
       FullscreenIcon = _tableInstance$option2.FullscreenIcon,
       localization = _tableInstance$option.localization,
-      onToggleFullScreen = _tableInstance$option.onToggleFullScreen,
+      onMrtToggleFullScreen = _tableInstance$option.onMrtToggleFullScreen,
       setIsFullScreen = tableInstance.setIsFullScreen;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
   var handleToggleFullScreen = function handleToggleFullScreen(event) {
-    onToggleFullScreen == null ? void 0 : onToggleFullScreen({
+    onMrtToggleFullScreen == null ? void 0 : onMrtToggleFullScreen({
       event: event,
       isFullScreen: !isFullScreen,
       tableInstance: tableInstance
@@ -1363,14 +1416,14 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
       DensityMediumIcon = _tableInstance$option2.DensityMediumIcon,
       DensitySmallIcon = _tableInstance$option2.DensitySmallIcon,
       localization = _tableInstance$option.localization,
-      onToggleDensePadding = _tableInstance$option.onToggleDensePadding,
+      onMrtToggleDensePadding = _tableInstance$option.onMrtToggleDensePadding,
       setIsDensePadding = tableInstance.setIsDensePadding;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
 
   var handleToggleDensePadding = function handleToggleDensePadding(event) {
-    onToggleDensePadding == null ? void 0 : onToggleDensePadding({
+    onMrtToggleDensePadding == null ? void 0 : onMrtToggleDensePadding({
       event: event,
       isDensePadding: !isDensePadding,
       tableInstance: tableInstance
@@ -1398,14 +1451,14 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
       FilterListIcon = _tableInstance$option2.FilterListIcon,
       FilterListOffIcon = _tableInstance$option2.FilterListOffIcon,
       localization = _tableInstance$option.localization,
-      onToggleShowFilters = _tableInstance$option.onToggleShowFilters,
+      onMrtToggleShowFilters = _tableInstance$option.onMrtToggleShowFilters,
       setShowFilters = tableInstance.setShowFilters;
 
   var _getState = getState(),
       showFilters = _getState.showFilters;
 
   var handleToggleShowFilters = function handleToggleShowFilters(event) {
-    onToggleShowFilters == null ? void 0 : onToggleShowFilters({
+    onMrtToggleShowFilters == null ? void 0 : onMrtToggleShowFilters({
       event: event,
       showFilters: !showFilters,
       tableInstance: tableInstance
@@ -1432,10 +1485,10 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
       _tableInstance$option2 = _tableInstance$option.icons,
       SearchIcon = _tableInstance$option2.SearchIcon,
       SearchOffIcon = _tableInstance$option2.SearchOffIcon,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       localization = _tableInstance$option.localization,
       muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
-      onToggleShowGlobalFilter = _tableInstance$option.onToggleShowGlobalFilter,
+      onMrtToggleShowGlobalFilter = _tableInstance$option.onMrtToggleShowGlobalFilter,
       setShowGlobalFilter = tableInstance.setShowGlobalFilter;
 
   var _getState = getState(),
@@ -1446,7 +1499,7 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
   }) : muiSearchTextFieldProps;
 
   var handleToggleSearch = function handleToggleSearch(event) {
-    onToggleShowGlobalFilter == null ? void 0 : onToggleShowGlobalFilter({
+    onMrtToggleShowGlobalFilter == null ? void 0 : onMrtToggleShowGlobalFilter({
       event: event,
       showGlobalFilter: !showGlobalFilter,
       tableInstance: tableInstance
@@ -1455,7 +1508,7 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
     setTimeout(function () {
       var _document$getElementB, _textFieldProps$id;
 
-      return (_document$getElementB = document.getElementById((_textFieldProps$id = textFieldProps == null ? void 0 : textFieldProps.id) != null ? _textFieldProps$id : "mrt-" + idPrefix + "-search-text-field")) == null ? void 0 : _document$getElementB.focus();
+      return (_document$getElementB = document.getElementById((_textFieldProps$id = textFieldProps == null ? void 0 : textFieldProps.id) != null ? _textFieldProps$id : "mrt-" + tableId + "-search-text-field")) == null ? void 0 : _document$getElementB.focus();
     }, 200);
   };
 
@@ -1475,10 +1528,10 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
       _tableInstance$option2 = _tableInstance$option.icons,
       SearchIcon = _tableInstance$option2.SearchIcon,
       CloseIcon = _tableInstance$option2.CloseIcon,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       localization = _tableInstance$option.localization,
       muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
-      onGlobalSearchFilterChange = _tableInstance$option.onGlobalSearchFilterChange;
+      onMrtGlobalFilterValueChange = _tableInstance$option.onMrtGlobalFilterValueChange;
 
   var _getState = getState(),
       globalFilter = _getState.globalFilter,
@@ -1496,7 +1549,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
     var _event$target$value;
 
     setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
-    onGlobalSearchFilterChange == null ? void 0 : onGlobalSearchFilterChange({
+    onMrtGlobalFilterValueChange == null ? void 0 : onMrtGlobalFilterValueChange({
       event: event,
       tableInstance: tableInstance
     });
@@ -1518,7 +1571,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
     "in": showGlobalFilter,
     orientation: "horizontal"
   }, React.createElement(TextField, Object.assign({
-    id: "mrt-" + idPrefix + "-search-text-field",
+    id: "mrt-" + tableId + "-search-text-field",
     placeholder: localization.search,
     onChange: function onChange(event) {
       setSearchValue(event.target.value);
@@ -1573,6 +1626,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
       enableFullScreenToggle = _tableInstance$option.enableFullScreenToggle,
       enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
       enableHiding = _tableInstance$option.enableHiding,
+      positionGlobalFilter = _tableInstance$option.positionGlobalFilter,
       renderToolbarInternalActions = _tableInstance$option.renderToolbarInternalActions;
   return React.createElement(Box, {
     sx: {
@@ -1587,7 +1641,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
     MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
     MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
     tableInstance: tableInstance
-  })) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && React.createElement(MRT_SearchTextField, {
+  })) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_SearchTextField, {
     tableInstance: tableInstance
   }), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
     tableInstance: tableInstance
@@ -1712,7 +1766,8 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
 };
 
 var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
-  var tableInstance = _ref.tableInstance;
+  var alignTo = _ref.alignTo,
+      tableInstance = _ref.tableInstance;
   var muiLinearProgressProps = tableInstance.options.muiLinearProgressProps,
       getState = tableInstance.getState;
 
@@ -1726,10 +1781,19 @@ var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
   return React.createElement(Collapse, {
     "in": isLoading || showProgressBars,
     mountOnEnter: true,
-    unmountOnExit: true
+    unmountOnExit: true,
+    sx: {
+      bottom: alignTo === 'bottom' ? 0 : undefined,
+      position: 'absolute',
+      top: alignTo === 'top' ? 0 : undefined,
+      width: '100%'
+    }
   }, React.createElement(LinearProgress, Object.assign({
     "aria-label": "Loading",
-    "aria-busy": "true"
+    "aria-busy": "true",
+    sx: {
+      position: 'relative'
+    }
   }, linearProgressProps)));
 };
 
@@ -1753,25 +1817,28 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   var tableInstance = _ref2.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
+      enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
       enablePagination = _tableInstance$option.enablePagination,
       enableToolbarInternalActions = _tableInstance$option.enableToolbarInternalActions,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       muiTableToolbarTopProps = _tableInstance$option.muiTableToolbarTopProps,
       positionPagination = _tableInstance$option.positionPagination,
+      positionGlobalFilter = _tableInstance$option.positionGlobalFilter,
       positionToolbarActions = _tableInstance$option.positionToolbarActions,
       positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner,
       renderToolbarCustomActions = _tableInstance$option.renderToolbarCustomActions;
 
   var _getState = getState(),
-      isFullScreen = _getState.isFullScreen;
+      isFullScreen = _getState.isFullScreen,
+      showGlobalFilter = _getState.showGlobalFilter;
 
   var isMobile = useMediaQuery('(max-width:720px)');
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
     tableInstance: tableInstance
   }) : muiTableToolbarTopProps;
-  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions;
+  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && (!!renderToolbarCustomActions || showGlobalFilter);
   return React.createElement(Toolbar, Object.assign({
-    id: "mrt-" + idPrefix + "-toolbar-top",
+    id: "mrt-" + tableId + "-toolbar-top",
     variant: "dense"
   }, toolbarProps, {
     sx: function sx(theme) {
@@ -1793,15 +1860,18 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       position: stackAlertBanner ? 'relative' : 'absolute',
       right: 0,
       top: 0,
-      width: 'calc(100% - 1rem)'
+      width: renderToolbarCustomActions ? '100%' : undefined
     }
-  }, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions({
+  }, enableGlobalFilter && positionGlobalFilter === 'left' && React.createElement(MRT_SearchTextField, {
+    tableInstance: tableInstance
+  }), (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions({
     tableInstance: tableInstance
   })) != null ? _renderToolbarCustomA : React.createElement("span", null), enableToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, {
     tableInstance: tableInstance
   })), React.createElement("div", null, enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
     tableInstance: tableInstance
   })), React.createElement(MRT_LinearProgressBar, {
+    alignTo: "bottom",
     tableInstance: tableInstance
   }));
 };
@@ -1811,7 +1881,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enableToolbarInternalActions = _tableInstance$option.enableToolbarInternalActions,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       enablePagination = _tableInstance$option.enablePagination,
       muiTableToolbarBottomProps = _tableInstance$option.muiTableToolbarBottomProps,
       positionPagination = _tableInstance$option.positionPagination,
@@ -1828,7 +1898,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
   }) : muiTableToolbarBottomProps;
   var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'bottom' && positionToolbarActions === 'bottom' || positionToolbarAlertBanner === 'bottom' && !!renderToolbarCustomActions && positionToolbarActions === 'bottom';
   return React.createElement(Toolbar, Object.assign({
-    id: "mrt-" + idPrefix + "-toolbar-bottom",
+    id: "mrt-" + tableId + "-toolbar-bottom",
     variant: "dense"
   }, toolbarProps, {
     sx: function sx(theme) {
@@ -1836,11 +1906,12 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
         theme: theme
       }), {
         bottom: isFullScreen ? '0' : undefined,
-        position: isFullScreen ? 'fixed' : undefined,
-        boxShadow: "-3px 0 6px " + alpha(theme.palette.common.black, 0.1)
+        boxShadow: "-3px 0 6px " + alpha(theme.palette.common.black, 0.1),
+        position: isFullScreen ? 'fixed' : 'relative'
       }, toolbarProps == null ? void 0 : toolbarProps.sx);
     }
   }), React.createElement(MRT_LinearProgressBar, {
+    alignTo: 'top',
     tableInstance: tableInstance
   }), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
     tableInstance: tableInstance
@@ -1871,7 +1942,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       _tableInstance$option2 = _tableInstance$option.icons,
       FilterListIcon = _tableInstance$option2.FilterListIcon,
       CloseIcon = _tableInstance$option2.CloseIcon,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       localization = _tableInstance$option.localization,
       muiTableHeadCellFilterTextFieldProps = _tableInstance$option.muiTableHeadCellFilterTextFieldProps,
       setCurrentFilterFns = tableInstance.setCurrentFilterFns;
@@ -1949,7 +2020,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     }));
   }
 
-  var filterId = "mrt-" + idPrefix + "-" + header.id + "-filter-text-field" + (inputIndex != null ? inputIndex : '');
+  var filterId = "mrt-" + tableId + "-" + header.id + "-filter-text-field" + (inputIndex != null ? inputIndex : '');
   var filterFn = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
   var isSelectFilter = !!columnDef.filterSelectOptions;
   var filterChipLabel = !(filterFn instanceof Function) && [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(filterFn) ? //@ts-ignore
@@ -2152,6 +2223,7 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
       opacity: !!column.getFilterValue() || showFilters ? 0.8 : 0,
       p: '2px',
       transition: 'all 0.2s ease-in-out',
+      transform: 'scale(0.66)',
       '&:hover': {
         backgroundColor: 'transparent',
         opacity: 0.8
@@ -2283,7 +2355,7 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
 };
 
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _columnDef$Header, _columnDef$minSize, _columnDef$header$len, _columnDef$header;
+  var _ref2, _ref3, _columnDef$minSize, _columnDef$header$len, _columnDef$header;
 
   var dragRef = _ref.dragRef,
       dropRef = _ref.dropRef,
@@ -2317,10 +2389,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
 
-  var headerElement = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
+  var headerElement = (_ref2 = (_ref3 = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
     header: header,
     tableInstance: tableInstance
-  }) : (_columnDef$Header = columnDef == null ? void 0 : columnDef.Header) != null ? _columnDef$Header : header.renderHeader();
+  }) : columnDef == null ? void 0 : columnDef.Header) != null ? _ref3 : header.renderHeader()) != null ? _ref2 : columnDef.header;
 
   var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
     return column.getIsPinned() === 'left' && tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
@@ -2338,7 +2410,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     align: columnDefType === 'group' ? 'center' : 'left',
     colSpan: header.colSpan
   }, tableCellProps, {
-    ref: columnDefType === 'data' ? dropRef : undefined,
+    ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
       return _extends({
         backgroundColor: column.getIsPinned() && columnDefType !== 'group' ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : 'inherit',
@@ -2351,7 +2423,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         p: isDensePadding ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
         pb: columnDefType === 'display' ? 0 : undefined,
         position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
-        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.5rem',
+        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.75rem',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         verticalAlign: 'text-top',
@@ -2420,19 +2492,12 @@ var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
   var _getState = getState(),
       columnOrder = _getState.columnOrder;
 
-  var reorder = function reorder(movingHeader, receivingHeader) {
-    if (movingHeader.column.getCanPin()) {
-      movingHeader.column.pin(receivingHeader.column.getIsPinned());
-    }
-
-    columnOrder.splice(receivingHeader.index, 0, columnOrder.splice(movingHeader.index, 1)[0]);
-    setColumnOrder([].concat(columnOrder));
-  };
+  var column = header.column;
 
   var _useDrop = useDrop({
-    accept: 'header',
-    drop: function drop(movingHeader) {
-      return reorder(movingHeader, header);
+    accept: 'column',
+    drop: function drop(movingColumn) {
+      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
     }
   }),
       dropRef = _useDrop[1];
@@ -2444,9 +2509,9 @@ var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
       };
     },
     item: function item() {
-      return header;
+      return column;
     },
-    type: 'header'
+    type: 'column'
   }),
       isDragging = _useDrag[0].isDragging,
       dragRef = _useDrag[1],
@@ -2514,11 +2579,11 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       enableEditing = _tableInstance$option.enableEditing,
       muiTableBodyCellEditTextFieldProps = _tableInstance$option.muiTableBodyCellEditTextFieldProps,
-      onCellEditBlur = _tableInstance$option.onCellEditBlur,
-      onCellEditChange = _tableInstance$option.onCellEditChange,
+      onMrtCellEditBlur = _tableInstance$option.onMrtCellEditBlur,
+      onMrtCellEditChange = _tableInstance$option.onMrtCellEditChange,
       setCurrentEditingCell = tableInstance.setCurrentEditingCell,
       setCurrentEditingRow = tableInstance.setCurrentEditingRow;
 
@@ -2532,12 +2597,12 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 
   var handleChange = function handleChange(event) {
     setValue(event.target.value);
-    columnDef.onCellEditChange == null ? void 0 : columnDef.onCellEditChange({
+    columnDef.onMrtCellEditChange == null ? void 0 : columnDef.onMrtCellEditChange({
       event: event,
       cell: cell,
       tableInstance: tableInstance
     });
-    onCellEditChange == null ? void 0 : onCellEditChange({
+    onMrtCellEditChange == null ? void 0 : onMrtCellEditChange({
       event: event,
       cell: cell,
       tableInstance: tableInstance
@@ -2552,12 +2617,12 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
     }
 
     setCurrentEditingCell(null);
-    columnDef.onCellEditBlur == null ? void 0 : columnDef.onCellEditBlur({
+    columnDef.onMrtCellEditBlur == null ? void 0 : columnDef.onMrtCellEditBlur({
       event: event,
       cell: cell,
       tableInstance: tableInstance
     });
-    onCellEditBlur == null ? void 0 : onCellEditBlur({
+    onMrtCellEditBlur == null ? void 0 : onMrtCellEditBlur({
       event: event,
       cell: cell,
       tableInstance: tableInstance
@@ -2583,7 +2648,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   }
 
   return React.createElement(TextField, Object.assign({
-    id: "mrt-" + idPrefix + "-edit-cell-text-field-" + cell.id,
+    id: "mrt-" + tableId + "-edit-cell-text-field-" + cell.id,
     margin: "dense",
     onBlur: handleBlur,
     onChange: handleChange,
@@ -2670,14 +2735,17 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       _tableInstance$option = tableInstance.options,
       editingMode = _tableInstance$option.editingMode,
       enableClickToCopy = _tableInstance$option.enableClickToCopy,
+      enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
       enableEditing = _tableInstance$option.enableEditing,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
-      onCellClick = _tableInstance$option.onCellClick,
+      onMrtCellClick = _tableInstance$option.onMrtCellClick,
+      setColumnOrder = tableInstance.setColumnOrder,
       setCurrentEditingCell = tableInstance.setCurrentEditingCell;
 
   var _getState = getState(),
+      columnOrder = _getState.columnOrder,
       currentEditingCell = _getState.currentEditingCell,
       currentEditingRow = _getState.currentEditingRow,
       isDensePadding = _getState.isDensePadding,
@@ -2688,6 +2756,15 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       row = cell.row;
   var columnDef = column.columnDef,
       columnDefType = column.columnDefType;
+
+  var _useDrop = useDrop({
+    accept: 'column',
+    drop: function drop(movingColumn) {
+      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
+    }
+  }),
+      dropRef = _useDrop[1];
+
   var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps({
     cell: cell,
     tableInstance: tableInstance
@@ -2709,7 +2786,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     if ((enableEditing || columnDef.enableEditing) && columnDef.enableEditing !== false && editingMode === 'cell') {
       setCurrentEditingCell(cell);
       setTimeout(function () {
-        var textField = document.getElementById("mrt-" + idPrefix + "-edit-cell-text-field-" + cell.id);
+        var textField = document.getElementById("mrt-" + tableId + "-edit-cell-text-field-" + cell.id);
 
         if (textField) {
           textField.focus();
@@ -2733,7 +2810,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
 
   return React.createElement(TableCell, Object.assign({
     onClick: function onClick(event) {
-      return onCellClick == null ? void 0 : onCellClick({
+      return onMrtCellClick == null ? void 0 : onMrtCellClick({
         event: event,
         cell: cell,
         tableInstance: tableInstance
@@ -2741,6 +2818,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     },
     onDoubleClick: handleDoubleClick
   }, tableCellProps, {
+    ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
       return _extends({
         backgroundColor: column.getIsPinned() ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
@@ -2793,7 +2871,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
       _tableInstance$option = tableInstance.options,
       muiTableBodyRowProps = _tableInstance$option.muiTableBodyRowProps,
       muiTableDetailPanelProps = _tableInstance$option.muiTableDetailPanelProps,
-      onDetailPanelClick = _tableInstance$option.onDetailPanelClick,
+      onMrtDetailPanelClick = _tableInstance$option.onMrtDetailPanelClick,
       renderDetailPanel = _tableInstance$option.renderDetailPanel;
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
@@ -2806,7 +2884,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
   return React.createElement(TableRow, Object.assign({}, tableRowProps), React.createElement(TableCell, Object.assign({
     colSpan: getVisibleFlatColumns().length + 10,
     onClick: function onClick(event) {
-      return onDetailPanelClick == null ? void 0 : onDetailPanelClick({
+      return onMrtDetailPanelClick == null ? void 0 : onMrtDetailPanelClick({
         event: event,
         row: row,
         tableInstance: tableInstance
@@ -2832,7 +2910,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       tableInstance = _ref.tableInstance;
   var _tableInstance$option = tableInstance.options,
       muiTableBodyRowProps = _tableInstance$option.muiTableBodyRowProps,
-      onRowClick = _tableInstance$option.onRowClick,
+      onMrtRowClick = _tableInstance$option.onMrtRowClick,
       renderDetailPanel = _tableInstance$option.renderDetailPanel;
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
@@ -2841,7 +2919,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   return React.createElement(React.Fragment, null, React.createElement(TableRow, Object.assign({
     hover: true,
     onClick: function onClick(event) {
-      return onRowClick == null ? void 0 : onRowClick({
+      return onMrtRowClick == null ? void 0 : onMrtRowClick({
         event: event,
         row: row,
         tableInstance: tableInstance
@@ -2892,7 +2970,7 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
 };
 
 var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
-  var _ref2, _ref3, _columnDef$Footer;
+  var _ref2, _ref3, _ref4;
 
   var footer = _ref.footer,
       tableInstance = _ref.tableInstance;
@@ -2936,10 +3014,10 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         verticalAlign: 'text-top'
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
-  }), React.createElement(React.Fragment, null, footer.isPlaceholder ? null : columnDef.Footer instanceof Function ? columnDef.Footer == null ? void 0 : columnDef.Footer({
+  }), React.createElement(React.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_ref3 = (_ref4 = columnDef.Footer instanceof Function ? columnDef.Footer == null ? void 0 : columnDef.Footer({
     footer: footer,
     tableInstance: tableInstance
-  }) : (_ref2 = (_ref3 = (_columnDef$Footer = columnDef.Footer) != null ? _columnDef$Footer : columnDef.footer) != null ? _ref3 : footer.renderFooter()) != null ? _ref2 : null));
+  }) : columnDef.Footer) != null ? _ref4 : columnDef.footer) != null ? _ref3 : footer.renderFooter()) != null ? _ref2 : null));
 };
 
 var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
@@ -3008,7 +3086,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enableStickyHeader = _tableInstance$option.enableStickyHeader,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       muiTableContainerProps = _tableInstance$option.muiTableContainerProps;
 
   var _getState = getState(),
@@ -3024,8 +3102,8 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
   useIsomorphicLayoutEffect(function () {
     var _document$getElementB, _document, _document$getElementB2, _document$getElementB3, _document2, _document2$getElement;
 
-    var topToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB = (_document = document) == null ? void 0 : (_document$getElementB2 = _document.getElementById("mrt-" + idPrefix + "-toolbar-top")) == null ? void 0 : _document$getElementB2.offsetHeight) != null ? _document$getElementB : 0 : 0;
-    var bottomToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB3 = (_document2 = document) == null ? void 0 : (_document2$getElement = _document2.getElementById("mrt-" + idPrefix + "-toolbar-bottom")) == null ? void 0 : _document2$getElement.offsetHeight) != null ? _document$getElementB3 : 0 : 0;
+    var topToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB = (_document = document) == null ? void 0 : (_document$getElementB2 = _document.getElementById("mrt-" + tableId + "-toolbar-top")) == null ? void 0 : _document$getElementB2.offsetHeight) != null ? _document$getElementB : 0 : 0;
+    var bottomToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB3 = (_document2 = document) == null ? void 0 : (_document2$getElement = _document2.getElementById("mrt-" + tableId + "-toolbar-bottom")) == null ? void 0 : _document2$getElement.offsetHeight) != null ? _document$getElementB3 : 0 : 0;
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
   return React.createElement(TableContainer, Object.assign({}, tableContainerProps, {
@@ -3092,77 +3170,29 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   })));
 };
 
-var getAllLeafColumnDefs = function getAllLeafColumnDefs(columns) {
-  var lowestLevelColumns = columns;
-  var currentCols = columns;
-
-  while (!!((_currentCols = currentCols) != null && _currentCols.length) && currentCols.some(function (col) {
-    return col.columns;
-  })) {
-    var _currentCols;
-
-    var nextCols = currentCols.filter(function (col) {
-      return !!col.columns;
-    }).map(function (col) {
-      return col.columns;
-    }).flat();
-
-    if (nextCols.every(function (col) {
-      return !(col != null && col.columns);
-    })) {
-      lowestLevelColumns = [].concat(lowestLevelColumns, nextCols);
-    }
-
-    currentCols = nextCols;
-  }
-
-  return lowestLevelColumns.filter(function (col) {
-    return !col.columns;
-  });
-};
-var createGroup = function createGroup(table, column, currentFilterFns) {
-  var _column$columns;
-
-  return table.createGroup(_extends({}, column, {
-    columns: column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.map == null ? void 0 : _column$columns.map(function (col) {
-      return col.columns ? createGroup(table, col, currentFilterFns) : createDataColumn(table, col, currentFilterFns);
-    })
-  }));
-};
-var createDataColumn = function createDataColumn(table, column, currentFilterFns) {
-  return (// @ts-ignore
-    table.createDataColumn(column.id, _extends({
-      filterFn: currentFilterFns[column.id] instanceof Function ? currentFilterFns[column.id] : defaultFilterFNs[currentFilterFns[column.id]]
-    }, column))
-  );
-};
-var createDisplayColumn = function createDisplayColumn(table, column) {
-  return table.createDisplayColumn(column);
-};
-
 var MRT_TableRoot = function MRT_TableRoot(props) {
   var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4;
 
-  var _useState = useState(props.idPrefix),
-      idPrefix = _useState[0],
+  var _useState = useState(props.tableId),
+      tableId = _useState[0],
       setIdPrefix = _useState[1];
 
   useEffect(function () {
-    var _props$idPrefix;
+    var _props$tableId;
 
-    return setIdPrefix((_props$idPrefix = props.idPrefix) != null ? _props$idPrefix : Math.random().toString(36).substring(2, 9));
-  }, [props.idPrefix]);
+    return setIdPrefix((_props$tableId = props.tableId) != null ? _props$tableId : Math.random().toString(36).substring(2, 9));
+  }, [props.tableId]);
   var showActionColumn = props.enableRowActions || props.enableEditing && props.editingMode === 'row';
   var showExpandColumn = props.enableExpanding || props.enableGrouping;
   var initialState = useMemo(function () {
     var _props$initialState, _initState$columnOrde;
 
     var initState = (_props$initialState = props.initialState) != null ? _props$initialState : {};
-    initState.columnOrder = ((_initState$columnOrde = initState == null ? void 0 : initState.columnOrder) != null ? _initState$columnOrde : props.enableColumnOrdering) ? [showActionColumn && 'mrt-row-actions', showExpandColumn && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
+    initState.columnOrder = ((_initState$columnOrde = initState == null ? void 0 : initState.columnOrder) != null ? _initState$columnOrde : props.enableColumnOrdering || props.enableGrouping) ? [showActionColumn && 'mrt-row-actions', showExpandColumn && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
       return c.id;
     })).filter(Boolean) : [];
 
-    if (!props.enablePersistentState || !props.idPrefix) {
+    if (!props.enablePersistentState || !props.tableId) {
       return initState;
     }
 
@@ -3174,7 +3204,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       return initState;
     }
 
-    var storedState = props.persistentStateMode === 'localStorage' ? localStorage.getItem("mrt-" + idPrefix + "-table-state") : props.persistentStateMode === 'sessionStorage' ? sessionStorage.getItem("mrt-" + idPrefix + "-table-state") : '{}';
+    var storedState = props.persistentStateMode === 'localStorage' ? localStorage.getItem("mrt-" + tableId + "-table-state") : props.persistentStateMode === 'sessionStorage' ? sessionStorage.getItem("mrt-" + tableId + "-table-state") : '{}';
 
     if (storedState) {
       var parsedState = JSON.parse(storedState);
@@ -3226,7 +3256,24 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       setCurrentGlobalFilterFn = _useState9[1];
 
   var table = useMemo(function () {
-    return createTable();
+    return (// @ts-ignore
+      createTable().setOptions({
+        //@ts-ignore
+        filterFns: defaultFilterFNs,
+        getCoreRowModel: getCoreRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getGroupedRowModel: getGroupedRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getSubRows: function getSubRows(row) {
+          return row == null ? void 0 : row.subRows;
+        },
+        tableId: tableId,
+        initialState: initialState
+      })
+    );
   }, []);
   var displayColumns = useMemo(function () {
     var _props$localization, _props$localization2, _props$localization3, _props$localization5;
@@ -3241,6 +3288,8 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       },
       header: (_props$localization = props.localization) == null ? void 0 : _props$localization.actions,
       id: 'mrt-row-actions',
+      muiTableBodyCellProps: props.muiTableBodyCellProps,
+      muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 60
     }), showExpandColumn && createDisplayColumn(table, {
       Cell: function Cell(_ref4) {
@@ -3257,6 +3306,8 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       },
       header: (_props$localization2 = props.localization) == null ? void 0 : _props$localization2.expand,
       id: 'mrt-expand',
+      muiTableBodyCellProps: props.muiTableBodyCellProps,
+      muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 50
     }), props.enableRowSelection && createDisplayColumn(table, {
       Cell: function Cell(_ref5) {
@@ -3274,6 +3325,8 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       },
       header: (_props$localization3 = props.localization) == null ? void 0 : _props$localization3.select,
       id: 'mrt-select',
+      muiTableBodyCellProps: props.muiTableBodyCellProps,
+      muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 50
     }), props.enableRowNumbers && createDisplayColumn(table, {
       Cell: function Cell(_ref6) {
@@ -3287,6 +3340,8 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       },
       header: (_props$localization5 = props.localization) == null ? void 0 : _props$localization5.rowNumbers,
       id: 'mrt-row-numbers',
+      muiTableBodyCellProps: props.muiTableBodyCellProps,
+      muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 50
     })].filter(Boolean);
   }, [props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, table]);
@@ -3307,26 +3362,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     }) : props.data;
   }, [props.data, (_props$state3 = props.state) == null ? void 0 : _props$state3.isLoading, (_props$state4 = props.state) == null ? void 0 : _props$state4.showSkeletons]); //@ts-ignore
 
-  var tableInstance = _extends({}, useTableInstance(table, _extends({
-    filterFns: defaultFilterFNs,
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getGroupedRowModel: getGroupedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getSubRows: function getSubRows(row) {
-      return row == null ? void 0 : row.subRows;
-    },
-    //@ts-ignore
-    globalFilterFn: currentGlobalFilterFn
-  }, props, {
+  var tableInstance = _extends({}, useTableInstance(table, _extends({}, props, {
     //@ts-ignore
     columns: columns,
     data: data,
-    idPrefix: idPrefix,
-    initialState: initialState,
+    //@ts-ignore
+    globalFilterFn: currentGlobalFilterFn,
     state: _extends({
       currentEditingCell: currentEditingCell,
       currentEditingRow: currentEditingRow,
@@ -3353,12 +3394,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       return;
     }
 
-    if (!props.idPrefix && process.env.NODE_ENV !== 'production') {
-      console.warn('a unique idPrefix prop is required for persistent table state to work');
+    if (!props.tableId && process.env.NODE_ENV !== 'production') {
+      console.warn('a unique tableId prop is required for persistent table state to work');
       return;
     }
 
-    var itemArgs = ["mrt-" + idPrefix + "-table-state", JSON.stringify(tableInstance.getState())];
+    var itemArgs = ["mrt-" + tableId + "-table-state", JSON.stringify(tableInstance.getState())];
 
     if (props.persistentStateMode === 'localStorage') {
       var _localStorage;
@@ -3369,7 +3410,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
       (_sessionStorage = sessionStorage).setItem.apply(_sessionStorage, itemArgs);
     }
-  }, [props.enablePersistentState, props.idPrefix, props.persistentStateMode, tableInstance]);
+  }, [props.enablePersistentState, props.tableId, props.persistentStateMode, tableInstance]);
   return React.createElement(React.Fragment, null, React.createElement(Dialog, {
     PaperComponent: Box,
     TransitionComponent: Grow,
@@ -3388,7 +3429,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionGlobalFilter", "positionToolbarActions", "positionToolbarAlertBanner", "selectAllMode"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -3454,10 +3495,14 @@ var MaterialReactTable = (function (_ref) {
       positionActionsColumn = _ref$positionActionsC === void 0 ? 'first' : _ref$positionActionsC,
       _ref$positionPaginati = _ref.positionPagination,
       positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
+      _ref$positionGlobalFi = _ref.positionGlobalFilter,
+      positionGlobalFilter = _ref$positionGlobalFi === void 0 ? 'right' : _ref$positionGlobalFi,
       _ref$positionToolbarA = _ref.positionToolbarActions,
       positionToolbarActions = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
       _ref$positionToolbarA2 = _ref.positionToolbarAlertBanner,
       positionToolbarAlertBanner = _ref$positionToolbarA2 === void 0 ? 'top' : _ref$positionToolbarA2,
+      _ref$selectAllMode = _ref.selectAllMode,
+      selectAllMode = _ref$selectAllMode === void 0 ? 'all' : _ref$selectAllMode,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   return React.createElement(MRT_TableRoot, Object.assign({
@@ -3491,9 +3536,11 @@ var MaterialReactTable = (function (_ref) {
     localization: _extends({}, MRT_DefaultLocalization_EN, localization),
     persistentStateMode: persistentStateMode,
     positionActionsColumn: positionActionsColumn,
+    positionGlobalFilter: positionGlobalFilter,
     positionPagination: positionPagination,
     positionToolbarActions: positionToolbarActions,
-    positionToolbarAlertBanner: positionToolbarAlertBanner
+    positionToolbarAlertBanner: positionToolbarAlertBanner,
+    selectAllMode: selectAllMode
   }, rest));
 });