material-react-table 0.26.2 → 0.26.5

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

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useCallback, Fragment, useRef, useLayoutEffect, useEffect } from 'react';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
-import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, AlertTitle, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
+import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
 import { useVirtual } from 'react-virtual';
 
@@ -719,10 +719,10 @@ var reorderColumn = function reorderColumn(draggedColumn, targetColumn, columnOr
   return [].concat(columnOrder);
 };
 var getLeadingDisplayColumnIds = function getLeadingDisplayColumnIds(props) {
-  return [(props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag', (props.positionActionsColumn === 'first' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', (props.enableExpanding || props.enableGrouping || props.renderDetailPanel) && 'mrt-row-expand', props.enableRowSelection && 'mrt-row-select', props.enableRowNumbers && 'mrt-row-numbers'].filter(Boolean);
+  return [(props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag', (props.positionActionsColumn === 'first' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', props.positionExpandColumn === 'first' && (props.enableExpanding || props.enableGrouping || props.renderDetailPanel) && 'mrt-row-expand', props.enableRowSelection && 'mrt-row-select', props.enableRowNumbers && 'mrt-row-numbers'].filter(Boolean);
 };
 var getTrailingDisplayColumnIds = function getTrailingDisplayColumnIds(props) {
-  return [(props.positionActionsColumn === 'last' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions'];
+  return [(props.positionActionsColumn === 'last' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', props.positionExpandColumn === 'last' && (props.enableExpanding || props.enableGrouping || props.renderDetailPanel) && 'mrt-row-expand'];
 };
 var getDefaultColumnOrderIds = function getDefaultColumnOrderIds(props) {
   return [].concat(getLeadingDisplayColumnIds(props), getAllLeafColumnDefs(props.columns).map(function (columnDef) {
@@ -1453,164 +1453,6 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   })));
 };
 
-var _excluded = ["table"];
-var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
-  var table = _ref.table,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  var getState = table.getState,
-      _table$options = table.options,
-      _table$options$icons = _table$options.icons,
-      FullscreenExitIcon = _table$options$icons.FullscreenExitIcon,
-      FullscreenIcon = _table$options$icons.FullscreenIcon,
-      localization = _table$options.localization,
-      setIsFullScreen = table.setIsFullScreen;
-
-  var _getState = getState(),
-      isFullScreen = _getState.isFullScreen;
-
-  var handleToggleFullScreen = function handleToggleFullScreen() {
-    setIsFullScreen(!isFullScreen);
-  };
-
-  return React.createElement(Tooltip, {
-    arrow: true,
-    title: localization.toggleFullScreen
-  }, React.createElement(IconButton, Object.assign({
-    "aria-label": localization.showHideFilters,
-    onClick: handleToggleFullScreen
-  }, rest), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
-};
-
-var _excluded$1 = ["table"];
-var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
-  var table = _ref.table,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-
-  var _table$options = table.options,
-      ViewColumnIcon = _table$options.icons.ViewColumnIcon,
-      localization = _table$options.localization;
-
-  var _useState = useState(null),
-      anchorEl = _useState[0],
-      setAnchorEl = _useState[1];
-
-  var handleClick = function handleClick(event) {
-    setAnchorEl(event.currentTarget);
-  };
-
-  return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
-    arrow: true,
-    title: localization.showHideColumns
-  }, React.createElement(IconButton, Object.assign({
-    "aria-label": localization.showHideColumns,
-    onClick: handleClick
-  }, rest), React.createElement(ViewColumnIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
-    anchorEl: anchorEl,
-    setAnchorEl: setAnchorEl,
-    table: table
-  }));
-};
-
-var _excluded$2 = ["table"];
-var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
-  var table = _ref.table,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-
-  var getState = table.getState,
-      _table$options = table.options,
-      _table$options$icons = _table$options.icons,
-      DensityLargeIcon = _table$options$icons.DensityLargeIcon,
-      DensityMediumIcon = _table$options$icons.DensityMediumIcon,
-      DensitySmallIcon = _table$options$icons.DensitySmallIcon,
-      localization = _table$options.localization,
-      setDensity = table.setDensity;
-
-  var _getState = getState(),
-      density = _getState.density;
-
-  var handleToggleDensePadding = function handleToggleDensePadding() {
-    var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
-    setDensity(nextDensity);
-  };
-
-  return React.createElement(Tooltip, {
-    arrow: true,
-    title: localization.toggleDensity
-  }, React.createElement(IconButton, Object.assign({
-    "aria-label": localization.toggleDensity,
-    onClick: handleToggleDensePadding
-  }, rest), density === 'compact' ? React.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React.createElement(DensityMediumIcon, null) : React.createElement(DensityLargeIcon, null)));
-};
-
-var _excluded$3 = ["table"];
-var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
-  var table = _ref.table,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-
-  var getState = table.getState,
-      _table$options = table.options,
-      _table$options$icons = _table$options.icons,
-      FilterListIcon = _table$options$icons.FilterListIcon,
-      FilterListOffIcon = _table$options$icons.FilterListOffIcon,
-      localization = _table$options.localization,
-      setShowFilters = table.setShowFilters;
-
-  var _getState = getState(),
-      showColumnFilters = _getState.showColumnFilters;
-
-  var handleToggleShowFilters = function handleToggleShowFilters() {
-    setShowFilters(!showColumnFilters);
-  };
-
-  return React.createElement(Tooltip, {
-    arrow: true,
-    title: localization.showHideFilters
-  }, React.createElement(IconButton, Object.assign({
-    "aria-label": localization.showHideFilters,
-    onClick: handleToggleShowFilters
-  }, rest), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
-};
-
-var _excluded$4 = ["table"];
-var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
-  var table = _ref.table,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-
-  var getState = table.getState,
-      _table$options = table.options,
-      _table$options$icons = _table$options.icons,
-      SearchIcon = _table$options$icons.SearchIcon,
-      SearchOffIcon = _table$options$icons.SearchOffIcon,
-      tableId = _table$options.tableId,
-      localization = _table$options.localization,
-      muiSearchTextFieldProps = _table$options.muiSearchTextFieldProps,
-      setShowGlobalFilter = table.setShowGlobalFilter;
-
-  var _getState = getState(),
-      showGlobalFilter = _getState.showGlobalFilter;
-
-  var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
-    table: table
-  }) : muiSearchTextFieldProps;
-
-  var handleToggleSearch = function handleToggleSearch() {
-    setShowGlobalFilter(!showGlobalFilter);
-    setTimeout(function () {
-      var _document$getElementB, _textFieldProps$id;
-
-      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);
-  };
-
-  return React.createElement(Tooltip, {
-    arrow: true,
-    title: localization.showHideSearch
-  }, React.createElement(IconButton, Object.assign({
-    onClick: handleToggleSearch
-  }, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
-};
-
 var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
   var _localization$clearSe;
 
@@ -1704,47 +1546,37 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
   }));
 };
 
