material-react-table 0.36.1 → 0.37.1

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

@@ -2,7 +2,7 @@ import React, { useMemo, useRef, useState, useCallback, Fragment, useEffect, use
 import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 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 { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
-import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, alpha, useMediaQuery, Toolbar, lighten, ListItemText, 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, Fade, alpha, useMediaQuery, Toolbar, lighten, ListItemText, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, DialogTitle, DialogContent, Stack, DialogActions } from '@mui/material';
 import { useVirtual } from 'react-virtual';
 
 /******************************************************************************
@@ -500,10 +500,9 @@ const prepareColumns = (columnDefs, columnFilterFns, filterFns, sortingFns) => c
     else if (columnDef.columnDefType === 'data') {
         if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
             columnDef.filterFn =
-                // @ts-ignore
                 (_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
-            //@ts-ignore
-            columnDef._filterFn = columnFilterFns[columnDef.id];
+            columnDef._filterFn =
+                columnFilterFns[columnDef.id];
         }
         if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
             // @ts-ignore
@@ -522,29 +521,36 @@ const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
     columnOrder.splice(columnOrder.indexOf(targetColumn.id), 0, columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0]);
     return [...columnOrder];
 };
-const getLeadingDisplayColumnIds = (props) => [
-    (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);
-const getTrailingDisplayColumnIds = (props) => [
-    ((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',
-];
+const showExpandColumn = (props, grouping) => !!(props.enableExpanding ||
+    (props.enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
+    props.renderDetailPanel);
+const getLeadingDisplayColumnIds = (props) => {
+    var _a;
+    return [
+        (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
+        ((props.positionActionsColumn === 'first' && props.enableRowActions) ||
+            (props.enableEditing &&
+                ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
+            'mrt-row-actions',
+        props.positionExpandColumn === 'first' &&
+            showExpandColumn(props) &&
+            'mrt-row-expand',
+        props.enableRowSelection && 'mrt-row-select',
+        props.enableRowNumbers && 'mrt-row-numbers',
+    ].filter(Boolean);
+};
+const getTrailingDisplayColumnIds = (props) => {
+    var _a;
+    return [
+        ((props.positionActionsColumn === 'last' && props.enableRowActions) ||
+            (props.enableEditing &&
+                ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
+            'mrt-row-actions',
+        props.positionExpandColumn === 'last' &&
+            showExpandColumn(props) &&
+            'mrt-row-expand',
+    ];
+};
 const getDefaultColumnOrderIds = (props) => [
     ...getLeadingDisplayColumnIds(props),
     ...getAllLeafColumnDefs(props.columns).map((columnDef) => getColumnId(columnDef)),
@@ -696,7 +702,7 @@ const commonListItemStyles = {
 };
 const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
-    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { enableColumnFilterChangeMode, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, columnFilterModeOptions, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, tableId, localization, }, setShowFilters, } = table;
+    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { enableColumnFilterChangeMode, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, columnFilterModeOptions, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, }, refs: { filterInputRefs }, setShowFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density } = getState();
@@ -737,13 +743,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     };
     const handleFilterByColumn = () => {
         setShowFilters(true);
-        setTimeout(() => {
-            var _a, _b, _c;
-            return (_c = document
-                .getElementById(
-            // @ts-ignore
-            (_b = (_a = header.muiTableHeadCellFilterTextFieldProps) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : `mrt-${tableId}-${header.id}-filter-text-field`)) === null || _c === void 0 ? void 0 : _c.focus();
-        }, 200);
+        queueMicrotask(() => { var _a; return (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus(); });
         setAnchorEl(null);
     };
     const handleShowAllColumns = () => {
@@ -873,29 +873,36 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) =
         })));
 };
 
-const MRT_EditActionButtons = ({ row, table }) => {
-    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onEditingRowSave, }, setEditingRow, } = table;
+const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
+    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onEditingRowSave, }, refs: { editInputRefs }, setEditingRow, } = table;
     const { editingRow } = getState();
-    const handleCancel = () => {
-        row._valuesCache = Object.assign({}, row.original);
-        setEditingRow(null);
-    };
+    const handleCancel = () => setEditingRow(null);
     const handleSave = () => {
-        var _a;
+        var _a, _b;
+        //look for auto-filled input values
+        (_a = Object.values(editInputRefs === null || editInputRefs === void 0 ? void 0 : editInputRefs.current)) === null || _a === void 0 ? void 0 : _a.forEach((input) => {
+            if (input.value !== undefined &&
+                Object.hasOwn(editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache, input.name)) {
+                // @ts-ignore
+                editingRow._valuesCache[input.name] = input.value;
+            }
+        });
         onEditingRowSave === null || onEditingRowSave === void 0 ? void 0 : onEditingRowSave({
+            exitEditingMode: () => setEditingRow(null),
             row: editingRow !== null && editingRow !== void 0 ? editingRow : row,
             table,
-            values: (_a = editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache) !== null && _a !== void 0 ? _a : Object.assign({}, row.original),
+            values: (_b = editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache) !== null && _b !== void 0 ? _b : Object.assign({}, row.original),
         });
-        setEditingRow(null);
     };
-    return (React.createElement(Box, { sx: { display: 'flex', gap: '0.75rem' } },
+    return (React.createElement(Box, { sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { arrow: true, title: localization.cancel },
             React.createElement(IconButton, { "aria-label": localization.cancel, onClick: handleCancel },
                 React.createElement(CancelIcon, null))),
         React.createElement(Tooltip, { arrow: true, title: localization.save },
             React.createElement(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSave },
-                React.createElement(SaveIcon, null)))));
+                React.createElement(SaveIcon, null))))) : (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: handleCancel }, localization.cancel),
+        React.createElement(Button, { onClick: handleSave, variant: "contained" }, localization.save)))));
 };
 
 const commonIconButtonStyles = {
@@ -909,7 +916,7 @@ const commonIconButtonStyles = {
     },
 };
 const MRT_ToggleRowActionMenuButton = ({ row, table }) => {
-    const { getState, options: { enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
+    const { getState, options: { editingMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
     const { editingRow } = getState();
     const [anchorEl, setAnchorEl] = useState(null);
     const handleOpenRowActionMenu = (event) => {
@@ -921,7 +928,7 @@ const MRT_ToggleRowActionMenuButton = ({ row, table }) => {
         setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
-    return (React.createElement(React.Fragment, null, renderRowActions ? (React.createElement(React.Fragment, null, renderRowActions({ row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) ? (React.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React.createElement(Tooltip, { placement: "right", arrow: true, title: localization.edit },
+    return (React.createElement(React.Fragment, null, renderRowActions ? (React.createElement(React.Fragment, null, renderRowActions({ row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React.createElement(Tooltip, { placement: "right", arrow: true, title: localization.edit },
         React.createElement(IconButton, { sx: commonIconButtonStyles, onClick: handleStartEditMode },
             React.createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
@@ -956,7 +963,7 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
 
 const MRT_GlobalFilterTextField = ({ table, }) => {
     var _a;
-    const { getState, setGlobalFilter, options: { enableGlobalFilterChangeMode, icons: { SearchIcon, CloseIcon }, localization, muiSearchTextFieldProps, tableId, }, } = table;
+    const { getState, setGlobalFilter, options: { enableGlobalFilterChangeMode, icons: { SearchIcon, CloseIcon }, localization, muiSearchTextFieldProps, }, refs: { searchInputRef }, } = table;
     const { globalFilter, showGlobalFilter } = getState();
     const [anchorEl, setAnchorEl] = useState(null);
     const [searchValue, setSearchValue] = useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
@@ -979,7 +986,7 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
         ? muiSearchTextFieldProps({ table })
         : muiSearchTextFieldProps;
     return (React.createElement(Collapse, { in: showGlobalFilter, orientation: "horizontal" },
-        React.createElement(TextField, Object.assign({ id: `mrt-${tableId}-search-text-field`, placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
+        React.createElement(TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
                 startAdornment: enableGlobalFilterChangeMode ? (React.createElement(InputAdornment, { position: "start" },
                     React.createElement(Tooltip, { arrow: true, title: localization.changeSearchMode },
                         React.createElement(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
@@ -989,7 +996,12 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
                         React.createElement("span", null,
                             React.createElement(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small" },
                                 React.createElement(CloseIcon, null)))))),
-            } }, textFieldProps)),
+            } }, textFieldProps, { inputRef: (inputRef) => {
+                searchInputRef.current = inputRef;
+                if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
+                    textFieldProps.inputRef = inputRef;
+                }
+            } })),
         React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table })));
 };
 
@@ -1114,18 +1126,11 @@ const MRT_ToggleFiltersButton = (_a) => {
 
 const MRT_ToggleGlobalFilterButton = (_a) => {
     var { table } = _a, rest = __rest(_a, ["table"]);
-    const { getState, options: { icons: { SearchIcon, SearchOffIcon }, tableId, localization, muiSearchTextFieldProps, }, setShowGlobalFilter, } = table;
+    const { getState, options: { icons: { SearchIcon, SearchOffIcon }, localization, }, refs: { searchInputRef }, setShowGlobalFilter, } = table;
     const { showGlobalFilter } = getState();
-    const textFieldProps = muiSearchTextFieldProps instanceof Function
-        ? muiSearchTextFieldProps({ table })
-        : muiSearchTextFieldProps;
     const handleToggleSearch = () => {
         setShowGlobalFilter(!showGlobalFilter);
-        setTimeout(() => {
-            var _a, _b;
-            return (_b = document
-                .getElementById((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.id) !== null && _a !== void 0 ? _a : `mrt-${tableId}-search-text-field`)) === null || _b === void 0 ? void 0 : _b.focus();
-        }, 200);
+        queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
     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))));
@@ -1184,14 +1189,20 @@ const commonToolbarStyles = ({ theme }) => ({
 });
 const MRT_TopToolbar = ({ table }) => {
     var _a;
-    const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTableTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, tableId, }, } = table;
+    const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTableTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, }, refs: { topToolbarRef }, } = table;
     const { isFullScreen, showGlobalFilter } = getState();
     const isMobile = useMediaQuery('(max-width:720px)');
     const toolbarProps = muiTableTopToolbarProps instanceof Function
         ? muiTableTopToolbarProps({ table })
         : muiTableTopToolbarProps;
     const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
-    return (React.createElement(Toolbar, Object.assign({ id: `mrt-${tableId}-toolbar-top`, variant: "dense" }, toolbarProps, { sx: (theme) => (Object.assign(Object.assign({ position: isFullScreen ? 'sticky' : undefined, top: isFullScreen ? '0' : undefined }, commonToolbarStyles({ theme })), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
+    return (React.createElement(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
+            topToolbarRef.current = ref;
+            if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
+                // @ts-ignore
+                toolbarProps.ref.current = ref;
+            }
+        }, sx: (theme) => (Object.assign(Object.assign({ position: isFullScreen ? 'sticky' : undefined, top: isFullScreen ? '0' : undefined }, commonToolbarStyles({ theme })), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
             ? toolbarProps.sx(theme)
             : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }),
         positionToolbarAlertBanner === 'top' && (React.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
@@ -1216,14 +1227,20 @@ const MRT_TopToolbar = ({ table }) => {
 };
 
 const MRT_BottomToolbar = ({ table }) => {
-    const { getState, options: { enablePagination, muiTableBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, tableId, }, } = table;
+    const { getState, options: { enablePagination, muiTableBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, }, refs: { bottomToolbarRef }, } = table;
     const { isFullScreen } = getState();
     const isMobile = useMediaQuery('(max-width:720px)');
     const toolbarProps = muiTableBottomToolbarProps instanceof Function
         ? muiTableBottomToolbarProps({ table })
         : muiTableBottomToolbarProps;
     const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
-    return (React.createElement(Toolbar, Object.assign({ id: `mrt-${tableId}-toolbar-bottom`, variant: "dense" }, toolbarProps, { sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `-3px 0 6px ${alpha(theme.palette.common.black, 0.1)}`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
+    return (React.createElement(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
+            bottomToolbarRef.current = ref;
+            if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
+                // @ts-ignore
+                toolbarProps.ref.current = ref;
+            }
+        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `-3px 0 6px ${alpha(theme.palette.common.black, 0.1)}`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
             ? toolbarProps.sx(theme)
             : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }),
         React.createElement(MRT_LinearProgressBar, { isTopToolbar: false, table: table }),
@@ -1278,7 +1295,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { getState, options: { enableColumnFilterChangeMode, columnFilterModeOptions, icons: { FilterListIcon, CloseIcon }, localization, muiTableHeadCellFilterTextFieldProps, tableId, }, setColumnFilterFns, } = table;
+    const { getState, options: { enableColumnFilterChangeMode, columnFilterModeOptions, icons: { FilterListIcon, CloseIcon }, localization, muiTableHeadCellFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { columnFilterFns } = getState();
@@ -1303,7 +1320,6 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     const isTextboxFilter = columnDef.filterVariant === 'text' ||
         (!isSelectFilter && !isMultiSelectFilter);
     const currentFilterOption = columnFilterFns === null || columnFilterFns === void 0 ? void 0 : columnFilterFns[header.id];
-    const filterId = `mrt-${tableId}-${header.id}-filter-text-field${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : ''}`;
     const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
         ? //@ts-ignore
             localization[`filter${((_b = (_a = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt) === null || _a === void 0 ? void 0 : _a.call(currentFilterOption, 0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
@@ -1380,14 +1396,14 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         return React.createElement(React.Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, table }));
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(TextField, Object.assign({ fullWidth: true, id: filterId, inputProps: {
+        React.createElement(TextField, Object.assign({ fullWidth: true, inputProps: {
                 disabled: !!filterChipLabel,
                 sx: {
                     textOverflow: 'ellipsis',
                     width: filterChipLabel ? 0 : undefined,
                 },
                 title: filterPlaceholder,
-            }, helperText: showChangeModeButton ? (React.createElement("label", { htmlFor: filterId }, localization.filterMode.replace('{filterType}', 
+            }, helperText: showChangeModeButton ? (React.createElement("label", null, localization.filterMode.replace('{filterType}', 
             // @ts-ignore
             localization[`filter${((_f = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _f === void 0 ? void 0 : _f.toUpperCase()) +
                 (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]))) : null, FormHelperTextProps: {
@@ -1419,7 +1435,13 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 renderValue: isMultiSelectFilter
                     ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (React.createElement(Box, { sx: { opacity: 0.5 } }, filterPlaceholder)) : (React.createElement(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' } }, selected === null || selected === void 0 ? void 0 : selected.map((value) => (React.createElement(Chip, { key: value, label: value })))))
                     : undefined,
-            } }, textFieldProps, { sx: (theme) => (Object.assign({ p: 0, minWidth: !filterChipLabel ? '6rem' : 'auto', width: '100%', '&	.MuiSelect-icon': {
+            } }, textFieldProps, { inputRef: (inputRef) => {
+                filterInputRefs.current[`${column.id}-${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : 0}`] =
+                    inputRef;
+                if (textFieldProps.inputRef) {
+                    textFieldProps.inputRef = inputRef;
+                }
+            }, sx: (theme) => (Object.assign({ p: 0, minWidth: !filterChipLabel ? '6rem' : 'auto', width: '100%', '&	.MuiSelect-icon': {
                     mr: '1.5rem',
                 } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
                 ? textFieldProps.sx(theme)
@@ -1731,19 +1753,21 @@ const MRT_TableHead = ({ table }) => {
     return (React.createElement(TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map((headerGroup) => (React.createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
 };
 
-const MRT_EditCellTextField = ({ cell, table }) => {
+const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
     var _a;
-    const { getState, options: { tableId, muiTableBodyCellEditTextFieldProps }, setEditingCell, setEditingRow, } = table;
+    const { getState, options: { muiTableBodyCellEditTextFieldProps }, refs: { editInputRefs }, setEditingCell, setEditingRow, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
     const { editingRow } = getState();
     const [value, setValue] = useState(() => cell.getValue());
     const mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function
-        ? muiTableBodyCellEditTextFieldProps({ cell, table })
+        ? muiTableBodyCellEditTextFieldProps({ cell, column, row, table })
         : muiTableBodyCellEditTextFieldProps;
     const mcTableBodyCellEditTextFieldProps = columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
         ? columnDef.muiTableBodyCellEditTextFieldProps({
             cell,
+            column,
+            row,
             table,
         })
         : columnDef.muiTableBodyCellEditTextFieldProps;
@@ -1757,22 +1781,26 @@ const MRT_EditCellTextField = ({ cell, table }) => {
         var _a;
         (_a = textFieldProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
         if (editingRow) {
-            if (!row._valuesCache)
-                row._valuesCache = {};
-            row._valuesCache[column.id] = value;
-            setEditingRow(Object.assign({}, editingRow));
+            setEditingRow(Object.assign(Object.assign({}, editingRow), { _valuesCache: Object.assign(Object.assign({}, editingRow._valuesCache), { [column.id]: value }) }));
         }
         setEditingCell(null);
     };
     if (columnDef.Edit) {
-        return React.createElement(React.Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, table }));
+        return React.createElement(React.Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }));
     }
-    return (React.createElement(TextField, Object.assign({ id: `mrt-${tableId}-edit-cell-text-field-${cell.id}`, margin: "none", onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onBlur: handleBlur, onChange: handleChange })));
+    return (React.createElement(TextField, Object.assign({ disabled: columnDef.enableEditing === false, fullWidth: true, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: cell.id, onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { inputRef: (inputRef) => {
+            if (inputRef) {
+                editInputRefs.current[column.id] = inputRef;
+                if (textFieldProps.inputRef) {
+                    textFieldProps.inputRef = inputRef;
+                }
+            }
+        }, onBlur: handleBlur, onChange: handleChange })));
 };
 
 const MRT_CopyButton = ({ cell, children, table }) => {
     const { options: { localization, muiTableBodyCellCopyButtonProps }, } = table;
-    const { column } = cell;
+    const { column, row } = cell;
     const { columnDef } = column;
     const [copied, setCopied] = useState(false);
     const handleCopy = (text) => {
@@ -1781,7 +1809,7 @@ const MRT_CopyButton = ({ cell, children, table }) => {
         setTimeout(() => setCopied(false), 4000);
     };
     const mTableBodyCellCopyButtonProps = muiTableBodyCellCopyButtonProps instanceof Function
-        ? muiTableBodyCellCopyButtonProps({ cell, table })
+        ? muiTableBodyCellCopyButtonProps({ cell, column, row, table })
         : muiTableBodyCellCopyButtonProps;
     const mcTableBodyCellCopyButtonProps = columnDef.muiTableBodyCellCopyButtonProps instanceof Function
         ? columnDef.muiTableBodyCellCopyButtonProps({
@@ -1798,12 +1826,13 @@ const MRT_CopyButton = ({ cell, children, table }) => {
 
 const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
     const { options: { muiTableBodyRowDragHandleProps, onRowDrop }, } = table;
+    const { row } = cell;
     const iconButtonProps = muiTableBodyRowDragHandleProps instanceof Function
-        ? muiTableBodyRowDragHandleProps({ row: cell.row, table })
+        ? muiTableBodyRowDragHandleProps({ row, table })
         : muiTableBodyRowDragHandleProps;
     const handleDragStart = (e) => {
         e.dataTransfer.setDragImage(rowRef.current, 0, 0);
-        table.setDraggingRow(cell.row);
+        table.setDraggingRow(row);
     };
     const handleDragEnd = (event) => {
         onRowDrop === null || onRowDrop === void 0 ? void 0 : onRowDrop({
@@ -1820,13 +1849,13 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
 const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
     var _a, _b, _c, _d, _f, _g, _h, _j;
     const theme = useTheme();
-    const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enablePagination, enableRowNumbers, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, tableId, }, setEditingCell, setHoveredColumn, } = table;
+    const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enablePagination, enableRowNumbers, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
     const { draggingColumn, editingCell, editingRow, hoveredColumn, density, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
     const mTableCellBodyProps = muiTableBodyCellProps instanceof Function
-        ? muiTableBodyCellProps({ cell, table })
+        ? muiTableBodyCellProps({ cell, column, row, table })
         : muiTableBodyCellProps;
     const mcTableCellBodyProps = columnDef.muiTableBodyCellProps instanceof Function
         ? columnDef.muiTableBodyCellProps({ cell, table })
@@ -1835,6 +1864,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
     const isEditable = (enableEditing || columnDef.enableEditing) &&
         columnDef.enableEditing !== false;
     const isEditing = isEditable &&
+        editingMode !== 'modal' &&
         (editingMode === 'table' ||
             (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
             (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id);
@@ -1850,13 +1880,13 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
             columnDef.enableEditing !== false &&
             editingMode === 'cell') {
             setEditingCell(cell);
-            setTimeout(() => {
-                const textField = document.getElementById(`mrt-${tableId}-edit-cell-text-field-${cell.id}`);
+            queueMicrotask(() => {
+                const textField = editInputRefs.current[column.id];
                 if (textField) {
                     textField.focus();
                     textField.select();
                 }
-            }, 200);
+            });
         }
     };
     const getIsLastLeftPinnedColumn = () => {
@@ -1932,10 +1962,10 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                     backgroundColor: enableHover &&
                         enableEditing &&
                         columnDef.enableEditing !== false &&
-                        editingMode !== 'row'
+                        ['table', 'cell'].includes(editingMode !== null && editingMode !== void 0 ? editingMode : '')
                         ? theme.palette.mode === 'dark'
-                            ? `${lighten(theme.palette.background.default, 0.13)} !important`
-                            : `${darken(theme.palette.background.default, 0.07)} !important`
+                            ? `${lighten(theme.palette.background.default, 0.2)} !important`
+                            : `${darken(theme.palette.background.default, 0.1)} !important`
                         : undefined,
                 } }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
                 ? tableCellProps.sx(theme)
@@ -1946,19 +1976,19 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
             column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React.createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
             (column.id === 'mrt-row-select' ||
                 column.id === 'mrt-row-expand' ||
-                !row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, table })) : isEditing ? (React.createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
+                !row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) : isEditing ? (React.createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
             columnDef.enableClickToCopy !== false ? (React.createElement(React.Fragment, null,
             React.createElement(MRT_CopyButton, { cell: cell, table: table },
                 React.createElement(React.Fragment, null, row.getIsGrouped() && !cell.getIsGrouped()
                     ? null
-                    : (_c = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _b === void 0 ? void 0 : _b.call(columnDef, { cell, column, table })) !== null && _c !== void 0 ? _c : cell.renderValue())),
+                    : (_c = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _b === void 0 ? void 0 : _b.call(columnDef, { cell, column, row, table })) !== null && _c !== void 0 ? _c : cell.renderValue())),
             cell.getIsGrouped() && React.createElement(React.Fragment, null,
                 " (", (_d = row.subRows) === null || _d === void 0 ? void 0 :
                 _d.length,
                 ")"))) : (React.createElement(React.Fragment, null,
             row.getIsGrouped() && !cell.getIsGrouped()
                 ? null
-                : (_g = (_f = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _f === void 0 ? void 0 : _f.call(columnDef, { cell, column, table })) !== null && _g !== void 0 ? _g : cell.renderValue(),
+                : (_g = (_f = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _f === void 0 ? void 0 : _f.call(columnDef, { cell, column, row, table })) !== null && _g !== void 0 ? _g : cell.renderValue(),
             cell.getIsGrouped() && React.createElement(React.Fragment, null,
                 " (", (_j = (_h = row.subRows) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : '',
                 ")"))))));
@@ -2011,7 +2041,7 @@ const MRT_TableBodyRow = ({ row, rowIndex, table }) => {
                         : undefined,
                 } }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
                 ? tableRowProps.sx(theme)
-                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)), draggingBorders)) }), (_b = (_a = row === null || row === void 0 ? void 0 : row.getVisibleCells()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (cell) => (React.createElement(MRT_TableBodyCell, { cell: cell, key: cell.id, enableHover: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false, rowIndex: rowIndex, rowRef: rowRef, table: table })))),
+                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)), draggingBorders)) }), (_b = (_a = row === null || row === void 0 ? void 0 : row.getVisibleCells()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (cell) => (React.createElement(MRT_TableBodyCell, { cell: cell, enableHover: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false, key: cell.id, rowIndex: rowIndex, rowRef: rowRef, table: table })))),
         renderDetailPanel && !row.getIsGrouped() && (React.createElement(MRT_TableDetailPanel, { row: row, table: table }))));
 };
 
@@ -2159,25 +2189,29 @@ const MRT_Table = ({ tableContainerRef, table }) => {
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 const MRT_TableContainer = ({ table }) => {
-    var _a;
-    const { getState, options: { enableStickyHeader, enableRowVirtualization, muiTableContainerProps, tableId, }, } = table;
+    const { getState, options: { enableStickyHeader, enableRowVirtualization, muiTableContainerProps, }, refs: { tableContainerRef, bottomToolbarRef, topToolbarRef }, } = table;
     const { isFullScreen } = getState();
     const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
     const tableContainerProps = muiTableContainerProps instanceof Function
         ? muiTableContainerProps({ table })
         : muiTableContainerProps;
-    const tableContainerRef = (_a = tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) !== null && _a !== void 0 ? _a : useRef(null);
     useIsomorphicLayoutEffect(() => {
         var _a, _b, _c, _d;
         const topToolbarHeight = typeof document !== 'undefined'
-            ? (_b = (_a = document === null || document === void 0 ? void 0 : document.getElementById(`mrt-${tableId}-toolbar-top`)) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0
+            ? (_b = (_a = topToolbarRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0
             : 0;
         const bottomToolbarHeight = typeof document !== 'undefined'
-            ? (_d = (_c = document === null || document === void 0 ? void 0 : document.getElementById(`mrt-${tableId}-toolbar-bottom`)) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0
+            ? (_d = (_c = bottomToolbarRef === null || bottomToolbarRef === void 0 ? void 0 : bottomToolbarRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0
             : 0;
         setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
     });
-    return (React.createElement(TableContainer, Object.assign({ ref: tableContainerRef }, tableContainerProps, { sx: (theme) => (Object.assign({ maxWidth: '100%', maxHeight: enableStickyHeader || enableRowVirtualization
+    return (React.createElement(TableContainer, Object.assign({}, tableContainerProps, { ref: (ref) => {
+            tableContainerRef.current = ref;
+            if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
+                //@ts-ignore
+                tableContainerProps.ref.current = ref;
+            }
+        }, sx: (theme) => (Object.assign({ maxWidth: '100%', maxHeight: enableStickyHeader || enableRowVirtualization
                 ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
                 : undefined, overflow: 'auto' }, ((tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx) instanceof Function
             ? tableContainerProps.sx(theme)
@@ -2209,10 +2243,32 @@ const MRT_TablePaper = ({ table }) => {
         enableBottomToolbar && React.createElement(MRT_BottomToolbar, { table: table })));
 };
 
+const MRT_EditRowModal = ({ open, row, table, }) => {
+    const { options: { localization }, } = table;
+    return (React.createElement(Dialog, { open: open },
+        React.createElement(DialogTitle, { textAlign: "center" }, localization.edit),
+        React.createElement(DialogContent, null,
+            React.createElement("form", { onSubmit: (e) => e.preventDefault() },
+                React.createElement(Stack, { sx: {
+                        width: '100%',
+                        minWidth: { xs: '300px', sm: '360px', md: '400px' },
+                        gap: '1.5rem',
+                    } }, row
+                    .getAllCells()
+                    .filter((cell) => cell.column.columnDef.columnDefType === 'data')
+                    .map((cell) => (React.createElement(MRT_EditCellTextField, { cell: cell, key: cell.id, showLabel: true, table: table })))))),
+        React.createElement(DialogActions, { sx: { p: '1.25rem' } },
+            React.createElement(MRT_EditActionButtons, { row: row, table: table, variant: "text" }))));
+};
+
 const MRT_TableRoot = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
-    const [tableId, setIdPrefix] = useState(props.tableId);
-    useEffect(() => { var _a; return setIdPrefix((_a = props.tableId) !== null && _a !== void 0 ? _a : Math.random().toString(36).substring(2, 9)); }, [props.tableId]);
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+    const bottomToolbarRef = useRef(null);
+    const editInputRefs = useRef({});
+    const filterInputRefs = useRef({});
+    const searchInputRef = useRef(null);
+    const tableContainerRef = useRef(null);
+    const topToolbarRef = useRef(null);
     const initialState = useMemo(() => {
         var _a, _b;
         const initState = (_a = props.initialState) !== null && _a !== void 0 ? _a : {};
@@ -2239,23 +2295,26 @@ const MRT_TableRoot = (props) => {
     const [editingCell, setEditingCell] = useState((_e = initialState.editingCell) !== null && _e !== void 0 ? _e : null);
     const [editingRow, setEditingRow] = useState((_f = initialState.editingRow) !== null && _f !== void 0 ? _f : null);
     const [globalFilterFn, setGlobalFilterFn] = useState((_g = initialState.globalFilterFn) !== null && _g !== void 0 ? _g : 'fuzzy');
-    const [hoveredColumn, setHoveredColumn] = useState((_h = initialState.hoveredColumn) !== null && _h !== void 0 ? _h : null);
-    const [hoveredRow, setHoveredRow] = useState((_j = initialState.hoveredRow) !== null && _j !== void 0 ? _j : null);
-    const [isFullScreen, setIsFullScreen] = useState((_k = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _k !== void 0 ? _k : false);
-    const [showAlertBanner, setShowAlertBanner] = useState((_m = (_l = props.initialState) === null || _l === void 0 ? void 0 : _l.showAlertBanner) !== null && _m !== void 0 ? _m : false);
-    const [showColumnFilters, setShowFilters] = useState((_o = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _o !== void 0 ? _o : false);
-    const [showGlobalFilter, setShowGlobalFilter] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _p !== void 0 ? _p : false);
+    const [grouping, setGrouping] = useState((_h = initialState.grouping) !== null && _h !== void 0 ? _h : []);
+    const [hoveredColumn, setHoveredColumn] = useState((_j = initialState.hoveredColumn) !== null && _j !== void 0 ? _j : null);
+    const [hoveredRow, setHoveredRow] = useState((_k = initialState.hoveredRow) !== null && _k !== void 0 ? _k : null);
+    const [isFullScreen, setIsFullScreen] = useState((_l = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _l !== void 0 ? _l : false);
+    const [showAlertBanner, setShowAlertBanner] = useState((_o = (_m = props.initialState) === null || _m === void 0 ? void 0 : _m.showAlertBanner) !== null && _o !== void 0 ? _o : false);
+    const [showColumnFilters, setShowFilters] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
+    const [showGlobalFilter, setShowGlobalFilter] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
     const displayColumns = useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return [
             columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: (_a = props.localization) === null || _a === void 0 ? void 0 : _a.move, size: 60 }, defaultDisplayColumnDefOptions), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-drag']), { id: 'mrt-row-drag' }),
-            columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell }) => (React.createElement(MRT_ToggleRowActionMenuButton, { row: cell.row, table: table })), header: (_c = props.localization) === null || _c === void 0 ? void 0 : _c.actions, size: 70 }, defaultDisplayColumnDefOptions), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-actions']), { id: 'mrt-row-actions' }),
-            columnOrder.includes('mrt-row-expand') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell }) => (React.createElement(MRT_ExpandButton, { row: cell.row, table: table })), Header: () => props.enableExpandAll ? (React.createElement(MRT_ExpandAllButton, { table: table })) : null, header: (_e = props.localization) === null || _e === void 0 ? void 0 : _e.expand, size: 60 }, defaultDisplayColumnDefOptions), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-expand']), { id: 'mrt-row-expand' }),
-            columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell }) => (React.createElement(MRT_SelectCheckbox, { row: cell.row, table: table })), Header: () => props.enableSelectAll ? (React.createElement(MRT_SelectCheckbox, { selectAll: true, table: table })) : null, header: (_g = props.localization) === null || _g === void 0 ? void 0 : _g.select, size: 60 }, defaultDisplayColumnDefOptions), (_h = props.displayColumnDefOptions) === null || _h === void 0 ? void 0 : _h['mrt-row-select']), { id: 'mrt-row-select' }),
-            columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell }) => cell.row.index + 1, Header: () => { var _a; return (_a = props.localization) === null || _a === void 0 ? void 0 : _a.rowNumber; }, header: (_j = props.localization) === null || _j === void 0 ? void 0 : _j.rowNumbers, size: 60 }, defaultDisplayColumnDefOptions), (_k = props.displayColumnDefOptions) === null || _k === void 0 ? void 0 : _k['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
+            columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ToggleRowActionMenuButton, { row: row, table: table })), header: (_c = props.localization) === null || _c === void 0 ? void 0 : _c.actions, size: 70 }, defaultDisplayColumnDefOptions), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-actions']), { id: 'mrt-row-actions' }),
+            columnOrder.includes('mrt-row-expand') &&
+                showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React.createElement(MRT_ExpandAllButton, { table: table })) : null, header: (_e = props.localization) === null || _e === void 0 ? void 0 : _e.expand, size: 60 }, defaultDisplayColumnDefOptions), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-expand']), { id: 'mrt-row-expand' }),
+            columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll ? (React.createElement(MRT_SelectCheckbox, { selectAll: true, table: table })) : null, header: (_g = props.localization) === null || _g === void 0 ? void 0 : _g.select, size: 60 }, defaultDisplayColumnDefOptions), (_h = props.displayColumnDefOptions) === null || _h === void 0 ? void 0 : _h['mrt-row-select']), { id: 'mrt-row-select' }),
+            columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => { var _a; return (_a = props.localization) === null || _a === void 0 ? void 0 : _a.rowNumber; }, header: (_j = props.localization) === null || _j === void 0 ? void 0 : _j.rowNumbers, size: 60 }, defaultDisplayColumnDefOptions), (_k = props.displayColumnDefOptions) === null || _k === void 0 ? void 0 : _k['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
         ].filter(Boolean);
     }, [
         columnOrder,
+        grouping,
         props.displayColumnDefOptions,
         props.editingMode,
         props.enableColumnDragging,
@@ -2272,6 +2331,7 @@ const MRT_TableRoot = (props) => {
         props.enableSelectAll,
         props.localization,
         props.positionActionsColumn,
+        props.renderDetailPanel,
     ]);
     const columnDefs = useMemo(() => prepareColumns([...displayColumns, ...props.columns], columnFilterFns, props.filterFns, props.sortingFns), [columnFilterFns, displayColumns, props.columns]);
     const data = useMemo(() => {
@@ -2289,11 +2349,11 @@ const MRT_TableRoot = (props) => {
                 });
             })))
             : props.data;
-    }, [props.data, (_q = props.state) === null || _q === void 0 ? void 0 : _q.isLoading, (_r = props.state) === null || _r === void 0 ? void 0 : _r.showSkeletons]);
+    }, [props.data, (_r = props.state) === null || _r === void 0 ? void 0 : _r.isLoading, (_s = props.state) === null || _s === void 0 ? void 0 : _s.showSkeletons]);
     //@ts-ignore
-    const table = Object.assign(Object.assign({}, useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFilteredRowModel: getFilteredRowModel(), getGroupedRowModel: getGroupedRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), onColumnOrderChange: setColumnOrder, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
+    const table = Object.assign(Object.assign({}, useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFilteredRowModel: getFilteredRowModel(), getGroupedRowModel: getGroupedRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
         //@ts-ignore
-        columns: columnDefs, data, globalFilterFn: (_t = (_s = props.filterFns) === null || _s === void 0 ? void 0 : _s[globalFilterFn]) !== null && _t !== void 0 ? _t : (_u = props.filterFns) === null || _u === void 0 ? void 0 : _u.fuzzy, initialState, state: Object.assign({ columnFilterFns,
+        columns: columnDefs, data, globalFilterFn: (_u = (_t = props.filterFns) === null || _t === void 0 ? void 0 : _t[globalFilterFn]) !== null && _u !== void 0 ? _u : (_v = props.filterFns) === null || _v === void 0 ? void 0 : _v.fuzzy, initialState, state: Object.assign({ columnFilterFns,
             columnOrder,
             density,
             draggingColumn,
@@ -2301,20 +2361,29 @@ const MRT_TableRoot = (props) => {
             editingCell,
             editingRow,
             globalFilterFn,
+            grouping,
             hoveredColumn,
             hoveredRow,
             isFullScreen,
             showAlertBanner,
             showColumnFilters,
-            showGlobalFilter }, props.state), tableId }))), { setColumnFilterFns: (_v = props.onFilterFnsChange) !== null && _v !== void 0 ? _v : setColumnFilterFns, setDensity: (_w = props.onDensityChange) !== null && _w !== void 0 ? _w : setDensity, setDraggingColumn: (_x = props.onDraggingColumnChange) !== null && _x !== void 0 ? _x : setDraggingColumn, setDraggingRow: (_y = props.onDraggingRowChange) !== null && _y !== void 0 ? _y : setDraggingRow, setEditingCell: (_z = props.onEditingCellChange) !== null && _z !== void 0 ? _z : setEditingCell, setEditingRow: (_0 = props.onEditingRowChange) !== null && _0 !== void 0 ? _0 : setEditingRow, setGlobalFilterFn: (_1 = props.onGlobalFilterFnChange) !== null && _1 !== void 0 ? _1 : setGlobalFilterFn, setHoveredColumn: (_2 = props.onHoveredColumnChange) !== null && _2 !== void 0 ? _2 : setHoveredColumn, setHoveredRow: (_3 = props.onHoveredRowChange) !== null && _3 !== void 0 ? _3 : setHoveredRow, setIsFullScreen: (_4 = props.onIsFullScreenChange) !== null && _4 !== void 0 ? _4 : setIsFullScreen, setShowAlertBanner: (_5 = props.onShowAlertBannerChange) !== null && _5 !== void 0 ? _5 : setShowAlertBanner, setShowFilters: (_6 = props.onShowFiltersChange) !== null && _6 !== void 0 ? _6 : setShowFilters, setShowGlobalFilter: (_7 = props.onShowGlobalFilterChange) !== null && _7 !== void 0 ? _7 : setShowGlobalFilter });
+            showGlobalFilter }, props.state) }))), { refs: {
+            bottomToolbarRef,
+            editInputRefs,
+            filterInputRefs,
+            searchInputRef,
+            tableContainerRef,
+            topToolbarRef,
+        }, setColumnFilterFns: (_w = props.onFilterFnsChange) !== null && _w !== void 0 ? _w : setColumnFilterFns, setDensity: (_x = props.onDensityChange) !== null && _x !== void 0 ? _x : setDensity, setDraggingColumn: (_y = props.onDraggingColumnChange) !== null && _y !== void 0 ? _y : setDraggingColumn, setDraggingRow: (_z = props.onDraggingRowChange) !== null && _z !== void 0 ? _z : setDraggingRow, setEditingCell: (_0 = props.onEditingCellChange) !== null && _0 !== void 0 ? _0 : setEditingCell, setEditingRow: (_1 = props.onEditingRowChange) !== null && _1 !== void 0 ? _1 : setEditingRow, setGlobalFilterFn: (_2 = props.onGlobalFilterFnChange) !== null && _2 !== void 0 ? _2 : setGlobalFilterFn, setHoveredColumn: (_3 = props.onHoveredColumnChange) !== null && _3 !== void 0 ? _3 : setHoveredColumn, setHoveredRow: (_4 = props.onHoveredRowChange) !== null && _4 !== void 0 ? _4 : setHoveredRow, setIsFullScreen: (_5 = props.onIsFullScreenChange) !== null && _5 !== void 0 ? _5 : setIsFullScreen, setShowAlertBanner: (_6 = props.onShowAlertBannerChange) !== null && _6 !== void 0 ? _6 : setShowAlertBanner, setShowFilters: (_7 = props.onShowFiltersChange) !== null && _7 !== void 0 ? _7 : setShowFilters, setShowGlobalFilter: (_8 = props.onShowGlobalFilterChange) !== null && _8 !== void 0 ? _8 : setShowGlobalFilter });
     return (React.createElement(React.Fragment, null,
         React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => setIsFullScreen(false), open: isFullScreen, transitionDuration: 400 },
             React.createElement(MRT_TablePaper, { table: table })),
-        !isFullScreen && React.createElement(MRT_TablePaper, { table: table })));
+        !isFullScreen && React.createElement(MRT_TablePaper, { table: table }),
+        editingRow && props.editingMode === 'modal' && (React.createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));
 };
 
 var MaterialReactTable = (_a) => {
-    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, editingMode = 'row', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilterChangeMode = false, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterChangeMode = false, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
+    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilterChangeMode = false, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterChangeMode = false, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
     return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilterChangeMode: enableColumnFilterChangeMode, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterChangeMode: enableGlobalFilterChangeMode, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
 };