material-react-table 1.8.1 → 1.8.3

package/src/body/MRT_TableBody.tsx

@@ -1,20 +1,19 @@
 import React, { memo, useMemo } from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import {
+  useVirtualizer,
+  VirtualItem,
+  Virtualizer,
+} from '@tanstack/react-virtual';
 import TableBody from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';
 import { Memo_MRT_TableBodyRow, MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
-import type {
-  MRT_Row,
-  MRT_TableInstance,
-  MRT_VirtualItem,
-  MRT_Virtualizer,
-} from '..';
+import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
-  columnVirtualizer?: MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+  columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   table: MRT_TableInstance;
-  virtualColumns?: MRT_VirtualItem[];
+  virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }
@@ -117,7 +116,7 @@ export const MRT_TableBody = ({
   ]);
 
   const rowVirtualizer:
-    | MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>
+    | Virtualizer<HTMLDivElement, HTMLTableRowElement>
     | undefined = enableRowVirtualization
     ? useVirtualizer({
         count: rows.length,
@@ -202,7 +201,7 @@ export const MRT_TableBody = ({
                 virtualPaddingLeft,
                 virtualPaddingRight,
                 virtualRow: rowVirtualizer
-                  ? (rowOrVirtualRow as MRT_VirtualItem)
+                  ? (rowOrVirtualRow as VirtualItem)
                   : undefined,
               };
               return memoMode === 'rows' ? (

package/src/body/MRT_TableBodyCell.tsx

@@ -19,7 +19,8 @@ import {
   getIsFirstColumn,
   getIsLastColumn,
 } from '../column.utils';
-import type { MRT_Cell, MRT_TableInstance, MRT_VirtualItem } from '..';
+import type { VirtualItem } from '@tanstack/react-virtual';
+import type { MRT_Cell, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
@@ -29,7 +30,7 @@ interface Props {
   rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance;
-  virtualCell?: MRT_VirtualItem;
+  virtualCell?: VirtualItem;
 }
 
 export const MRT_TableBodyCell = ({

package/src/body/MRT_TableBodyRow.tsx

@@ -3,25 +3,20 @@ import TableRow from '@mui/material/TableRow';
 import { darken, lighten } from '@mui/material/styles';
 import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
-import type {
-  MRT_Cell,
-  MRT_Row,
-  MRT_TableInstance,
-  MRT_VirtualItem,
-  MRT_Virtualizer,
-} from '..';
+import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
+import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
-  columnVirtualizer?: MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+  columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   measureElement?: (element: HTMLTableRowElement) => void;
   numRows: number;
   row: MRT_Row;
   rowIndex: number;
   table: MRT_TableInstance;
-  virtualColumns?: MRT_VirtualItem[];
+  virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
-  virtualRow?: MRT_VirtualItem;
+  virtualRow?: VirtualItem;
 }
 
 export const MRT_TableBodyRow = ({
@@ -108,9 +103,7 @@ export const MRT_TableBodyRow = ({
         ) : null}
         {(virtualColumns ?? row.getVisibleCells()).map((cellOrVirtualCell) => {
           const cell = columnVirtualizer
-            ? row.getVisibleCells()[
-                (cellOrVirtualCell as MRT_VirtualItem).index
-              ]
+            ? row.getVisibleCells()[(cellOrVirtualCell as VirtualItem).index]
             : (cellOrVirtualCell as MRT_Cell);
           const props = {
             cell,
@@ -122,7 +115,7 @@ export const MRT_TableBodyRow = ({
             rowRef,
             table,
             virtualCell: columnVirtualizer
-              ? (cellOrVirtualCell as MRT_VirtualItem)
+              ? (cellOrVirtualCell as VirtualItem)
               : undefined,
           };
           return memoMode === 'cells' &&

package/src/body/MRT_TableDetailPanel.tsx

@@ -3,13 +3,14 @@ import Collapse from '@mui/material/Collapse';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
-import type { MRT_Row, MRT_TableInstance, MRT_VirtualItem } from '..';
+import type { VirtualItem } from '@tanstack/react-virtual';
+import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   parentRowRef: React.RefObject<HTMLTableRowElement>;
   row: MRT_Row;
   table: MRT_TableInstance;
-  virtualRow?: MRT_VirtualItem;
+  virtualRow?: VirtualItem;
 }
 
 export const MRT_TableDetailPanel = ({

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -61,7 +61,7 @@ export const MRT_ToggleRowActionMenuButton = <
   return (
     <>
       {renderRowActions ? (
-        <>{renderRowActions({ cell, row, table })}</>
+        renderRowActions({ cell, row, table })
       ) : row.id === editingRow?.id && editingMode === 'row' ? (
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems &&

package/src/footer/MRT_TableFooter.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import TableFooter from '@mui/material/TableFooter';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
-import type { MRT_TableInstance, MRT_VirtualItem } from '..';
+import type { VirtualItem } from '@tanstack/react-virtual';
+import type { MRT_TableInstance } from '..';
 
 interface Props {
   table: MRT_TableInstance;
-  virtualColumns?: MRT_VirtualItem[];
+  virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }

package/src/footer/MRT_TableFooterRow.tsx

@@ -2,17 +2,13 @@ import React from 'react';
 import TableRow from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
-import type {
-  MRT_Header,
-  MRT_HeaderGroup,
-  MRT_TableInstance,
-  MRT_VirtualItem,
-} from '..';
+import { VirtualItem } from '@tanstack/react-virtual';
+import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
 interface Props {
   footerGroup: MRT_HeaderGroup;
   table: MRT_TableInstance;
-  virtualColumns?: MRT_VirtualItem[];
+  virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }

package/src/head/MRT_TableHead.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import TableHead from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import type { MRT_TableInstance, MRT_VirtualItem } from '..';
+import type { VirtualItem } from '@tanstack/react-virtual';
+import type { MRT_TableInstance } from '..';
 
 interface Props {
   table: MRT_TableInstance;
-  virtualColumns?: MRT_VirtualItem[];
+  virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }

package/src/head/MRT_TableHeadRow.tsx

@@ -2,17 +2,13 @@ import React from 'react';
 import TableRow from '@mui/material/TableRow';
 import { alpha, lighten } from '@mui/material/styles';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import type {
-  MRT_Header,
-  MRT_HeaderGroup,
-  MRT_TableInstance,
-  MRT_VirtualItem,
-} from '..';
+import type { VirtualItem } from '@tanstack/react-virtual';
+import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
 interface Props {
   headerGroup: MRT_HeaderGroup;
   table: MRT_TableInstance;
-  virtualColumns?: MRT_VirtualItem[];
+  virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }

package/src/inputs/MRT_EditCellTextField.tsx

@@ -116,33 +116,34 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
       onChange={handleChange}
       onKeyDown={handleEnterKeyDown}
     >
-      {columnDef?.editSelectOptions?.map(
-        (option: string | { text: string; value: string }) => {
-          let value: string;
-          let text: string;
-          if (typeof option !== 'object') {
-            value = option;
-            text = option;
-          } else {
-            value = option.value;
-            text = option.text;
-          }
-          return (
-            <MenuItem
-              key={value}
-              sx={{
-                display: 'flex',
-                m: 0,
-                alignItems: 'center',
-                gap: '0.5rem',
-              }}
-              value={value}
-            >
-              {text}
-            </MenuItem>
-          );
-        },
-      )}
+      {textFieldProps.children ??
+        columnDef?.editSelectOptions?.map(
+          (option: string | { text: string; value: string }) => {
+            let value: string;
+            let text: string;
+            if (typeof option !== 'object') {
+              value = option;
+              text = option;
+            } else {
+              value = option.value;
+              text = option.text;
+            }
+            return (
+              <MenuItem
+                key={value}
+                sx={{
+                  display: 'flex',
+                  m: 0,
+                  alignItems: 'center',
+                  gap: '0.5rem',
+                }}
+                value={value}
+              >
+                {text}
+              </MenuItem>
+            );
+          },
+        )}
     </TextField>
   );
 };

package/src/inputs/MRT_FilterTextField.tsx

@@ -349,41 +349,42 @@ export const MRT_FilterTextField = ({
             <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
           </MenuItem>
         )}
-        {columnDef?.filterSelectOptions?.map(
-          (option: string | { text: string; value: string }) => {
-            let value: string;
-            let text: string;
-            if (typeof option !== 'object') {
-              value = option;
-              text = option;
-            } else {
-              value = option.value;
-              text = option.text;
-            }
-            return (
-              <MenuItem
-                key={value}
-                sx={{
-                  display: 'flex',
-                  m: 0,
-                  alignItems: 'center',
-                  gap: '0.5rem',
-                }}
-                value={value}
-              >
-                {isMultiSelectFilter && (
-                  <Checkbox
-                    checked={(
-                      (column.getFilterValue() ?? []) as string[]
-                    ).includes(value)}
-                    sx={{ mr: '0.5rem' }}
-                  />
-                )}
-                {text}
-              </MenuItem>
-            );
-          },
-        )}
+        {textFieldProps.children ??
+          columnDef?.filterSelectOptions?.map(
+            (option: string | { text: string; value: string }) => {
+              let value: string;
+              let text: string;
+              if (typeof option !== 'object') {
+                value = option;
+                text = option;
+              } else {
+                value = option.value;
+                text = option.text;
+              }
+              return (
+                <MenuItem
+                  key={value}
+                  sx={{
+                    display: 'flex',
+                    m: 0,
+                    alignItems: 'center',
+                    gap: '0.5rem',
+                  }}
+                  value={value}
+                >
+                  {isMultiSelectFilter && (
+                    <Checkbox
+                      checked={(
+                        (column.getFilterValue() ?? []) as string[]
+                      ).includes(value)}
+                      sx={{ mr: '0.5rem' }}
+                    />
+                  )}
+                  {text}
+                </MenuItem>
+              );
+            },
+          )}
       </TextField>
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -165,7 +165,10 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
           option as string,
         )
       ) {
-        if ((currentFilterValue as Array<any>)?.length) {
+        if (
+          currentFilterValue instanceof String ||
+          (currentFilterValue as Array<any>)?.length
+        ) {
           column.setFilterValue([]);
           setFilterValue?.([]);
         }
@@ -175,8 +178,10 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
           option as MRT_FilterOption,
         )
       ) {
-        column.setFilterValue(['', '']);
-        setFilterValue?.('');
+        if (!(currentFilterValue as Array<any>)?.every((v) => v === '')) {
+          column.setFilterValue(['', '']);
+          setFilterValue?.('');
+        }
       } else {
         if (
           !['', undefined].includes(currentFilterValue as string | undefined)

package/src/table/MRT_Table.tsx

@@ -3,13 +3,14 @@ import {
   defaultRangeExtractor,
   Range,
   useVirtualizer,
+  Virtualizer,
 } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { Memo_MRT_TableBody, MRT_TableBody } from '../body/MRT_TableBody';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { parseCSSVarId } from '../column.utils';
-import type { MRT_TableInstance, MRT_Virtualizer } from '..';
+import type { MRT_TableInstance } from '..';
 
 interface Props {
   table: MRT_TableInstance;
@@ -63,7 +64,7 @@ export const MRT_Table = ({ table }: Props) => {
       colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
     }
     return colSizes;
-  }, [columns, columnSizing, columnSizingInfo]);
+  }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
 
   //get first 16 column widths and average them
   const averageColumnWidth = useMemo(() => {
@@ -94,7 +95,7 @@ export const MRT_Table = ({ table }: Props) => {
   );
 
   const columnVirtualizer:
-    | MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>
+    | Virtualizer<HTMLDivElement, HTMLTableCellElement>
     | undefined = enableColumnVirtualization
     ? useVirtualizer({
         count: table.getVisibleLeafColumns().length,

package/src/table/MRT_TableRoot.tsx

@@ -332,6 +332,12 @@ export const MRT_TableRoot: any = <TData extends Record<string, any> = {}>(
       props.onShowToolbarDropZoneChange ?? setShowToolbarDropZone,
   } as MRT_TableInstance<TData>;
 
+  if (props.tableFeatures) {
+    props.tableFeatures.forEach((feature) => {
+      Object.assign(table, feature(table));
+    });
+  }
+
   if (props.tableInstanceRef) {
     props.tableInstanceRef.current = table;
   }