material-react-table 0.36.2 → 0.37.0

package/dist/esm/MaterialReactTable.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, DragEvent, ReactNode, SetStateAction } from 'react';
+import { Dispatch, DragEvent, MutableRefObject, ReactNode, SetStateAction } from 'react';
 import type { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import type { Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
 import type { Options as VirtualizerOptions } from 'react-virtual';
@@ -32,9 +32,16 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
     getState: () => MRT_TableState<TData>;
     options: MaterialReactTableProps<TData> & {
         icons: MRT_Icons;
-        tableId: string;
         localization: MRT_Localization;
     };
+    refs: {
+        bottomToolbarRef: MutableRefObject<HTMLDivElement>;
+        editInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
+        filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
+        searchInputRef: MutableRefObject<HTMLInputElement>;
+        tableContainerRef: MutableRefObject<HTMLDivElement>;
+        topToolbarRef: MutableRefObject<HTMLDivElement>;
+    };
     setColumnFilterFns: Dispatch<SetStateAction<{
         [key: string]: MRT_FilterOption;
     }>>;
@@ -78,19 +85,22 @@ export declare type MRT_TableState<TData extends Record<string, any> = {}> = Tab
     showSkeletons: boolean;
 };
 export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'aggregatedCell' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
-    AggregatedCell?: ({ cell, column, table, }: {
+    AggregatedCell?: ({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
         column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
-    Cell?: ({ cell, column, table, }: {
+    Cell?: ({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
         column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
-    Edit?: ({ cell, column, table, }: {
+    Edit?: ({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
         column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
     Filter?: ({ column, header, table, }: {
@@ -169,8 +179,10 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
     }) => ButtonProps);
-    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, table, }: {
+    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => TextFieldProps);
     muiTableBodyCellProps?: TableCellProps | (({ cell, table, }: {
@@ -231,7 +243,7 @@ export declare type MRT_SortingOption = LiteralUnion<string & keyof typeof MRT_S
 export declare type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
 export declare type MRT_FilterOption = LiteralUnion<string & keyof typeof MRT_FilterFns>;
 export declare type MRT_FilterFn<TData extends Record<string, any> = {}> = FilterFn<TData> | MRT_FilterOption;
-export declare type MRT_DisplayColumnIds = 'mrt-row-drag' | 'mrt-row-actions' | 'mrt-row-expand' | 'mrt-row-select' | 'mrt-row-numbers';
+export declare type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row-expand' | 'mrt-row-numbers' | 'mrt-row-select';
 /**
  * `columns` and `data` props are the only required props, but there are over 150 other optional props.
  *
@@ -301,17 +313,23 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => CheckboxProps);
-    muiTableBodyCellCopyButtonProps?: ButtonProps | (({ table, cell, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellCopyButtonProps?: ButtonProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => ButtonProps);
-    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, table, }: {
+    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => TextFieldProps);
-    muiTableBodyCellProps?: TableCellProps | (({ table, cell, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellProps?: TableCellProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => TableCellProps);
     muiTableBodyCellSkeletonProps?: SkeletonProps | (({ table, cell, }: {
         table: MRT_TableInstance<TData>;
@@ -398,7 +416,8 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     onDensityChange?: OnChangeFn<boolean>;
     onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
-    onEditingRowSave?: ({ row, table, values, }: {
+    onEditingRowSave?: ({ exitEditingMode, row, table, values, }: {
+        exitEditingMode: () => void;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
         values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
@@ -454,7 +473,6 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
-    tableId?: string;
     virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>> | (({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => Partial<VirtualizerOptions<HTMLDivElement>>);

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

@@ -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
@@ -704,7 +703,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();
@@ -745,13 +744,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 = () => {
@@ -882,19 +875,25 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) =
 };
 
 const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
-    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onEditingRowSave, }, setEditingRow, } = table;
+    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onEditingRowSave, }, refs: { editInputRefs }, setEditingRow, } = table;
     const { editingRow } = getState();
-    const handleCancel = () => {
-        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' } }, variant === 'icon' ? (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { arrow: true, title: localization.cancel },
@@ -965,7 +964,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 : '');
@@ -988,7 +987,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' } },
@@ -998,7 +997,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 })));
 };
 
@@ -1123,18 +1127,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))));
@@ -1193,14 +1190,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 })),
@@ -1225,14 +1228,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 }),
@@ -1287,7 +1296,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();
@@ -1312,7 +1321,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()) +
@@ -1389,14 +1397,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: {
@@ -1428,7 +1436,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)
@@ -1742,17 +1756,19 @@ const MRT_TableHead = ({ table }) => {
 
 const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
     var _a;
-    const { getState, options: { tableId, muiTableBodyCellEditTextFieldProps }, setEditingCell, setEditingRow, } = table;
-    const { column } = cell;
+    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;
@@ -1771,14 +1787,21 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
         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({ disabled: columnDef.enableEditing === false, fullWidth: true, id: `mrt-${tableId}-edit-cell-text-field-${cell.id}`, label: showLabel ? column.columnDef.header : undefined, 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) => {
@@ -1787,7 +1810,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({
@@ -1804,12 +1827,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({
@@ -1826,13 +1850,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 })
@@ -1857,13 +1881,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 = () => {
@@ -1953,19 +1977,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 : '',
                 ")"))))));
@@ -2018,7 +2042,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 }))));
 };
 
@@ -2166,25 +2190,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)
@@ -2221,22 +2249,27 @@ const MRT_EditRowModal = ({ open, row, table, }) => {
     return (React.createElement(Dialog, { open: open },
         React.createElement(DialogTitle, { textAlign: "center" }, localization.edit),
         React.createElement(DialogContent, null,
-            React.createElement(Stack, { sx: {
-                    width: '100%',
-                    minWidth: { xs: '300px', sm: '360px', md: '400px' },
-                    gap: '1.5rem',
-                } }, row
-                .getVisibleCells()
-                .filter((cell) => cell.column.columnDef.columnDefType === 'data')
-                .map((cell) => (React.createElement(MRT_EditCellTextField, { cell: cell, key: cell.id, showLabel: true, table: table }))))),
+            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]);
+    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 : {};
@@ -2273,10 +2306,10 @@ const MRT_TableRoot = (props) => {
         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') && 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,
@@ -2330,7 +2363,14 @@ const MRT_TableRoot = (props) => {
             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: (_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 });
     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 })),
@@ -2339,7 +2379,7 @@ const MRT_TableRoot = (props) => {
 };
 
 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)));
 };