material-react-table 1.7.4 → 1.8.1

package/README.md

@@ -27,17 +27,9 @@ View [Documentation](https://www.material-react-table.com/)
 
 ### __Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
 
-<br />
-<div style="display:flex;align-items:center;">
-<img src="https://material-react-table.com/mrt_logo.svg" alt="MRT" height="24"/>
-=
-<img src="https://mui.com/static/logo.png" height="24">
-🤝
-<img src="https://react-table-v7.tanstack.com/_next/static/images/logo-light-66d4dd9109004332c863391e6d1cb309.svg" height="24">
-</div>
-<br />
-
-MRT is built with Material-UI components on top of [TanStack Table's](https://tanstack.com/table/v8) comprehensive and powerful react hooks api.
+<img src="https://material-react-table.com/banner.png" alt="MRT" height="50"/>
+
+> Want to use Mantine instead of Material UI? Check out [Mantine React Table](https://www.mantine-react-table.com)
 
 ## Learn More
 
@@ -148,7 +140,7 @@ export default function App() {
         accessorKey: 'name', //simple recommended way to define a column
         header: 'Name',
         muiTableHeadCellProps: { sx: { color: 'green' } }, //optional custom props
-        Cell: ({ cell}) => <span>{cell.getValue()}</span>, //optional custom cell render
+        Cell: ({ cell }) => <span>{cell.getValue()}</span>, //optional custom cell render
       },
       {
         accessorFn: (row) => row.age, //alternate way
@@ -202,4 +194,4 @@ PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/K
 
 Read the [Contributing Guide](https://github.com/KevinVandy/material-react-table/blob/main/CONTRIBUTING.md) to learn how to run this project locally.
 
-<!-- Use the FORCE, Luke! -->
+<!-- Use the FORCE, Luke! -->

package/dist/cjs/index.js

@@ -365,7 +365,12 @@ const MRT_DefaultDisplayColumn = {
     enableResizing: false,
     enableSorting: false,
 };
-const parseCSSVarId = (id) => id.replaceAll('.', '_').replaceAll(' ', '_').replaceAll('+', '_');
+const parseCSSVarId = (id) => id
+    .replaceAll('.', '_')
+    .replaceAll(' ', '_')
+    .replaceAll('+', '_')
+    .replaceAll('(', '_')
+    .replaceAll(')', '_');
 
 const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
     const itemRank = matchSorterUtils.rankItem(row.getValue(columnId), filterValue, {
@@ -635,6 +640,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
     const { globalFilterFn, density } = getState();
     const { column } = header !== null && header !== void 0 ? header : {};
     const { columnDef } = column !== null && column !== void 0 ? column : {};
+    const currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
     const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
     const internalFilterOptions = React.useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
         ? allowedColumnFilterOptions === undefined ||
@@ -646,12 +652,16 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
         if (header && column) {
             setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
             if (['empty', 'notEmpty'].includes(option)) {
-                column.setFilterValue(' ');
+                if (currentFilterValue !== ' ') {
+                    column.setFilterValue(' ');
+                }
             }
             else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
                 ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(option)) {
-                column.setFilterValue([]);
-                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
+                if (currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.length) {
+                    column.setFilterValue([]);
+                    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
+                }
             }
             else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range' ||
                 ['between', 'betweenInclusive', 'inNumberRange'].includes(option)) {
@@ -659,8 +669,10 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
                 setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
             }
             else {
-                column.setFilterValue('');
-                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
+                if (!['', undefined].includes(currentFilterValue)) {
+                    column.setFilterValue('');
+                    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
+                }
             }
         }
         else {
@@ -1039,11 +1051,13 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) =
     return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
         } },
-        enableEditing && (React__default["default"].createElement(MenuItem__default["default"], { onClick: handleEdit, sx: commonMenuItemStyles },
-            React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
-                React__default["default"].createElement(ListItemIcon__default["default"], null,
-                    React__default["default"].createElement(EditIcon, null)),
-                localization.edit))), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 :
+        enableEditing instanceof Function
+            ? enableEditing(row)
+            : enableEditing && (React__default["default"].createElement(MenuItem__default["default"], { onClick: handleEdit, sx: commonMenuItemStyles },
+                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
+                    React__default["default"].createElement(ListItemIcon__default["default"], null,
+                        React__default["default"].createElement(EditIcon, null)),
+                    localization.edit))), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 :
         renderRowActionMenuItems({
             row,
             table,
@@ -1110,7 +1124,10 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
         setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions ? (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions({ cell, row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React__default["default"].createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React__default["default"].createElement(Tooltip__default["default"], { placement: "right", arrow: true, title: localization.edit },
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions ? (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions({ cell, row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React__default["default"].createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
+        (enableEditing instanceof Function
+            ? enableEditing(row)
+            : enableEditing) ? (React__default["default"].createElement(Tooltip__default["default"], { placement: "right", arrow: true, title: localization.edit },
         React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode },
             React__default["default"].createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
@@ -1939,7 +1956,11 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
                 transform: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) !== 'right'
                     ? 'translateX(-0.5ch)'
                     : undefined,
-            }, IconComponent: ArrowDownwardIcon })));
+            }, IconComponent: ArrowDownwardIcon, onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
+            } })));
 };
 
 const MRT_TableHeadCell = ({ header, table }) => {
@@ -2105,7 +2126,7 @@ const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddi
 };
 
 const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
