material-react-table 0.40.4 → 0.40.7

package/dist/index.d.ts

@@ -408,12 +408,17 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
         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;
 };
 declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
@@ -498,7 +503,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     enableTableHead?: boolean;
     enableToolbarInternalActions?: boolean;
     enableTopToolbar?: boolean;
-    enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
+    globalFilterModeOptions?: (MRT_FilterOption | string)[] | null;
     expandRowsFn?: (dataRow: TData) => TData[];
     icons?: Partial<MRT_Icons>;
     initialState?: Partial<MRT_TableState<TData>>;
@@ -664,12 +669,17 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.40.4",
+  "version": "0.40.7",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -58,7 +58,7 @@
     "@mui/material": "^5.10.2",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.4",
+    "@rollup/plugin-typescript": "^8.4.0",
     "@size-limit/preset-small-lib": "^8.0.1",
     "@storybook/addon-a11y": "^6.5.10",
     "@storybook/addon-actions": "^6.5.10",
@@ -71,7 +71,7 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.22.0",
+    "eslint": "^8.23.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "prettier": "^2.7.1",
@@ -84,7 +84,7 @@
     "size-limit": "^8.0.1",
     "storybook-dark-mode": "^1.1.0",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
+    "typescript": "^4.8.2"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",

package/src/MaterialReactTable.tsx

@@ -362,6 +362,15 @@ export 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,
@@ -372,7 +381,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
     internalFilterOptions: MRT_InternalFilterOption[];
     onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
     table: MRT_TableInstance<TData>;
-  }) => ReactNode;
+  }) => ReactNode[];
   sortingFn?: MRT_SortingFn;
 };
 
@@ -512,7 +521,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     enableTableHead?: boolean;
     enableToolbarInternalActions?: boolean;
     enableTopToolbar?: boolean;
-    enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
+    globalFilterModeOptions?: (MRT_FilterOption | string)[] | null;
     expandRowsFn?: (dataRow: TData) => TData[];
     icons?: Partial<MRT_Icons>;
     initialState?: Partial<MRT_TableState<TData>>;
@@ -786,6 +795,15 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     }: {
       table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderColumnActionsMenuItems?: ({
+      column,
+      closeMenu,
+      table,
+    }: {
+      column: MRT_Column<TData>;
+      closeMenu: () => void;
+      table: MRT_TableInstance<TData>;
+    }) => ReactNode[];
     renderColumnFilterModeMenuItems?: ({
       column,
       internalFilterOptions,
@@ -796,7 +814,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       internalFilterOptions: MRT_InternalFilterOption[];
       onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
       table: MRT_TableInstance<TData>;
-    }) => ReactNode;
+    }) => ReactNode[];
     renderDetailPanel?: ({
       row,
       table,

package/src/body/MRT_TableBody.tsx

@@ -1,4 +1,4 @@
-import React, { FC, RefObject, useEffect, useMemo } from 'react';
+import React, { FC, RefObject, useMemo } from 'react';
 import { useVirtual } from 'react-virtual'; //stuck on v2 for now
 // import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
 import { TableBody } from '@mui/material';
@@ -20,9 +20,11 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
       enableGlobalFilterRankedResults,
       enablePagination,
       enableRowVirtualization,
+      manualFiltering,
+      manualSorting,
       muiTableBodyProps,
-      virtualizerProps,
       virtualizerInstanceRef,
+      virtualizerProps,
     },
   } = table;
   const { globalFilter, pagination, sorting } = getState();
@@ -41,6 +43,8 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
     if (
       enableGlobalFilterRankedResults &&
       globalFilter &&
+      !manualFiltering &&
+      !manualSorting &&
       !Object.values(sorting).some(Boolean)
     ) {
       const rankedRows = getPrePaginationRowModel().rows.sort((a, b) =>
@@ -72,11 +76,9 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
       })
     : ({} as any);
 