-var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
-  var _renderToolbarInterna;
+var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
+  var isTopToolbar = _ref.isTopToolbar,
+      table = _ref.table;
+  var muiLinearProgressProps = table.options.muiLinearProgressProps,
+      getState = table.getState;
 
-  var table = _ref.table;
-  var _table$options = table.options,
-      enableColumnFilters = _table$options.enableColumnFilters,
-      enableColumnOrdering = _table$options.enableColumnOrdering,
-      enableDensityToggle = _table$options.enableDensityToggle,
-      enableFilters = _table$options.enableFilters,
-      enableFullScreenToggle = _table$options.enableFullScreenToggle,
-      enableGlobalFilter = _table$options.enableGlobalFilter,
-      enableHiding = _table$options.enableHiding,
-      enablePinning = _table$options.enablePinning,
-      positionGlobalFilter = _table$options.positionGlobalFilter,
-      renderToolbarInternalActions = _table$options.renderToolbarInternalActions;
-  return React.createElement(Box, {
+  var _getState = getState(),
+      isLoading = _getState.isLoading,
+      showProgressBars = _getState.showProgressBars;
+
+  var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps({
+    isTopToolbar: isTopToolbar,
+    table: table
+  }) : muiLinearProgressProps;
+  return React.createElement(Collapse, {
+    "in": isLoading || showProgressBars,
+    mountOnEnter: true,
+    unmountOnExit: true,
     sx: {
-      alignItems: 'center',
-      display: 'flex',
-      zIndex: 3
+      bottom: isTopToolbar ? 0 : undefined,
+      position: 'absolute',
+      top: !isTopToolbar ? 0 : undefined,
+      width: '100%'
     }
-  }, (_renderToolbarInterna = renderToolbarInternalActions == null ? void 0 : renderToolbarInternalActions({
-    MRT_FullScreenToggleButton: MRT_FullScreenToggleButton,
-    MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
-    MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
-    MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
-    MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
-    table: table
-  })) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_GlobalFilterTextField, {
-    table: table
-  }), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
-    table: table
-  }), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
-    table: table
-  }), (enableHiding || enableColumnOrdering || enablePinning) && React.createElement(MRT_ShowHideColumnsButton, {
-    table: table
-  }), enableDensityToggle && React.createElement(MRT_ToggleDensePaddingButton, {
-    table: table
-  }), enableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, {
-    table: table
-  })));
+  }, React.createElement(LinearProgress, Object.assign({
+    "aria-label": "Loading",
+    "aria-busy": "true",
+    sx: {
+      position: 'relative'
+    }
+  }, linearProgressProps)));
 };
 
 var MRT_TablePagination = function MRT_TablePagination(_ref) {
@@ -1869,42 +1701,211 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
   }, alertProps == null ? void 0 : alertProps.children, (alertProps == null ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && React.createElement("br", null), selectMessage, selectMessage && groupedByMessage && React.createElement("br", null), groupedByMessage)));
 };
 