-    var _a;
+    var _a, _b;
     const { getState, options: { muiTableBodyCellEditTextFieldProps }, refs: { editInputRefs }, setEditingCell, setEditingRow, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
@@ -2123,6 +2144,7 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
         })
         : columnDef.muiTableBodyCellEditTextFieldProps;
     const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
+    const isSelectEdit = columnDef.editVariant === 'select';
     const saveRow = (newValue) => {
         if (editingRow) {
             setEditingRow(Object.assign(Object.assign({}, editingRow), { _valuesCache: Object.assign(Object.assign({}, editingRow._valuesCache), { [column.id]: newValue }) }));
@@ -2152,18 +2174,37 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
     if (columnDef.Edit) {
         return React__default["default"].createElement(React__default["default"].Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }));
     }
-    return (React__default["default"].createElement(TextField__default["default"], Object.assign({ disabled: columnDef.enableEditing === false, fullWidth: true, inputRef: (inputRef) => {
+    return (React__default["default"].createElement(TextField__default["default"], Object.assign({ disabled: (columnDef.enableEditing instanceof Function
+            ? columnDef.enableEditing(row)
+            : columnDef.enableEditing) === false, fullWidth: true, inputRef: (inputRef) => {
             if (inputRef) {
                 editInputRefs.current[column.id] = inputRef;
                 if (textFieldProps.inputRef) {
                     textFieldProps.inputRef = inputRef;
                 }
             }
-        }, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: column.id, placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onClick: (e) => {
+        }, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: column.id, placeholder: columnDef.header, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { onClick: (e) => {
             var _a;
             e.stopPropagation();
             (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
-        }, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown })));
+        }, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown }), (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _b === void 0 ? void 0 : _b.map((option) => {
+        let value;
+        let text;
+        if (typeof option !== 'object') {
+            value = option;
+            text = option;
+        }
+        else {
+            value = option.value;
+            text = option.text;
+        }
+        return (React__default["default"].createElement(MenuItem__default["default"], { key: value, sx: {
+                display: 'flex',
+                m: 0,
+                alignItems: 'center',
+                gap: '0.5rem',
+            }, value: value }, text));
+    })));
 };
 
 const MRT_CopyButton = ({ cell, children, table, }) => {
@@ -2247,6 +2288,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
         renderedCellValue = cell.renderValue();
     }
     if (enableFilterMatchHighlighting &&
+        columnDef.enableFilterMatchHighlighting !== false &&
         renderedCellValue &&
         allowedTypes.includes(typeof renderedCellValue) &&
         ((filterValue &&
@@ -2339,8 +2381,10 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
             }
             : undefined;
     }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
-    const isEditable = (enableEditing || columnDef.enableEditing) &&
-        columnDef.enableEditing !== false;
+    const isEditable = (enableEditing instanceof Function ? enableEditing(row) : enableEditing) &&
+        (columnDef.enableEditing instanceof Function
+            ? columnDef.enableEditing(row)
+            : columnDef.enableEditing) !== false;
     const isEditing = isEditable &&
         editingMode !== 'modal' &&
         (editingMode === 'table' ||
@@ -2350,9 +2394,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
     const handleDoubleClick = (event) => {
         var _a;
         (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
-        if ((enableEditing || columnDef.enableEditing) &&
-            columnDef.enableEditing !== false &&
-            editingMode === 'cell') {
+        if (isEditable && editingMode === 'cell') {
             setEditingCell(cell);
             queueMicrotask(() => {
                 var _a;
@@ -2397,8 +2439,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
                             : 1.25)}rem`
                 : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0, '&:hover': {
                 backgroundColor: enableHover &&
-                    enableEditing &&
-                    columnDef.enableEditing !== false &&
+                    isEditable &&
                     ['table', 'cell'].includes(editingMode !== null && editingMode !== void 0 ? editingMode : '')
                     ? theme.palette.mode === 'dark'
                         ? `${styles.lighten(theme.palette.background.default, 0.2)} !important`
@@ -2857,7 +2898,7 @@ const MRT_EditRowModal = ({ open, row, table, }) => {
 };
 
 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, _8, _9, _10, _11;
+    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, _9, _10, _11, _12, _13;
     const bottomToolbarRef = React.useRef(null);
     const editInputRefs = React.useRef({});
     const filterInputRefs = React.useRef({});
@@ -2898,18 +2939,18 @@ const MRT_TableRoot = (props) => {
     const [showGlobalFilter, setShowGlobalFilter] = React.useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
     const [showToolbarDropZone, setShowToolbarDropZone] = React.useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _r !== void 0 ? _r : false);
     const displayColumns = React.useMemo(() => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         return [
-            columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: props.localization.move, size: 60 }, props.defaultDisplayColumn), (_a = props.displayColumnDefOptions) === null || _a === void 0 ? void 0 : _a['mrt-row-drag']), { id: 'mrt-row-drag' }),
-            columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React__default["default"].createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: props.localization.actions, size: 70 }, props.defaultDisplayColumn), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-actions']), { id: 'mrt-row-actions' }),
-            columnOrder.includes('mrt-row-expand') &&
-                showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
+            ((_b = (_a = props.state) === null || _a === void 0 ? void 0 : _a.columnOrder) !== null && _b !== void 0 ? _b : columnOrder).includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: props.localization.move, size: 60 }, props.defaultDisplayColumn), (_c = props.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-drag']), { id: 'mrt-row-drag' }),
+            ((_e = (_d = props.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React__default["default"].createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: props.localization.actions, size: 70 }, props.defaultDisplayColumn), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-actions']), { id: 'mrt-row-actions' }),
+            ((_h = (_g = props.state) === null || _g === void 0 ? void 0 : _g.columnOrder) !== null && _h !== void 0 ? _h : columnOrder).includes('mrt-row-expand') &&
+                showExpandColumn(props, (_k = (_j = props.state) === null || _j === void 0 ? void 0 : _j.grouping) !== null && _k !== void 0 ? _k : grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
                     ? () => React__default["default"].createElement(MRT_ExpandAllButton, { table: table })
-                    : null, header: props.localization.expand, size: 60 }, props.defaultDisplayColumn), (_c = props.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-expand']), { id: 'mrt-row-expand' }),
-            columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
+                    : null, header: props.localization.expand, size: 60 }, props.defaultDisplayColumn), (_l = props.displayColumnDefOptions) === null || _l === void 0 ? void 0 : _l['mrt-row-expand']), { id: 'mrt-row-expand' }),
+            ((_o = (_m = props.state) === null || _m === void 0 ? void 0 : _m.columnOrder) !== null && _o !== void 0 ? _o : columnOrder).includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
                     ? () => React__default["default"].createElement(MRT_SelectCheckbox, { selectAll: true, table: table })
-                    : null, header: props.localization.select, size: 60 }, props.defaultDisplayColumn), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-select']), { id: 'mrt-row-select' }),
-            columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => props.localization.rowNumber, header: props.localization.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_e = props.displayColumnDefOptions) === null || _e === void 0 ? void 0 : _e['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
+                    : null, header: props.localization.select, size: 60 }, props.defaultDisplayColumn), (_p = props.displayColumnDefOptions) === null || _p === void 0 ? void 0 : _p['mrt-row-select']), { id: 'mrt-row-select' }),
+            ((_r = (_q = props.state) === null || _q === void 0 ? void 0 : _q.columnOrder) !== null && _r !== void 0 ? _r : columnOrder).includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => props.localization.rowNumber, header: props.localization.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_s = props.displayColumnDefOptions) === null || _s === void 0 ? void 0 : _s['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
         ].filter(Boolean);
     }, [
         columnOrder,
@@ -2932,6 +2973,8 @@ const MRT_TableRoot = (props) => {
         props.localization,
         props.positionActionsColumn,
         props.renderDetailPanel,
+        (_s = props.state) === null || _s === void 0 ? void 0 : _s.columnOrder,
+        (_t = props.state) === null || _t === void 0 ? void 0 : _t.grouping,
     ]);
     const columnDefs = React.useMemo(() => {
         var _a, _b, _c;
@@ -2947,7 +2990,7 @@ const MRT_TableRoot = (props) => {
         columnFilterFns,
         displayColumns,
         props.columns,
-        (_s = props.state) === null || _s === void 0 ? void 0 : _s.columnFilterFns,
+        (_u = props.state) === null || _u === void 0 ? void 0 : _u.columnFilterFns,
     ]);
     const data = React.useMemo(() => {
         var _a, _b, _c, _d, _e;
@@ -2961,11 +3004,11 @@ const MRT_TableRoot = (props) => {
                 [getColumnId(col)]: null,
             }))))
             : props.data;
-    }, [props.data, (_t = props.state) === null || _t === void 0 ? void 0 : _t.isLoading, (_u = props.state) === null || _u === void 0 ? void 0 : _u.showSkeletons]);
+    }, [props.data, (_v = props.state) === null || _v === void 0 ? void 0 : _v.isLoading, (_w = props.state) === null || _w === void 0 ? void 0 : _w.showSkeletons]);
     //@ts-ignore
     const table = Object.assign(Object.assign({}, reactTable.useReactTable(Object.assign(Object.assign({ getCoreRowModel: reactTable.getCoreRowModel(), getExpandedRowModel: reactTable.getExpandedRowModel(), getFacetedRowModel: reactTable.getFacetedRowModel(), getFilteredRowModel: reactTable.getFilteredRowModel(), getGroupedRowModel: reactTable.getGroupedRowModel(), getPaginationRowModel: reactTable.getPaginationRowModel(), getSortedRowModel: reactTable.getSortedRowModel(), onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
         //@ts-ignore
-        columns: columnDefs, data, globalFilterFn: (_w = (_v = props.filterFns) === null || _v === void 0 ? void 0 : _v[globalFilterFn]) !== null && _w !== void 0 ? _w : (_x = props.filterFns) === null || _x === void 0 ? void 0 : _x.fuzzy, initialState, state: Object.assign({ columnFilterFns,
+        columns: columnDefs, data, globalFilterFn: (_y = (_x = props.filterFns) === null || _x === void 0 ? void 0 : _x[globalFilterFn]) !== null && _y !== void 0 ? _y : (_z = props.filterFns) === null || _z === void 0 ? void 0 : _z.fuzzy, initialState, state: Object.assign({ columnFilterFns,
             columnOrder,
             density,
             draggingColumn,
@@ -2989,7 +3032,7 @@ const MRT_TableRoot = (props) => {
             tableHeadCellRefs,
             tablePaperRef,
             topToolbarRef,
-        }, setColumnFilterFns: (_y = props.onColumnFilterFnsChange) !== null && _y !== void 0 ? _y : setColumnFilterFns, setDensity: (_z = props.onDensityChange) !== null && _z !== void 0 ? _z : setDensity, setDraggingColumn: (_0 = props.onDraggingColumnChange) !== null && _0 !== void 0 ? _0 : setDraggingColumn, setDraggingRow: (_1 = props.onDraggingRowChange) !== null && _1 !== void 0 ? _1 : setDraggingRow, setEditingCell: (_2 = props.onEditingCellChange) !== null && _2 !== void 0 ? _2 : setEditingCell, setEditingRow: (_3 = props.onEditingRowChange) !== null && _3 !== void 0 ? _3 : setEditingRow, setGlobalFilterFn: (_4 = props.onGlobalFilterFnChange) !== null && _4 !== void 0 ? _4 : setGlobalFilterFn, setHoveredColumn: (_5 = props.onHoveredColumnChange) !== null && _5 !== void 0 ? _5 : setHoveredColumn, setHoveredRow: (_6 = props.onHoveredRowChange) !== null && _6 !== void 0 ? _6 : setHoveredRow, setIsFullScreen: (_7 = props.onIsFullScreenChange) !== null && _7 !== void 0 ? _7 : setIsFullScreen, setShowAlertBanner: (_8 = props.onShowAlertBannerChange) !== null && _8 !== void 0 ? _8 : setShowAlertBanner, setShowFilters: (_9 = props.onShowFiltersChange) !== null && _9 !== void 0 ? _9 : setShowFilters, setShowGlobalFilter: (_10 = props.onShowGlobalFilterChange) !== null && _10 !== void 0 ? _10 : setShowGlobalFilter, setShowToolbarDropZone: (_11 = props.onShowToolbarDropZoneChange) !== null && _11 !== void 0 ? _11 : setShowToolbarDropZone });
+        }, setColumnFilterFns: (_0 = props.onColumnFilterFnsChange) !== null && _0 !== void 0 ? _0 : setColumnFilterFns, setDensity: (_1 = props.onDensityChange) !== null && _1 !== void 0 ? _1 : setDensity, setDraggingColumn: (_2 = props.onDraggingColumnChange) !== null && _2 !== void 0 ? _2 : setDraggingColumn, setDraggingRow: (_3 = props.onDraggingRowChange) !== null && _3 !== void 0 ? _3 : setDraggingRow, setEditingCell: (_4 = props.onEditingCellChange) !== null && _4 !== void 0 ? _4 : setEditingCell, setEditingRow: (_5 = props.onEditingRowChange) !== null && _5 !== void 0 ? _5 : setEditingRow, setGlobalFilterFn: (_6 = props.onGlobalFilterFnChange) !== null && _6 !== void 0 ? _6 : setGlobalFilterFn, setHoveredColumn: (_7 = props.onHoveredColumnChange) !== null && _7 !== void 0 ? _7 : setHoveredColumn, setHoveredRow: (_8 = props.onHoveredRowChange) !== null && _8 !== void 0 ? _8 : setHoveredRow, setIsFullScreen: (_9 = props.onIsFullScreenChange) !== null && _9 !== void 0 ? _9 : setIsFullScreen, setShowAlertBanner: (_10 = props.onShowAlertBannerChange) !== null && _10 !== void 0 ? _10 : setShowAlertBanner, setShowFilters: (_11 = props.onShowFiltersChange) !== null && _11 !== void 0 ? _11 : setShowFilters, setShowGlobalFilter: (_12 = props.onShowGlobalFilterChange) !== null && _12 !== void 0 ? _12 : setShowGlobalFilter, setShowToolbarDropZone: (_13 = props.onShowToolbarDropZoneChange) !== null && _13 !== void 0 ? _13 : setShowToolbarDropZone });
     if (props.tableInstanceRef) {
         props.tableInstanceRef.current = table;
     }
@@ -3136,13 +3179,16 @@ const MaterialReactTable = (_a) => {
     return (React__default["default"].createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilterMatchHighlighting: enableFilterMatchHighlighting, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, 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: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
 };
 
+exports.MRT_AggregationFns = MRT_AggregationFns;
 exports.MRT_BottomToolbar = MRT_BottomToolbar;
 exports.MRT_CopyButton = MRT_CopyButton;
 exports.MRT_EditActionButtons = MRT_EditActionButtons;
+exports.MRT_FilterFns = MRT_FilterFns;
 exports.MRT_FilterOptionMenu = MRT_FilterOptionMenu;
 exports.MRT_FullScreenToggleButton = MRT_FullScreenToggleButton;
 exports.MRT_GlobalFilterTextField = MRT_GlobalFilterTextField;
 exports.MRT_ShowHideColumnsButton = MRT_ShowHideColumnsButton;
+exports.MRT_SortingFns = MRT_SortingFns;
 exports.MRT_TablePagination = MRT_TablePagination;
 exports.MRT_ToggleDensePaddingButton = MRT_ToggleDensePaddingButton;
 exports.MRT_ToggleFiltersButton = MRT_ToggleFiltersButton;