-  useEffect(() => {
-    if (virtualizerInstanceRef) {
-      virtualizerInstanceRef.current = virtualizer;
-    }
-  }, [virtualizer]);
+  if (virtualizerInstanceRef) {
+    virtualizerInstanceRef.current = virtualizer;
+  }
 
   // const virtualizer: Virtualizer = enableRowVirtualization
   //   ? useVirtualizer({

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -9,13 +9,11 @@ interface Props {
 
 export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
   const {
-    getState,
     options: {
       icons: { FilterAltIcon },
       localization,
     },
   } = table;
-  const { columnFilterFns } = getState();
   const { column } = header;
   const { columnDef } = column;
 
@@ -24,7 +22,7 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
     'betweenInclusive',
     'inNumberRange',
   ].includes(columnDef._filterFn);
-  const currentFilterOption = columnFilterFns?.[header.id];
+  const currentFilterOption = columnDef._filterFn;
   const filterTooltip = localization.filteringByColumn
     .replace('{column}', String(columnDef.header))
     .replace(

package/src/inputs/MRT_EditCellTextField.tsx

@@ -1,9 +1,4 @@
-import React, {
-  ChangeEvent,
-  FocusEvent,
-  KeyboardEvent,
-  useState,
-} from 'react';
+import React, { ChangeEvent, FocusEvent, KeyboardEvent, useState } from 'react';
 import { TextField, TextFieldProps } from '@mui/material';
 import type { MRT_Cell, MRT_TableInstance } from '..';
 

package/src/inputs/MRT_FilterTextField.tsx

@@ -12,7 +12,6 @@ import {
   debounce,
   IconButton,
   InputAdornment,
-  ListItemText,
   MenuItem,
   TextField,
   TextFieldProps,
@@ -323,7 +322,16 @@ export const MRT_FilterTextField: FC<Props> = ({
               text = option.text;
             }
             return (
-              <MenuItem key={value} value={value}>
+              <MenuItem
+                key={value}
+                sx={{
+                  display: 'flex',
+                  m: 0,
+                  alignItems: 'center',
+                  gap: '0.5rem',
+                }}
+                value={value}
+              >
                 {isMultiSelectFilter && (
                   <Checkbox
                     checked={(
@@ -332,7 +340,7 @@ export const MRT_FilterTextField: FC<Props> = ({
                     sx={{ mr: '0.5rem' }}
                   />
                 )}
-                <ListItemText>{text}</ListItemText>
+                {text}
               </MenuItem>
             );
           },

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -34,6 +34,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     toggleAllColumnsVisible,
     setColumnOrder,
     options: {
+      columnFilterModeOptions,
       enableColumnFilterModes,
       enableColumnFilters,
       enableColumnResizing,
@@ -41,7 +42,6 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       enableHiding,
       enablePinning,
       enableSorting,
-      columnFilterModeOptions,
       icons: {
         ArrowRightIcon,
         ClearAllIcon,
@@ -55,6 +55,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         VisibilityOffIcon,
       },
       localization,
+      renderColumnActionsMenuItems,
     },
     refs: { filterInputRefs },
     setShowFilters,
@@ -153,55 +154,67 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         dense: density === 'compact',
       }}
     >
-      {enableSorting &&
-        column.getCanSort() && [
-          <MenuItem
-            disabled={!column.getIsSorted()}
-            key={0}
-            onClick={handleClearSort}
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <ClearAllIcon />
-              </ListItemIcon>
-              {localization.clearSort}
-            </Box>
-          </MenuItem>,
-          <MenuItem
-            disabled={column.getIsSorted() === 'asc'}
-            key={1}
-            onClick={handleSortAsc}
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
-              </ListItemIcon>
-              {localization.sortByColumnAsc?.replace(
-                '{column}',
-                String(columnDef.header),
-              )}
-            </Box>
-          </MenuItem>,
-          <MenuItem
-            divider={enableColumnFilters || enableGrouping || enableHiding}
-            key={2}
-            disabled={column.getIsSorted() === 'desc'}
-            onClick={handleSortDesc}
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <SortIcon />
-              </ListItemIcon>
-              {localization.sortByColumnDesc?.replace(
-                '{column}',
-                String(columnDef.header),
-              )}
-            </Box>
-          </MenuItem>,
-        ]}
+      {columnDef.renderColumnActionsMenuItems?.({
+        closeMenu: () => setAnchorEl(null),
+        column,
+        table,
+      }) ??
+        renderColumnActionsMenuItems?.({
+          closeMenu: () => setAnchorEl(null),
+          column,
+          table,
+        }) ??
+        (enableSorting &&
+          column.getCanSort() && [
+            <MenuItem
+              disabled={!column.getIsSorted()}
+              key={0}
+              onClick={handleClearSort}
+              sx={commonMenuItemStyles}
+            >
+              <Box sx={commonListItemStyles}>
+                <ListItemIcon>
+                  <ClearAllIcon />
+                </ListItemIcon>
+                {localization.clearSort}
+              </Box>
+            </MenuItem>,
+            <MenuItem
+              disabled={column.getIsSorted() === 'asc'}
+              key={1}
+              onClick={handleSortAsc}
+              sx={commonMenuItemStyles}
+            >
+              <Box sx={commonListItemStyles}>
+                <ListItemIcon>
+                  <SortIcon
+                    style={{ transform: 'rotate(180deg) scaleX(-1)' }}
+                  />
+                </ListItemIcon>
+                {localization.sortByColumnAsc?.replace(
+                  '{column}',
+                  String(columnDef.header),
+                )}
+              </Box>
+            </MenuItem>,
+            <MenuItem
+              divider={enableColumnFilters || enableGrouping || enableHiding}
+              key={2}
+              disabled={column.getIsSorted() === 'desc'}
+              onClick={handleSortDesc}
+              sx={commonMenuItemStyles}
+            >
+              <Box sx={commonListItemStyles}>
+                <ListItemIcon>
+                  <SortIcon />
+                </ListItemIcon>
+                {localization.sortByColumnDesc?.replace(
+                  '{column}',
+                  String(columnDef.header),
+                )}
+              </Box>
+            </MenuItem>,
+          ])}
       {enableColumnFilters &&
         column.getCanFilter() &&
         [

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -115,8 +115,8 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
   const {
     getState,
     options: {
-      enabledGlobalFilterOptions,
       columnFilterModeOptions,
+      globalFilterModeOptions,
       localization,
       renderColumnFilterModeMenuItems,
       renderGlobalFilterModeMenuItems,
@@ -137,8 +137,8 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
         columnDef
           ? allowedColumnFilterOptions === undefined ||
             allowedColumnFilterOptions?.includes(filterOption.option)
-          : (!enabledGlobalFilterOptions ||
-              enabledGlobalFilterOptions.includes(filterOption.option)) &&
+          : (!globalFilterModeOptions ||
+              globalFilterModeOptions.includes(filterOption.option)) &&
             ['fuzzy', 'contains', 'startsWith'].includes(filterOption.option),
       ),
     [],

package/src/table/MRT_TableRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import {
   TableState,
   getCoreRowModel,
@@ -189,6 +189,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       props.displayColumnDefOptions,
       props.editingMode,
       props.enableColumnDragging,
+      props.enableColumnFilterModes,
       props.enableColumnOrdering,
       props.enableEditing,
       props.enableExpandAll,
@@ -303,11 +304,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
   } as MRT_TableInstance<TData>;
 
-  useEffect(() => {
-    if (props.tableInstanceRef) {
-      props.tableInstanceRef.current = table;
-    }
-  }, [table]);
+  if (props.tableInstanceRef) {
+    props.tableInstanceRef.current = table;
+  }
 
   return (
     <>