-var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
-  var isTopToolbar = _ref.isTopToolbar,
-      table = _ref.table;
-  var muiLinearProgressProps = table.options.muiLinearProgressProps,
-      getState = table.getState;
+var _excluded = ["table"];
+var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
+  var table = _ref.table,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var getState = table.getState,
+      _table$options = table.options,
+      _table$options$icons = _table$options.icons,
+      FullscreenExitIcon = _table$options$icons.FullscreenExitIcon,
+      FullscreenIcon = _table$options$icons.FullscreenIcon,
+      localization = _table$options.localization,
+      setIsFullScreen = table.setIsFullScreen;
 
   var _getState = getState(),
-      isLoading = _getState.isLoading,
-      showProgressBars = _getState.showProgressBars;
+      isFullScreen = _getState.isFullScreen;
 
-  var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps({
-    isTopToolbar: isTopToolbar,
+  var handleToggleFullScreen = function handleToggleFullScreen() {
+    setIsFullScreen(!isFullScreen);
+  };
+
+  return React.createElement(Tooltip, {
+    arrow: true,
+    title: localization.toggleFullScreen
+  }, React.createElement(IconButton, Object.assign({
+    "aria-label": localization.showHideFilters,
+    onClick: handleToggleFullScreen
+  }, rest), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
+};
+
+var _excluded$1 = ["table"];
+var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
+  var table = _ref.table,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+  var _table$options = table.options,
+      ViewColumnIcon = _table$options.icons.ViewColumnIcon,
+      localization = _table$options.localization;
+
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
+    arrow: true,
+    title: localization.showHideColumns
+  }, React.createElement(IconButton, Object.assign({
+    "aria-label": localization.showHideColumns,
+    onClick: handleClick
+  }, rest), React.createElement(ViewColumnIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
+    anchorEl: anchorEl,
+    setAnchorEl: setAnchorEl,
     table: table
-  }) : muiLinearProgressProps;
-  return React.createElement(Collapse, {
-    "in": isLoading || showProgressBars,
-    mountOnEnter: true,
-    unmountOnExit: true,
-    sx: {
-      bottom: isTopToolbar ? 0 : undefined,
-      position: 'absolute',
-      top: !isTopToolbar ? 0 : undefined,
-      width: '100%'
-    }
-  }, React.createElement(LinearProgress, Object.assign({
-    "aria-label": "Loading",
-    "aria-busy": "true",
+  }));
+};
+
+var _excluded$2 = ["table"];
+var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
+  var table = _ref.table,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+  var getState = table.getState,
+      _table$options = table.options,
+      _table$options$icons = _table$options.icons,
+      DensityLargeIcon = _table$options$icons.DensityLargeIcon,
+      DensityMediumIcon = _table$options$icons.DensityMediumIcon,
+      DensitySmallIcon = _table$options$icons.DensitySmallIcon,
+      localization = _table$options.localization,
+      setDensity = table.setDensity;
+
+  var _getState = getState(),
+      density = _getState.density;
+
+  var handleToggleDensePadding = function handleToggleDensePadding() {
+    var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
+    setDensity(nextDensity);
+  };
+
+  return React.createElement(Tooltip, {
+    arrow: true,
+    title: localization.toggleDensity
+  }, React.createElement(IconButton, Object.assign({
+    "aria-label": localization.toggleDensity,
+    onClick: handleToggleDensePadding
+  }, rest), density === 'compact' ? React.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React.createElement(DensityMediumIcon, null) : React.createElement(DensityLargeIcon, null)));
+};
+
+var _excluded$3 = ["table"];
+var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
+  var table = _ref.table,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+
+  var getState = table.getState,
+      _table$options = table.options,
+      _table$options$icons = _table$options.icons,
+      FilterListIcon = _table$options$icons.FilterListIcon,
+      FilterListOffIcon = _table$options$icons.FilterListOffIcon,
+      localization = _table$options.localization,
+      setShowFilters = table.setShowFilters;
+
+  var _getState = getState(),
+      showColumnFilters = _getState.showColumnFilters;
+
+  var handleToggleShowFilters = function handleToggleShowFilters() {
+    setShowFilters(!showColumnFilters);
+  };
+
+  return React.createElement(Tooltip, {
+    arrow: true,
+    title: localization.showHideFilters
+  }, React.createElement(IconButton, Object.assign({
+    "aria-label": localization.showHideFilters,
+    onClick: handleToggleShowFilters
+  }, rest), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
+};
+
+var _excluded$4 = ["table"];
+var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
+  var table = _ref.table,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+
+  var getState = table.getState,
+      _table$options = table.options,
+      _table$options$icons = _table$options.icons,
+      SearchIcon = _table$options$icons.SearchIcon,
+      SearchOffIcon = _table$options$icons.SearchOffIcon,
+      tableId = _table$options.tableId,
+      localization = _table$options.localization,
+      muiSearchTextFieldProps = _table$options.muiSearchTextFieldProps,
+      setShowGlobalFilter = table.setShowGlobalFilter;
+
+  var _getState = getState(),
+      showGlobalFilter = _getState.showGlobalFilter;
+
+  var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
+    table: table
+  }) : muiSearchTextFieldProps;
+
+  var handleToggleSearch = function handleToggleSearch() {
+    setShowGlobalFilter(!showGlobalFilter);
+    setTimeout(function () {
+      var _document$getElementB, _textFieldProps$id;
+
+      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);
+  };
+
+  return React.createElement(Tooltip, {
+    arrow: true,
+    title: localization.showHideSearch
+  }, React.createElement(IconButton, Object.assign({
+    onClick: handleToggleSearch
+  }, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
+};
+
+var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
+  var _renderToolbarInterna;
+
+  var table = _ref.table;
+  var _table$options = table.options,
+      enableColumnFilters = _table$options.enableColumnFilters,
+      enableColumnOrdering = _table$options.enableColumnOrdering,
+      enableDensityToggle = _table$options.enableDensityToggle,
+      enableFilters = _table$options.enableFilters,
+      enableFullScreenToggle = _table$options.enableFullScreenToggle,
+      enableGlobalFilter = _table$options.enableGlobalFilter,
+      enableHiding = _table$options.enableHiding,
+      enablePinning = _table$options.enablePinning,
+      positionGlobalFilter = _table$options.positionGlobalFilter,
+      renderToolbarInternalActions = _table$options.renderToolbarInternalActions;
+  return React.createElement(Box, {
     sx: {
-      position: 'relative'
+      alignItems: 'center',
+      display: 'flex',
+      zIndex: 3
     }
-  }, linearProgressProps)));
+  }, (_renderToolbarInterna = renderToolbarInternalActions == null ? void 0 : renderToolbarInternalActions({
+    MRT_FullScreenToggleButton: MRT_FullScreenToggleButton,
+    MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
+    MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
+    MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
+    MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
+    table: table
+  })) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_GlobalFilterTextField, {
+    table: table
+  }), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
+    table: table
+  }), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
+    table: table
+  }), (enableHiding || enableColumnOrdering || enablePinning) && React.createElement(MRT_ShowHideColumnsButton, {
+    table: table
+  }), enableDensityToggle && React.createElement(MRT_ToggleDensePaddingButton, {
+    table: table
+  }), enableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, {
+    table: table
+  })));
 };
 
 var commonToolbarStyles = function commonToolbarStyles(_ref) {
   var theme = _ref.theme;
   return {
+    alignItems: 'flex-start',
     backgroundColor: lighten(theme.palette.background["default"], 0.04),
     backgroundImage: 'none',
     display: 'grid',
@@ -2112,7 +2113,7 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterB, _columnDef$enabledCol, _localization$clearFi, _columnDef$filterSele;
+  var _currentFilterOption$, _localization$filterB, _columnDef$enabledCol, _currentFilterOption$2, _localization$clearFi, _columnDef$filterSele;
 
   var header = _ref.header,
       inputIndex = _ref.inputIndex,
@@ -2215,7 +2216,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
   var isSelectFilter = !!columnDef.filterSelectOptions;
   var filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption) ? //@ts-ignore
-  localization["filter" + (currentFilterOption.charAt(0).toUpperCase() + currentFilterOption.slice(1))] : '';
+  localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))] : '';
   var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
   var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
   var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
