material-react-table 1.7.3 → 1.8.0

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

@@ -17,7 +17,6 @@ var DensitySmallIcon = require('@mui/icons-material/DensitySmall');
 var DragHandleIcon = require('@mui/icons-material/DragHandle');
 var DynamicFeedIcon = require('@mui/icons-material/DynamicFeed');
 var EditIcon = require('@mui/icons-material/Edit');
-var ExpandLessIcon = require('@mui/icons-material/ExpandLess');
 var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 var FilterAltIcon = require('@mui/icons-material/FilterAlt');
 var FilterListIcon = require('@mui/icons-material/FilterList');
@@ -93,7 +92,6 @@ var DensitySmallIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensitySmallI
 var DragHandleIcon__default = /*#__PURE__*/_interopDefaultLegacy(DragHandleIcon);
 var DynamicFeedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DynamicFeedIcon);
 var EditIcon__default = /*#__PURE__*/_interopDefaultLegacy(EditIcon);
-var ExpandLessIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandLessIcon);
 var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
 var FilterAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltIcon);
 var FilterListIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListIcon);
@@ -312,8 +310,8 @@ const getIsFirstRightPinnedColumn = (column) => {
 const getTotalRight = (table, column) => {
     return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 200);
 };
-const getCommonCellStyles = ({ column, table, tableCellProps, theme, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     return (Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
             ? styles.alpha(styles.lighten(theme.palette.background.default, 0.04), 0.97)
             : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
@@ -321,21 +319,21 @@ const getCommonCellStyles = ({ column, table, tableCellProps, theme, }) => {
             : getIsFirstRightPinnedColumn(column)
                 ? `4px 0 8px -6px ${styles.alpha(theme.palette.common.black, 0.2)} inset`
                 : undefined, display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell', flex: table.options.layoutMode === 'grid'
-            ? `var(--col-${parseCSSVarId(column.id)}-size) 0 auto`
+            ? `var(--col-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) 0 auto`
             : undefined, left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined, ml: table.options.enableColumnVirtualization &&
             column.getIsPinned() === 'left' &&
             column.getPinnedIndex() === 0
-            ? `-${column.getSize() * ((_b = (_a = table.getState().columnPinning.left) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 1)}px`
+            ? `-${column.getSize() * ((_c = (_b = table.getState().columnPinning.left) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 1)}px`
             : undefined, mr: table.options.enableColumnVirtualization &&
             column.getIsPinned() === 'right' &&
             column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
             ? `-${column.getSize() *
-                ((_d = (_c = table.getState().columnPinning.right) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 1) *
+                ((_e = (_d = table.getState().columnPinning.right) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 1) *
                 1.2}px`
-            : undefined, opacity: ((_e = table.getState().draggingColumn) === null || _e === void 0 ? void 0 : _e.id) === column.id ||
-            ((_f = table.getState().hoveredColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id
+            : undefined, opacity: ((_f = table.getState().draggingColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id ||
+            ((_g = table.getState().hoveredColumn) === null || _g === void 0 ? void 0 : _g.id) === column.id
             ? 0.5
             : 1, position: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
             ? 'sticky'
@@ -345,7 +343,7 @@ const getCommonCellStyles = ({ column, table, tableCellProps, theme, }) => {
             ? 'none'
             : `padding 150ms ease-in-out` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
         ? tableCellProps.sx(theme)
-        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { minWidth: `max(calc(var(--col-${parseCSSVarId(column.id)}-size) * 1px), ${(_g = column.columnDef.minSize) !== null && _g !== void 0 ? _g : 30}px)`, width: `calc(var(--col-${parseCSSVarId(column.id)}-size) * 1px)` }));
+        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { minWidth: `max(calc(var(--col-${parseCSSVarId((_h = header === null || header === void 0 ? void 0 : header.id) !== null && _h !== void 0 ? _h : column.id)}-size) * 1px), ${(_j = column.columnDef.minSize) !== null && _j !== void 0 ? _j : 30}px)`, width: `calc(var(--col-${parseCSSVarId((_k = header === null || header === void 0 ? void 0 : header.id) !== null && _k !== void 0 ? _k : column.id)}-size) * 1px)` }));
 };
 const MRT_DefaultColumn = {
     filterVariant: 'text',
@@ -367,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, {
@@ -465,7 +468,6 @@ const MRT_Default_Icons = {
     DragHandleIcon: DragHandleIcon__default["default"],
     DynamicFeedIcon: DynamicFeedIcon__default["default"],
     EditIcon: EditIcon__default["default"],
-    ExpandLessIcon: ExpandLessIcon__default["default"],
     ExpandMoreIcon: ExpandMoreIcon__default["default"],
     FilterAltIcon: FilterAltIcon__default["default"],
     FilterListIcon: FilterListIcon__default["default"],
@@ -500,7 +502,7 @@ const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFil
     Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
 
 const MRT_ExpandAllButton = ({ table }) => {
-    var _a;
+    var _a, _b;
     const { getIsAllRowsExpanded, getIsSomeRowsExpanded, getCanSomeRowsExpand, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
     const { density, isLoading } = getState();
     const iconButtonProps = muiExpandAllButtonProps instanceof Function
@@ -513,15 +515,14 @@ const MRT_ExpandAllButton = ({ table }) => {
         React__default["default"].createElement("span", null,
             React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
-                React__default["default"].createElement(KeyboardDoubleArrowDownIcon, { style: {
-                        transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
-                        transition: 'transform 150ms',
-                    } })))));
+                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }), (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (React__default["default"].createElement(KeyboardDoubleArrowDownIcon, { style: {
+                    transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
+                    transition: 'transform 150ms',
+                } }))))));
 };
 
 const MRT_ExpandButton = ({ row, table }) => {
-    var _a;
+    var _a, _b;
     const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = table;
     const { density } = getState();
     const iconButtonProps = muiExpandButtonProps instanceof Function
@@ -541,11 +542,10 @@ const MRT_ExpandButton = ({ row, table }) => {
         React__default["default"].createElement("span", null,
             React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
-                React__default["default"].createElement(ExpandMoreIcon, { style: {
-                        transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
-                        transition: 'transform 150ms',
-                    } })))));
+                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }), (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (React__default["default"].createElement(ExpandMoreIcon, { style: {
+                    transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
+                    transition: 'transform 150ms',
+                } }))))));
 };
 
 const mrtFilterOptions = (localization) => [
@@ -640,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 ||
@@ -651,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)) {
@@ -664,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 {
@@ -1044,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,
@@ -1115,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 },
@@ -1542,7 +1554,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
-            React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
+            React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85) translateX(-4px)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
                         opacity: 1,
                     } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
