material-react-table 0.40.4 → 0.40.5

package/dist/esm/MaterialReactTable.d.ts

@@ -216,12 +216,17 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => TableCellProps);
+    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;
+    }) => ReactNode[];
     sortingFn?: MRT_SortingFn;
 };
 export declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
@@ -472,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

@@ -728,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();
@@ -794,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() &&
             [
@@ -824,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 })),
@@ -835,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() && [
@@ -868,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 }),
@@ -2127,7 +2134,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 })
@@ -2138,6 +2145,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) {
@@ -2158,11 +2167,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,
@@ -2469,11 +2476,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 })),