material-react-table 0.40.3 → 0.40.6

package/dist/cjs/menus/MRT_FilterOptionMenu.d.ts

@@ -4,7 +4,7 @@ import { MRT_Localization } from '../localization';
 export declare const mrtFilterOptions: (localization: MRT_Localization) => MRT_InternalFilterOption[];
 interface Props<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;
-    header?: MRT_Header;
+    header?: MRT_Header<TData>;
     onSelect?: () => void;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     table: MRT_TableInstance<TData>;

package/dist/esm/MaterialReactTable.d.ts

@@ -216,9 +216,16 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => TableCellProps);
-    renderColumnFilterModeMenuItems?: ({ table, column, }: {
+    renderColumnActionsMenuItems?: ({ closeMenu, column, table, }: {
+        closeMenu: () => void;
+        column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
+    }) => ReactNode[];
+    renderColumnFilterModeMenuItems?: ({ column, internalFilterOptions, onSelectFilterMode, table, }: {
         column: MRT_Column<TData>;
+        internalFilterOptions: MRT_InternalFilterOption[];
+        onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
+        table: MRT_TableInstance<TData>;
     }) => ReactNode[];
     sortingFn?: MRT_SortingFn;
 };
@@ -470,12 +477,17 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     renderBottomToolbarCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderColumnActionsMenuItems?: ({ column, closeMenu, table, }: {
+        column: MRT_Column<TData>;
+        closeMenu: () => void;
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode[];
     renderColumnFilterModeMenuItems?: ({ column, internalFilterOptions, onSelectFilterMode, table, }: {
         column: MRT_Column<TData>;
         internalFilterOptions: MRT_InternalFilterOption[];
         onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
         table: MRT_TableInstance<TData>;
-    }) => ReactNode;
+    }) => ReactNode[];
     renderDetailPanel?: ({ row, table, }: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;

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

@@ -2,7 +2,7 @@ import React, { useMemo, useRef, useState, useCallback, Fragment, useEffect, use
 import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
-import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, alpha, useMediaQuery, Toolbar, lighten, ListItemText, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, DialogTitle, DialogContent, Stack, DialogActions } from '@mui/material';
+import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, alpha, useMediaQuery, Toolbar, lighten, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, DialogTitle, DialogContent, Stack, DialogActions } from '@mui/material';
 import { useVirtual } from 'react-virtual';
 
 /******************************************************************************
@@ -382,7 +382,7 @@ const mrtFilterOptions = (localization) => [
     },
 ];
 const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table, }) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { getState, options: { enabledGlobalFilterOptions, columnFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
     const { globalFilterFn, density } = getState();
     const { column } = header !== null && header !== void 0 ? header : {};
@@ -416,8 +416,13 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table,
     const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
     return (React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
             dense: density === 'compact',
-        } }, (_b = (header && column
-        ? renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
+        } }, (_d = (header && column && columnDef
+        ? (_c = (_b = columnDef.renderColumnFilterModeMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
+            column: column,
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+        })) !== null && _c !== void 0 ? _c : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
             column: column,
             internalFilterOptions,
             onSelectFilterMode: handleSelectFilterMode,
@@ -427,7 +432,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table,
             internalFilterOptions,
             onSelectFilterMode: handleSelectFilterMode,
             table,
-        }))) !== null && _b !== void 0 ? _b : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (React.createElement(MenuItem, { divider: divider, key: index, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
+        }))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (React.createElement(MenuItem, { divider: divider, key: index, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
             alignItems: 'center',
             display: 'flex',
             gap: '2ch',
@@ -723,8 +728,8 @@ const commonListItemStyles = {
     alignItems: 'center',
 };
 const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, columnFilterModeOptions, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, }, refs: { filterInputRefs }, setShowFilters, } = table;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setShowFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density } = getState();
@@ -789,25 +794,32 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
             !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
     return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
-        } },
-        enableSorting &&
-            column.getCanSort() && [
-            React.createElement(MenuItem, { disabled: !column.getIsSorted(), key: 0, onClick: handleClearSort, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(ClearAllIcon, null)),
-                    localization.clearSort)),
-            React.createElement(MenuItem, { disabled: column.getIsSorted() === 'asc', key: 1, onClick: handleSortAsc, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } })), (_b = localization.sortByColumnAsc) === null || _b === void 0 ? void 0 :
-                    _b.replace('{column}', String(columnDef.header)))),
-            React.createElement(MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, key: 2, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(SortIcon, null)), (_c = localization.sortByColumnDesc) === null || _c === void 0 ? void 0 :
-                    _c.replace('{column}', String(columnDef.header)))),
-        ],
+        } }, (_d = (_c = (_b = columnDef.renderColumnActionsMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
+        closeMenu: () => setAnchorEl(null),
+        column,
+        table,
+    })) !== null && _c !== void 0 ? _c : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
+        closeMenu: () => setAnchorEl(null),
+        column,
+        table,
+    })) !== null && _d !== void 0 ? _d : (enableSorting &&
+        column.getCanSort() && [
+        React.createElement(MenuItem, { disabled: !column.getIsSorted(), key: 0, onClick: handleClearSort, sx: commonMenuItemStyles },
+            React.createElement(Box, { sx: commonListItemStyles },
+                React.createElement(ListItemIcon, null,
+                    React.createElement(ClearAllIcon, null)),
+                localization.clearSort)),
+        React.createElement(MenuItem, { disabled: column.getIsSorted() === 'asc', key: 1, onClick: handleSortAsc, sx: commonMenuItemStyles },
+            React.createElement(Box, { sx: commonListItemStyles },
+                React.createElement(ListItemIcon, null,
+                    React.createElement(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } })), (_e = localization.sortByColumnAsc) === null || _e === void 0 ? void 0 :
+                _e.replace('{column}', String(columnDef.header)))),
+        React.createElement(MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, key: 2, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles },
+            React.createElement(Box, { sx: commonListItemStyles },
+                React.createElement(ListItemIcon, null,
+                    React.createElement(SortIcon, null)), (_f = localization.sortByColumnDesc) === null || _f === void 0 ? void 0 :
+                _f.replace('{column}', String(columnDef.header)))),
+    ]),
         enableColumnFilters &&
             column.getCanFilter() &&
             [
@@ -819,8 +831,8 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
                 React.createElement(MenuItem, { divider: enableGrouping || enableHiding, key: 1, onClick: handleFilterByColumn, sx: commonMenuItemStyles },
                     React.createElement(Box, { sx: commonListItemStyles },
                         React.createElement(ListItemIcon, null,
-                            React.createElement(FilterListIcon, null)), (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 :
-                        _d.replace('{column}', String(columnDef.header))),
+                            React.createElement(FilterListIcon, null)), (_g = localization.filterByColumn) === null || _g === void 0 ? void 0 :
+                        _g.replace('{column}', String(columnDef.header))),
                     showFilterModeSubMenu && (React.createElement(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 } },
                         React.createElement(ArrowRightIcon, null)))),
                 showFilterModeSubMenu && (React.createElement(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, key: 2, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table })),
@@ -830,8 +842,8 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
             React.createElement(MenuItem, { divider: enablePinning, key: 0, onClick: handleGroupByColumn, sx: commonMenuItemStyles },
                 React.createElement(Box, { sx: commonListItemStyles },
                     React.createElement(ListItemIcon, null,
-                        React.createElement(DynamicFeedIcon, null)), (_e = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _e === void 0 ? void 0 :
-                    _e.replace('{column}', String(columnDef.header)))),
+                        React.createElement(DynamicFeedIcon, null)), (_h = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _h === void 0 ? void 0 :
+                    _h.replace('{column}', String(columnDef.header)))),
         ],
         enablePinning &&
             column.getCanPin() && [
@@ -863,14 +875,14 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
             React.createElement(MenuItem, { disabled: columnDef.enableHiding === false, key: 0, onClick: handleHideColumn, sx: commonMenuItemStyles },
                 React.createElement(Box, { sx: commonListItemStyles },
                     React.createElement(ListItemIcon, null,
-                        React.createElement(VisibilityOffIcon, null)), (_f = localization.hideColumn) === null || _f === void 0 ? void 0 :
-                    _f.replace('{column}', String(columnDef.header)))),
+                        React.createElement(VisibilityOffIcon, null)), (_j = localization.hideColumn) === null || _j === void 0 ? void 0 :
+                    _j.replace('{column}', String(columnDef.header)))),
             React.createElement(MenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
                     .length, key: 1, onClick: handleShowAllColumns, sx: commonMenuItemStyles },
                 React.createElement(Box, { sx: commonListItemStyles },
                     React.createElement(ListItemIcon, null,
-                        React.createElement(ViewColumnIcon, null)), (_g = localization.showAllColumns) === null || _g === void 0 ? void 0 :
-                    _g.replace('{column}', String(columnDef.header))),
+                        React.createElement(ViewColumnIcon, null)), (_k = localization.showAllColumns) === null || _k === void 0 ? void 0 :
+                    _k.replace('{column}', String(columnDef.header))),
                 React.createElement(IconButton, { onClick: handleOpenShowHideColumnsMenu, onMouseEnter: handleOpenShowHideColumnsMenu, size: "small", sx: { p: 0 } },
                     React.createElement(ArrowRightIcon, null))),
             React.createElement(MRT_ShowHideColumnsMenu, { anchorEl: showHideColumnsMenuAnchorEl, isSubMenu: true, key: 2, setAnchorEl: setShowHideColumnsMenuAnchorEl, table: table }),
@@ -1491,9 +1503,14 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                     value = option.value;
                     text = option.text;
                 }
-                return (React.createElement(MenuItem, { key: value, value: value },
+                return (React.createElement(MenuItem, { key: value, sx: {
+                        display: 'flex',
+                        m: 0,
+                        alignItems: 'center',
+                        gap: '0.5rem',
+                    }, value: value },
                     isMultiSelectFilter && (React.createElement(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })),
-                    React.createElement(ListItemText, null, text)));
+                    text));
             })),
         React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table })));
 };
@@ -1514,8 +1531,7 @@ const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
 
 const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
     var _a, _b, _c;
-    const { getState, options: { icons: { FilterAltIcon }, localization, }, } = table;
-    const { columnFilterFns } = getState();
+    const { options: { icons: { FilterAltIcon }, localization, }, } = table;
     const { column } = header;
     const { columnDef } = column;
     const isRangeFilter = [
@@ -1523,7 +1539,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         'betweenInclusive',
         'inNumberRange',
     ].includes(columnDef._filterFn);
-    const currentFilterOption = columnFilterFns === null || columnFilterFns === void 0 ? void 0 : columnFilterFns[header.id];
+    const currentFilterOption = columnDef._filterFn;
     const filterTooltip = localization.filteringByColumn
         .replace('{column}', String(columnDef.header))
         .replace('{filterType}', 
@@ -2122,7 +2138,7 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
 };
 
 const MRT_TableBody = ({ table, tableContainerRef }) => {
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, muiTableBodyProps, virtualizerProps, virtualizerInstanceRef, }, } = table;
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, manualFiltering, manualSorting, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, } = table;
     const { globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
@@ -2133,6 +2149,8 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
     const rows = useMemo(() => {
         if (enableGlobalFilterRankedResults &&
             globalFilter &&
+            !manualFiltering &&
+            !manualSorting &&
             !Object.values(sorting).some(Boolean)) {
             const rankedRows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
             if (enablePagination) {
@@ -2153,11 +2171,9 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
     const virtualizer = enableRowVirtualization
         ? useVirtual(Object.assign({ size: rows.length, parentRef: tableContainerRef, overscan: 15 }, vProps))
         : {};
-    useEffect(() => {
-        if (virtualizerInstanceRef) {
-            virtualizerInstanceRef.current = virtualizer;
-        }
-    }, [virtualizer]);
+    if (virtualizerInstanceRef) {
+        virtualizerInstanceRef.current = virtualizer;
+    }
     // const virtualizer: Virtualizer = enableRowVirtualization
     //   ? useVirtualizer({
     //       count: rows.length,
@@ -2407,6 +2423,7 @@ const MRT_TableRoot = (props) => {
         props.displayColumnDefOptions,
         props.editingMode,
         props.enableColumnDragging,
+        props.enableColumnFilterModes,
         props.enableColumnOrdering,
         props.enableEditing,
         props.enableExpandAll,
@@ -2464,11 +2481,9 @@ const MRT_TableRoot = (props) => {
             tableContainerRef,
             topToolbarRef,
         }, setColumnFilterFns: (_w = props.onFilterFnsChange) !== null && _w !== void 0 ? _w : setColumnFilterFns, setDensity: (_x = props.onDensityChange) !== null && _x !== void 0 ? _x : setDensity, setDraggingColumn: (_y = props.onDraggingColumnChange) !== null && _y !== void 0 ? _y : setDraggingColumn, setDraggingRow: (_z = props.onDraggingRowChange) !== null && _z !== void 0 ? _z : setDraggingRow, setEditingCell: (_0 = props.onEditingCellChange) !== null && _0 !== void 0 ? _0 : setEditingCell, setEditingRow: (_1 = props.onEditingRowChange) !== null && _1 !== void 0 ? _1 : setEditingRow, setGlobalFilterFn: (_2 = props.onGlobalFilterFnChange) !== null && _2 !== void 0 ? _2 : setGlobalFilterFn, setHoveredColumn: (_3 = props.onHoveredColumnChange) !== null && _3 !== void 0 ? _3 : setHoveredColumn, setHoveredRow: (_4 = props.onHoveredRowChange) !== null && _4 !== void 0 ? _4 : setHoveredRow, setIsFullScreen: (_5 = props.onIsFullScreenChange) !== null && _5 !== void 0 ? _5 : setIsFullScreen, setShowAlertBanner: (_6 = props.onShowAlertBannerChange) !== null && _6 !== void 0 ? _6 : setShowAlertBanner, setShowFilters: (_7 = props.onShowFiltersChange) !== null && _7 !== void 0 ? _7 : setShowFilters, setShowGlobalFilter: (_8 = props.onShowGlobalFilterChange) !== null && _8 !== void 0 ? _8 : setShowGlobalFilter });
-    useEffect(() => {
-        if (props.tableInstanceRef) {
-            props.tableInstanceRef.current = table;
-        }
-    }, [table]);
+    if (props.tableInstanceRef) {
+        props.tableInstanceRef.current = table;
+    }
     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 })),