@@ -1893,10 +1905,8 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
 const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
     var _a;
     const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
-    const { density, showColumnFilters } = getState();
+    const { density } = getState();
     const { column } = header;
-    const { columnDef } = column;
-    const { columnDefType } = columnDef;
     return (React__default["default"].createElement(Box__default["default"], { onDoubleClick: () => {
             setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
             column.resetSize();
@@ -1918,7 +1928,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
         React__default["default"].createElement(Divider__default["default"], { flexItem: true, orientation: "vertical", sx: {
                 borderRadius: '2px',
                 borderWidth: '2px',
-                height: showColumnFilters && columnDefType === 'data' ? '3.5rem' : '1.5rem',
+                height: '24px',
                 touchAction: 'none',
                 transition: column.getIsResizing()
                     ? undefined
@@ -2036,6 +2046,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
                     ? 2
                     : 1 }, getCommonCellStyles({
             column,
+            header,
             table,
             tableCellProps,
             theme,
@@ -2111,7 +2122,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;
@@ -2129,6 +2140,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 }) }));
@@ -2158,18 +2170,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, }) => {
@@ -2253,6 +2284,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
         renderedCellValue = cell.renderValue();
     }
     if (enableFilterMatchHighlighting &&
+        columnDef.enableFilterMatchHighlighting !== false &&
         renderedCellValue &&
         allowedTypes.includes(typeof renderedCellValue) &&
         ((filterValue &&
@@ -2289,7 +2321,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
 };
 
 const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const theme = styles.useTheme();
     const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, density, isLoading, showSkeletons, } = getState();
@@ -2345,8 +2377,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' ||
@@ -2356,9 +2390,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;
@@ -2403,8 +2435,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`
@@ -2416,12 +2447,12 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
             theme,
             tableCellProps,
         })), draggingBorders)) }),
-        React__default["default"].createElement(React__default["default"].Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React__default["default"].createElement(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
+        React__default["default"].createElement(React__default["default"].Fragment, null, cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : isLoading || showSkeletons ? (React__default["default"].createElement(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
             rowNumberMode === 'static' &&
             column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React__default["default"].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, {
+                !row.getIsGrouped()) ? ((_c = columnDef.Cell) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
             cell,
             renderedCellValue: cell.renderValue(),
             column,
@@ -2431,8 +2462,8 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
             columnDef.enableClickToCopy !== false ? (React__default["default"].createElement(MRT_CopyButton, { cell: cell, table: table },
             React__default["default"].createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React__default["default"].createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))),
         cell.getIsGrouped() && !columnDef.GroupedCell && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            " (", (_b = row.subRows) === null || _b === void 0 ? void 0 :
-            _b.length,
+            " (", (_d = row.subRows) === null || _d === void 0 ? void 0 :
+            _d.length,
             ")"))));
 };
 const Memo_MRT_TableBodyCell = React.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
@@ -2710,8 +2741,10 @@ const MRT_Table = ({ table }) => {
         const headers = getFlatHeaders();
         const colSizes = {};
         for (let i = 0; i < headers.length; i++) {
-            const h = headers[i];
-            colSizes[`--col-${parseCSSVarId(h.column.id)}-size`] = h.getSize();
+            const header = headers[i];
+            const colSize = header.getSize();
+            colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+            colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
         }
         return colSizes;
     }, [columns, columnSizing, columnSizingInfo]);
@@ -2861,7 +2894,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({});
@@ -2902,18 +2935,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,
@@ -2936,6 +2969,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;
@@ -2951,7 +2986,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;
@@ -2965,11 +3000,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,
@@ -2993,7 +3028,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;
     }
@@ -3140,13 +3175,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;