material-react-table 1.8.0 → 1.8.2

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/column.utils.ts

@@ -1,8 +1,4 @@
-import type {
-  ColumnOrderState,
-  GroupingState,
-  Row,
-} from '@tanstack/react-table';
+import type { Row } from '@tanstack/react-table';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
@@ -13,9 +9,11 @@ import type {
   MaterialReactTableProps,
   MRT_Column,
   MRT_ColumnDef,
+  MRT_ColumnOrderState,
   MRT_DefinedColumnDef,
   MRT_DisplayColumnIds,
   MRT_FilterOption,
+  MRT_GroupingState,
   MRT_Header,
   MRT_TableInstance,
 } from '.';
@@ -120,8 +118,8 @@ export const prepareColumns = <TData extends Record<string, any> = {}>({
 export const reorderColumn = <TData extends Record<string, any> = {}>(
   draggedColumn: MRT_Column<TData>,
   targetColumn: MRT_Column<TData>,
-  columnOrder: ColumnOrderState,
-): ColumnOrderState => {
+  columnOrder: MRT_ColumnOrderState,
+): MRT_ColumnOrderState => {
   if (draggedColumn.getCanPin()) {
     draggedColumn.pin(targetColumn.getIsPinned());
   }
@@ -135,7 +133,7 @@ export const reorderColumn = <TData extends Record<string, any> = {}>(
 
 export const showExpandColumn = <TData extends Record<string, any> = {}>(
   props: MaterialReactTableProps<TData>,
-  grouping?: GroupingState,
+  grouping?: MRT_GroupingState,
 ) =>
   !!(
     props.enableExpanding ||

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_TableHeadCellSortLabel.tsx

@@ -49,6 +49,10 @@ export const MRT_TableHeadCellSortLabel = ({
               : undefined,
         }}
         IconComponent={ArrowDownwardIcon}
+        onClick={(e) => {
+          e.stopPropagation();
+          header.column.getToggleSortingHandler()?.(e);
+        }}
       />
     </Tooltip>
   );

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/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;
   }