material-react-table 2.11.2 → 2.12.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.11.2",
+  "version": "2.12.0",
   "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.",
@@ -65,26 +65,26 @@
     "@babel/preset-react": "^7.23.3",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@faker-js/faker": "^8.4.0",
-    "@mui/icons-material": "^5.15.7",
-    "@mui/material": "^5.15.7",
-    "@mui/x-date-pickers": "^6.19.3",
+    "@faker-js/faker": "^8.4.1",
+    "@mui/icons-material": "^5.15.10",
+    "@mui/material": "^5.15.10",
+    "@mui/x-date-pickers": "^6.19.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.0.2",
-    "@storybook/addon-a11y": "^7.6.12",
-    "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-interactions": "^7.6.12",
-    "@storybook/addon-links": "^7.6.12",
-    "@storybook/addon-storysource": "^7.6.12",
-    "@storybook/blocks": "^7.6.12",
-    "@storybook/react": "^7.6.12",
-    "@storybook/react-vite": "^7.6.12",
+    "@storybook/addon-a11y": "^7.6.16",
+    "@storybook/addon-essentials": "^7.6.16",
+    "@storybook/addon-interactions": "^7.6.16",
+    "@storybook/addon-links": "^7.6.16",
+    "@storybook/addon-storysource": "^7.6.16",
+    "@storybook/blocks": "^7.6.16",
+    "@storybook/react": "^7.6.16",
+    "@storybook/react-vite": "^7.6.16",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.11.16",
-    "@types/react": "^18.2.52",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.20.0",
+    "@types/node": "^20.11.19",
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
@@ -99,11 +99,11 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^11.0.2",
-    "storybook": "^7.6.12",
+    "storybook": "^7.6.16",
     "storybook-dark-mode": "^3.0.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12"
+    "vite": "^5.1.3"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",
@@ -111,13 +111,13 @@
     "@mui/icons-material": ">=5.11",
     "@mui/material": ">=5.13",
     "@mui/x-date-pickers": ">=6.15.0",
-    "react": ">=18.0",
-    "react-dom": ">=18.0"
+    "react": ">=17.0",
+    "react-dom": ">=17.0"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.11.8",
-    "@tanstack/react-table": "8.11.8",
-    "@tanstack/react-virtual": "3.0.4",
+    "@tanstack/react-table": "8.12.0",
+    "@tanstack/react-virtual": "3.1.1",
     "highlight-words": "1.2.2"
   }
 }

package/src/components/body/MRT_TableBodyCell.tsx

@@ -17,8 +17,7 @@ import {
   type MRT_TableInstance,
 } from '../../types';
 import { isCellEditable, openEditingCell } from '../../utils/cell.utils';
-import { getIsFirstColumn, getIsLastColumn } from '../../utils/column.utils';
-import { getCommonMRTCellStyles, getMRTTheme } from '../../utils/style.utils';
+import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
@@ -56,6 +55,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       enableColumnPinning,
       enableGrouping,
       layoutMode,
+      mrtTheme: { draggingBorderColor },
       muiSkeletonProps,
       muiTableBodyCellProps,
     },
@@ -93,8 +93,6 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     table,
   });
 
-  const { draggingBorderColor } = getMRTTheme(table, theme);
-
   const [skeletonWidth, setSkeletonWidth] = useState(100);
   useEffect(() => {
     if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
@@ -111,8 +109,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     const isHoveredColumn = hoveredColumn?.id === column.id;
     const isDraggingRow = draggingRow?.id === row.id;
     const isHoveredRow = hoveredRow?.id === row.id;
-    const isFirstColumn = getIsFirstColumn(column, table);
-    const isLastColumn = getIsLastColumn(column, table);
+    const isFirstColumn = column.getIsFirstColumn();
+    const isLastColumn = column.getIsLastColumn();
     const isLastRow = numRows && staticRowIndex === numRows - 1;
     const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
     const showResizeBorder =
@@ -212,6 +210,12 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     }
   };
 