@@ -2233,7 +2234,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     helperText: showChangeModeButton ? React.createElement("label", {
       htmlFor: filterId
     }, localization.filterMode.replace('{filterType}', // @ts-ignore
-    localization["filter" + (currentFilterOption.charAt(0).toUpperCase() + currentFilterOption.slice(1))])) : null,
+    localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$2 = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$2.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))])) : null,
     FormHelperTextProps: {
       sx: {
         fontSize: '0.6rem',
@@ -2370,7 +2371,7 @@ var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer
 };
 
 var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
-  var _column$getFilterValu, _column$getFilterValu2;
+  var _currentFilterOption$, _column$getFilterValu, _column$getFilterValu2;
 
   var header = _ref.header,
       table = _ref.table;
@@ -2386,7 +2387,7 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
   var columnDef = column.columnDef;
   var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
   var filterTooltip = localization.filteringByColumn.replace('{column}', String(columnDef.header)).replace('{filterType}', // @ts-ignore
-  localization["filter" + (currentFilterOption.charAt(0).toUpperCase() + currentFilterOption.slice(1))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '');
+  localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '');
   return React.createElement(Grow, {
     unmountOnExit: true,
     "in": !!column.getFilterValue() && currentFilterOption !== 'between' || currentFilterOption === 'between' && ( // @ts-ignore
@@ -2641,7 +2642,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     sx: {
       alignItems: 'flex-start',
       display: 'flex',
-      justifyContent: columnDefType === 'group' ? 'center' : 'space-between',
+      justifyContent: (tableCellProps == null ? void 0 : tableCellProps.align) === 'right' ? 'flex-end' : columnDefType === 'group' || (tableCellProps == null ? void 0 : tableCellProps.align) === 'center' ? 'center' : 'space-between',
       position: 'relative',
       width: '100%'
     }
@@ -2653,7 +2654,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       display: 'flex',
       flexWrap: 'nowrap',
       m: (tableCellProps == null ? void 0 : tableCellProps.align) === 'center' ? 'auto' : undefined,
-      pl: (tableCellProps == null ? void 0 : tableCellProps.align) === 'center' ? '1rem' : undefined,
+      pl: (tableCellProps == null ? void 0 : tableCellProps.align) === 'center' && column.getCanSort() ? '1rem' : undefined,
       whiteSpace: ((_columnDef$header$len = (_columnDef$header = columnDef.header) == null ? void 0 : _columnDef$header.length) != null ? _columnDef$header$len : 0) < 24 ? 'nowrap' : 'normal'
     }
   }, headerElement, column.getCanSort() && React.createElement(MRT_TableHeadCellSortLabel, {
@@ -3652,7 +3653,6 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     getSubRows: function getSubRows(row) {
       return row == null ? void 0 : row.subRows;
     },
-    //@ts-ignore
     globalFilterFn: (_MRT_FilterFns$curren = MRT_FilterFns[currentGlobalFilterFn]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy,
     initialState: initialState,
     state: _extends({
@@ -3688,6 +3688,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     setShowGlobalFilter: (_props$onShowGlobalFi = props.onShowGlobalFilterChange) != null ? _props$onShowGlobalFi : setShowGlobalFilter
   });
 
+  useEffect(function () {
+    return props == null ? void 0 : props.onTableInstanceChange == null ? void 0 : props.onTableInstanceChange(table);
+  }, [table]);
   return React.createElement(React.Fragment, null, React.createElement(Dialog, {
     PaperComponent: Box,
     TransitionComponent: Grow,
@@ -3706,7 +3709,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -3778,6 +3781,8 @@ var MaterialReactTable = (function (_ref) {
       localization = _ref.localization,
       _ref$positionActionsC = _ref.positionActionsColumn,
       positionActionsColumn = _ref$positionActionsC === void 0 ? 'first' : _ref$positionActionsC,
+      _ref$positionExpandCo = _ref.positionExpandColumn,
+      positionExpandColumn = _ref$positionExpandCo === void 0 ? 'first' : _ref$positionExpandCo,
       _ref$positionGlobalFi = _ref.positionGlobalFilter,
       positionGlobalFilter = _ref$positionGlobalFi === void 0 ? 'right' : _ref$positionGlobalFi,
       _ref$positionPaginati = _ref.positionPagination,
@@ -3825,6 +3830,7 @@ var MaterialReactTable = (function (_ref) {
     icons: _extends({}, MRT_Default_Icons, icons),
     localization: _extends({}, MRT_DefaultLocalization_EN, localization),
     positionActionsColumn: positionActionsColumn,
+    positionExpandColumn: positionExpandColumn,
     positionGlobalFilter: positionGlobalFilter,
     positionPagination: positionPagination,
     positionToolbarAlertBanner: positionToolbarAlertBanner,