+  const handleDragOver = (e: DragEvent) => {
+    if (columnDef.enableColumnOrdering !== false) {
+      e.preventDefault();
+    }
+  };
+
   const handleContextMenu = (e: MouseEvent<HTMLTableCellElement>) => {
     tableCellProps?.onContextMenu?.(e);
     if (isRightClickable) {
@@ -230,6 +234,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       onContextMenu={handleContextMenu}
       onDoubleClick={handleDoubleClick}
       onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
       sx={(theme) => ({
         '&:hover': {
           outline:

package/src/components/body/MRT_TableBodyCellValue.tsx

@@ -5,7 +5,6 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
 import highlightWords from 'highlight-words';
 
 const allowedTypes = ['string', 'number'];
@@ -27,7 +26,10 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
 }: MRT_TableBodyCellValueProps<TData>) => {
   const {
     getState,
-    options: { enableFilterMatchHighlighting },
+    options: {
+      enableFilterMatchHighlighting,
+      mrtTheme: { matchHighlightColor },
+    },
   } = table;
   const { column, row } = cell;
   const { columnDef } = column;
@@ -88,8 +90,7 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
               sx={
                 match
                   ? {
-                      backgroundColor: (theme) =>
-                        getMRTTheme(table, theme).matchHighlightColor,
+                      backgroundColor: matchHighlightColor,
                       borderRadius: '2px',
                       color: (theme) =>
                         theme.palette.mode === 'dark'

package/src/components/body/MRT_TableBodyRow.tsx

@@ -23,7 +23,6 @@ import { getIsRowSelected } from '../../utils/row.utils';
 import {
   commonCellBeforeAfterStyles,
   getCommonPinnedCellStyles,
-  getMRTTheme,
 } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
@@ -61,6 +60,11 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
       enableStickyHeader,
       layoutMode,
       memoMode,
+      mrtTheme: {
+        baseBackgroundColor,
+        pinnedRowBackgroundColor,
+        selectedRowBackgroundColor,
+      },
       muiTableBodyRowProps,
       renderDetailPanel,
       rowPinningDisplayMode,
@@ -136,13 +140,11 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     }
   };
 
-  const rowRef = useRef<HTMLTableRowElement | null>(null);
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+  };
 
-  const {
-    baseBackgroundColor,
-    pinnedRowBackgroundColor,
-    selectedRowBackgroundColor,
-  } = getMRTTheme(table, theme);
+  const rowRef = useRef<HTMLTableRowElement | null>(null);
 
   const cellHighlightColor = isRowSelected
     ? selectedRowBackgroundColor
@@ -166,6 +168,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         data-pinned={!!isRowPinned || undefined}
         data-selected={isRowSelected || undefined}
         onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
         ref={(node: HTMLTableRowElement) => {
           if (node) {
             rowRef.current = node;

package/src/components/body/MRT_TableDetailPanel.tsx

@@ -9,7 +9,6 @@ import {
   type MRT_TableInstance,
   type MRT_VirtualItem,
 } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_TableDetailPanelProps<TData extends MRT_RowData>
@@ -35,8 +34,8 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
     getState,
     getVisibleLeafColumns,
     options: {
-      enableRowVirtualization,
       layoutMode,
+      mrtTheme: { baseBackgroundColor },
       muiDetailPanelProps,
       muiTableBodyRowProps,
       renderDetailPanel,
@@ -89,20 +88,16 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
         colSpan={getVisibleLeafColumns().length}
         {...tableCellProps}
         sx={(theme) => ({
-          backgroundColor: virtualRow
-            ? getMRTTheme(table, theme).baseBackgroundColor
-            : undefined,
+          backgroundColor: virtualRow ? baseBackgroundColor : undefined,
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
           py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0,
-          transition: !enableRowVirtualization
-            ? 'all 150ms ease-in-out'
-            : undefined,
+          transition: !virtualRow ? 'all 150ms ease-in-out' : undefined,
           width: `100%`,
           ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
         })}
       >
-        {enableRowVirtualization ? (
+        {virtualRow ? (
           row.getIsExpanded() && DetailPanel
         ) : (
           <Collapse in={row.getIsExpanded()} mountOnEnter unmountOnExit>

package/src/components/footer/MRT_TableFooterRow.tsx

@@ -8,7 +8,6 @@ import {
   type MRT_TableInstance,
   type MRT_VirtualItem,
 } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_TableFooterRowProps<TData extends MRT_RowData>
@@ -25,7 +24,11 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableFooterRowProps<TData>) => {
   const {
-    options: { layoutMode, muiTableFooterRowProps },
+    options: {
+      layoutMode,
+      mrtTheme: { baseBackgroundColor },
+      muiTableFooterRowProps,
+    },
   } = table;
 
   const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
@@ -55,7 +58,7 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+        backgroundColor: baseBackgroundColor,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         position: 'relative',
         width: '100%',

package/src/components/head/MRT_TableHead.tsx

@@ -20,8 +20,6 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableHeadProps<TData>) => {
   const {
-    getHeaderGroups,
-    getSelectedRowModel,
     getState,
     options: {
       enableStickyHeader,
@@ -60,7 +58,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
       })}
     >
       {positionToolbarAlertBanner === 'head-overlay' &&
-      (showAlertBanner || getSelectedRowModel().rows.length > 0) ? (
+      (showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? (
         <tr
           style={{
             display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
@@ -77,14 +75,16 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
           </th>
         </tr>
       ) : (
-        getHeaderGroups().map((headerGroup) => (
-          <MRT_TableHeadRow
-            columnVirtualizer={columnVirtualizer}
-            headerGroup={headerGroup as any}
-            key={headerGroup.id}
-            table={table}
-          />
-        ))
+        table
+          .getHeaderGroups()
+          .map((headerGroup) => (
+            <MRT_TableHeadRow
+              columnVirtualizer={columnVirtualizer}
+              headerGroup={headerGroup as any}
+              key={headerGroup.id}
+              table={table}
+            />
+          ))
       )}
     </TableHead>
   );

package/src/components/head/MRT_TableHeadCell.tsx

@@ -15,7 +15,7 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { getCommonMRTCellStyles, getMRTTheme } from '../../utils/style.utils';
+import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_TableHeadCellProps<TData extends MRT_RowData>
@@ -47,6 +47,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       enableGrouping,
       enableMultiSort,
       layoutMode,
+      mrtTheme: { draggingBorderColor },
       muiTableHeadCellProps,
     },
     refs: { tableHeadCellRefs },
@@ -73,8 +74,6 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     ...rest,
   };
 
-  const { draggingBorderColor } = getMRTTheme(table, theme);
-
   const isColumnPinned =
     enableColumnPinning &&
     columnDef.columnDefType !== 'group' &&
@@ -142,6 +141,12 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     }
   };
 
+  const handleDragOver = (e: DragEvent) => {
+    if (columnDef.enableColumnOrdering !== false) {
+      e.preventDefault();
+    }
+  };
+
   const HeaderElement =
     parseFromValuesOrFunc(columnDef.Header, {
       column,
@@ -162,6 +167,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       data-index={staticColumnIndex}
       data-pinned={!!isColumnPinned || undefined}
       onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
       ref={(node: HTMLTableCellElement) => {
         if (node) {
           tableHeadCellRefs.current[column.id] = node;

package/src/components/head/MRT_TableHeadCellFilterContainer.tsx

@@ -4,6 +4,7 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import { getColumnFilterInfo } from '../../utils/column.utils';
 import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
 import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
@@ -28,6 +29,7 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
   const { showColumnFilters } = getState();
   const { column } = header;
   const { columnDef } = column;
+  const { isRangeFilter } = getColumnFilterInfo({ header, table });
 
   return (
     <Collapse
@@ -40,10 +42,7 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
         <MRT_FilterCheckbox column={column} table={table} />
       ) : columnDef.filterVariant === 'range-slider' ? (
         <MRT_FilterRangeSlider header={header} table={table} />
-      ) : columnDef.filterVariant?.includes('range') ||
-        ['between', 'betweenInclusive', 'inNumberRange'].includes(
-          columnDef._filterFn,
-        ) ? (
+      ) : isRangeFilter ? (
         <MRT_FilterRangeFields header={header} table={table} />
       ) : (
         <MRT_FilterTextField header={header} table={table} />

package/src/components/head/MRT_TableHeadCellFilterLabel.tsx

@@ -10,7 +10,11 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { parseFromValuesOrFunc } from '../../utils/utils';
+import {
+  getColumnFilterInfo,
+  useDropdownOptions,
+} from '../../utils/column.utils';
+import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_TableHeadCellFilterLabelProps<TData extends MRT_RowData>
   extends IconButtonProps {
@@ -35,20 +39,32 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
   const { column } = header;
   const { columnDef } = column;
 
-  const filterValue = column.getFilterValue();
+  const filterValue = column.getFilterValue() as [string, string] | string;
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
+  const {
+    currentFilterOption,
+    isMultiSelectFilter,
+    isRangeFilter,
+    isSelectFilter,
+  } = getColumnFilterInfo({ header, table });
+
+  const dropdownOptions = useDropdownOptions({ header, table });
+
+  const getSelectLabel = (index?: number) =>
+    getValueAndLabel(
+      dropdownOptions?.find(
+        (option) =>
+          getValueAndLabel(option).value ===
+          (index !== undefined ? filterValue[index] : filterValue),
+      ),
+    ).label;
+
   const isFilterActive =
     (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
     (!!filterValue && !Array.isArray(filterValue));
 
-  const isRangeFilter =
-    columnDef.filterVariant?.includes('range') ||
-    ['between', 'betweenInclusive', 'inNumberRange'].includes(
-      columnDef._filterFn,
-    );
-  const currentFilterOption = columnDef._filterFn;
   const filterTooltip =
     columnFilterDisplayMode === 'popover' && !isFilterActive
       ? localization.filterByColumn?.replace(
@@ -73,10 +89,16 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
             '{filterValue}',
             `"${
               Array.isArray(filterValue)
-                ? (filterValue as [string, string]).join(
-                    `" ${isRangeFilter ? localization.and : localization.or} "`,
-                  )
-                : (filterValue as string)
+                ? (filterValue as [string, string])
+                    .map((value, index) =>
+                      isMultiSelectFilter ? getSelectLabel(index) : value,
+                    )
+                    .join(
+                      `" ${isRangeFilter ? localization.and : localization.or} "`,
+                    )
+                : isSelectFilter
+                  ? getSelectLabel()
+                  : (filterValue as string)
             }"`,
           )
           .replace('" "', '');
@@ -126,31 +148,33 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
           </Tooltip>
         </Box>
       </Grow>
-      <Popover
-        anchorEl={anchorEl}
-        anchorOrigin={{
-          horizontal: 'center',
-          vertical: 'top',
-        }}
-        disableScrollLock
-        onClick={(event) => event.stopPropagation()}
-        onClose={(event) => {
-          //@ts-ignore
-          event.stopPropagation();
-          setAnchorEl(null);
-        }}
-        onKeyDown={(event) => event.key === 'Enter' && setAnchorEl(null)}
-        open={!!anchorEl}
-        slotProps={{ paper: { sx: { overflow: 'visible' } } }}
-        transformOrigin={{
-          horizontal: 'center',
-          vertical: 'bottom',
-        }}
-      >
-        <Box sx={{ p: '1rem' }}>
-          <MRT_TableHeadCellFilterContainer header={header} table={table} />
-        </Box>
-      </Popover>
+      {columnFilterDisplayMode === 'popover' && (
+        <Popover
+          anchorEl={anchorEl}
+          anchorOrigin={{
+            horizontal: 'center',
+            vertical: 'top',
+          }}
+          disableScrollLock
+          onClick={(event) => event.stopPropagation()}
+          onClose={(event) => {
+            //@ts-ignore
+            event.stopPropagation();
+            setAnchorEl(null);
+          }}
+          onKeyDown={(event) => event.key === 'Enter' && setAnchorEl(null)}
+          open={!!anchorEl}
+          slotProps={{ paper: { sx: { overflow: 'visible' } } }}
+          transformOrigin={{
+            horizontal: 'center',
+            vertical: 'bottom',
+          }}
+        >
+          <Box sx={{ p: '1rem' }}>
+            <MRT_TableHeadCellFilterContainer header={header} table={table} />
+          </Box>
+        </Popover>
+      )}
     </>
   );
 };

package/src/components/head/MRT_TableHeadRow.tsx

@@ -9,7 +9,6 @@ import {
   type MRT_TableInstance,
   type MRT_VirtualItem,
 } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_TableHeadRowProps<TData extends MRT_RowData>
@@ -26,7 +25,12 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableHeadRowProps<TData>) => {
   const {
-    options: { enableStickyHeader, layoutMode, muiTableHeadRowProps },
+    options: {
+      enableStickyHeader,
+      layoutMode,
+      mrtTheme: { baseBackgroundColor },
+      muiTableHeadRowProps,
+    },
   } = table;
 
   const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
@@ -44,7 +48,7 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+        backgroundColor: baseBackgroundColor,
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         position:

package/src/components/inputs/MRT_FilterRangeFields.tsx

@@ -28,8 +28,14 @@ export const MRT_FilterRangeFields = <TData extends MRT_RowData>({
         ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
       })}
     >
-      <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />
-      <MRT_FilterTextField header={header} rangeFilterIndex={1} table={table} />
+      {[0, 1].map((rangeFilterIndex) => (
+        <MRT_FilterTextField
+          header={header}
+          key={rangeFilterIndex}
+          rangeFilterIndex={rangeFilterIndex}
+          table={table}
+        />
+      ))}
     </Box>
   );
 };