material-react-table 1.7.3 → 1.8.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.3",
+  "version": "1.8.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.",
@@ -34,7 +34,7 @@
   "size-limit": [
     {
       "path": "dist/cjs/index.js",
-      "limit": "50 KB"
+      "limit": "54 KB"
     },
     {
       "path": "dist/esm/material-react-table.esm.js",
@@ -46,7 +46,6 @@
   },
   "scripts": {
     "build": "rm -rf dist && rollup -c && size-limit",
-    "dev": "rm -rf dist && rollup -c -w",
     "lib:build": "rm -rf dist && rollup -c && size-limit",
     "lib:dev": "rm -rf dist && rollup -c -w",
     "lint": "eslint .",
@@ -58,17 +57,17 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.4",
+    "@mui/material": "^5.11.8",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@size-limit/preset-small-lib": "^8.1.0",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.26",
+    "@size-limit/preset-small-lib": "^8.1.2",
+    "@types/node": "^18.13.0",
+    "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
-    "eslint": "^8.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/parser": "^5.51.0",
+    "eslint": "^8.34.0",
     "eslint-plugin-mui-path-imports": "^0.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -77,9 +76,9 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-dts": "^5.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "size-limit": "^8.1.0",
-    "tslib": "^2.4.1",
-    "typescript": "^4.9.4"
+    "size-limit": "^8.1.2",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",
@@ -92,7 +91,7 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.7.6",
     "@tanstack/react-table": "8.7.9",
-    "@tanstack/react-virtual": "3.0.0-beta.30",
+    "@tanstack/react-virtual": "3.0.0-beta.47",
     "highlight-words": "1.2.1"
   }
 }

package/src/MaterialReactTable.tsx

@@ -29,18 +29,33 @@ import type {
   Cell,
   Column,
   ColumnDef,
+  ColumnFiltersState,
+  ColumnOrderState,
+  ColumnPinningState,
+  ColumnSizingInfoState,
+  ColumnSizingState,
   DeepKeys,
+  ExpandedState,
   FilterFn,
+  GroupingState,
   Header,
   HeaderGroup,
   OnChangeFn,
+  PaginationState,
   Row,
+  RowSelectionState,
   SortingFn,
+  SortingState,
   Table,
   TableOptions,
   TableState,
+  VisibilityState,
 } from '@tanstack/react-table';
-import type { VirtualizerOptions, Virtualizer } from '@tanstack/react-virtual';
+import type {
+  VirtualizerOptions,
+  Virtualizer,
+  VirtualItem,
+} from '@tanstack/react-virtual';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_DefaultColumn, MRT_DefaultDisplayColumn } from './column.utils';
 import { MRT_FilterFns } from './filterFns';
@@ -49,11 +64,30 @@ import { MRT_SortingFns } from './sortingFns';
 import { MRT_TableRoot } from './table/MRT_TableRoot';
 import { MRT_Localization_EN } from './_locales/en';
 
+export { MRT_AggregationFns, MRT_FilterFns, MRT_SortingFns };
+
 /**
  * Most of this file is just TypeScript types
  */
 
-export type DensityState = 'comfortable' | 'compact' | 'spacious';
+export type MRT_DensityState = 'comfortable' | 'compact' | 'spacious';
+
+export type {
+  ColumnFiltersState as MRT_ColumnFiltersState,
+  ColumnOrderState as MRT_ColumnOrderState,
+  ColumnPinningState as MRT_ColumnPinningState,
+  ColumnSizingInfoState as MRT_ColumnSizingInfoState,
+  ColumnSizingState as MRT_ColumnSizingState,
+  ExpandedState as MRT_ExpandedState,
+  GroupingState as MRT_GroupingState,
+  PaginationState as MRT_PaginationState,
+  RowSelectionState as MRT_RowSelectionState,
+  SortingState as MRT_SortingState,
+  VirtualItem as MRT_VirtualItem,
+  Virtualizer as MRT_Virtualizer,
+  VirtualizerOptions as MRT_VirtualizerOptions,
+  VisibilityState as MRT_VisibilityState,
+};
 
 type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
 
@@ -206,7 +240,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
   setColumnFilterFns: Dispatch<
     SetStateAction<{ [key: string]: MRT_FilterOption }>
   >;
-  setDensity: Dispatch<SetStateAction<DensityState>>;
+  setDensity: Dispatch<SetStateAction<MRT_DensityState>>;
   setDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
   setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
   setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
@@ -228,7 +262,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
 export type MRT_TableState<TData extends Record<string, any> = {}> =
   TableState & {
     columnFilterFns: Record<string, MRT_FilterOption>;
-    density: DensityState;
+    density: MRT_DensityState;
     draggingColumn: MRT_Column<TData> | null;
     draggingRow: MRT_Row<TData> | null;
     editingCell: MRT_Cell<TData> | null;
@@ -304,6 +338,12 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
         header: MRT_Header<TData>;
         table: MRT_TableInstance<TData>;
       }) => ReactNode);
+  PlaceholderCell?: (props: {
+    cell: MRT_Cell<TData>;
+    column: MRT_Column<TData>;
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+  }) => ReactNode;
   /**
    * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
    * Specify a function here to point to the correct property in the data object.
@@ -334,12 +374,15 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
     LiteralUnion<string & MRT_FilterOption>
   > | null;
   columns?: MRT_ColumnDef<TData>[];
+  editSelectOptions?: (string | { text: string; value: any })[];
+  editVariant?: 'text' | 'select';
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
   enableColumnDragging?: boolean;
   enableColumnFilterModes?: boolean;
   enableColumnOrdering?: boolean;
-  enableEditing?: boolean;
+  enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
+  enableFilterMatchHighlighting?: boolean;
   filterFn?: MRT_FilterFn<TData>;
   filterSelectOptions?: (string | { text: string; value: any })[];
   filterVariant?: 'text' | 'select' | 'multi-select' | 'range' | 'checkbox';
@@ -588,7 +631,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     enableColumnOrdering?: boolean;
     enableColumnVirtualization?: boolean;
     enableDensityToggle?: boolean;
-    enableEditing?: boolean;
+    enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
     enableExpandAll?: boolean;
     enableFilterMatchHighlighting?: boolean;
     enableFullScreenToggle?: boolean;
@@ -798,7 +841,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     muiTopToolbarProps?:
       | ToolbarProps
       | ((props: { table: MRT_TableInstance<TData> }) => ToolbarProps);
-    onDensityChange?: OnChangeFn<DensityState>;
+    onDensityChange?: OnChangeFn<MRT_DensityState>;
     onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;

package/src/body/MRT_TableBody.tsx

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

package/src/body/MRT_TableBodyCell.tsx

@@ -19,8 +19,7 @@ import {
   getIsFirstColumn,
   getIsLastColumn,
 } from '../column.utils';
-import type { VirtualItem } from '@tanstack/react-virtual';
-import type { MRT_Cell, MRT_TableInstance } from '..';
+import type { MRT_Cell, MRT_TableInstance, MRT_VirtualItem } from '..';
 
 interface Props {
   cell: MRT_Cell;
@@ -30,7 +29,7 @@ interface Props {
   rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance;
-  virtualCell?: VirtualItem;
+  virtualCell?: MRT_VirtualItem;
 }
 
 export const MRT_TableBodyCell = ({
@@ -153,8 +152,10 @@ export const MRT_TableBodyCell = ({
   }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
 
   const isEditable =
-    (enableEditing || columnDef.enableEditing) &&
-    columnDef.enableEditing !== false;
+    (enableEditing instanceof Function ? enableEditing(row) : enableEditing) &&
+    (columnDef.enableEditing instanceof Function
+      ? columnDef.enableEditing(row)
+      : columnDef.enableEditing) !== false;
 
   const isEditing =
     isEditable &&
@@ -166,11 +167,7 @@ export const MRT_TableBodyCell = ({
 
   const handleDoubleClick = (event: MouseEvent<HTMLTableCellElement>) => {
     tableCellProps?.onDoubleClick?.(event);
-    if (
-      (enableEditing || columnDef.enableEditing) &&
-      columnDef.enableEditing !== false &&
-      editingMode === 'cell'
-    ) {
+    if (isEditable && editingMode === 'cell') {
       setEditingCell(cell);
       queueMicrotask(() => {
         const textField = editInputRefs.current[column.id];
@@ -241,8 +238,7 @@ export const MRT_TableBodyCell = ({
         '&:hover': {
           backgroundColor:
             enableHover &&
-            enableEditing &&
-            columnDef.enableEditing !== false &&
+            isEditable &&
             ['table', 'cell'].includes(editingMode ?? '')
               ? theme.palette.mode === 'dark'
                 ? `${lighten(theme.palette.background.default, 0.2)} !important`
@@ -259,7 +255,9 @@ export const MRT_TableBodyCell = ({
       })}
     >
       <>
-        {cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (
+        {cell.getIsPlaceholder() ? (
+          columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
+        ) : isLoading || showSkeletons ? (
           <Skeleton
             animation="wave"
             height={20}

package/src/body/MRT_TableBodyCellValue.tsx

@@ -48,6 +48,7 @@ export const MRT_TableBodyCellValue = ({ cell, table }: Props) => {
 
   if (
     enableFilterMatchHighlighting &&
+    columnDef.enableFilterMatchHighlighting !== false &&
     renderedCellValue &&
     allowedTypes.includes(typeof renderedCellValue) &&
     ((filterValue &&

package/src/body/MRT_TableBodyRow.tsx

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

package/src/body/MRT_TableDetailPanel.tsx

@@ -3,14 +3,13 @@ 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 { VirtualItem } from '@tanstack/react-virtual';
-import type { MRT_Row, MRT_TableInstance } from '..';
+import type { MRT_Row, MRT_TableInstance, MRT_VirtualItem } from '..';
 
 interface Props {
   parentRowRef: React.RefObject<HTMLTableRowElement>;
   row: MRT_Row;
   table: MRT_TableInstance;
-  virtualRow?: VirtualItem;
+  virtualRow?: MRT_VirtualItem;
 }
 
 export const MRT_TableDetailPanel = ({

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -59,14 +59,16 @@ export const MRT_ExpandAllButton = ({ table }: Props) => {
           })}
           title={undefined}
         >
-          <KeyboardDoubleArrowDownIcon
-            style={{
-              transform: `rotate(${
-                isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0
-              }deg)`,
-              transition: 'transform 150ms',
-            }}
-          />
+          {iconButtonProps?.children ?? (
+            <KeyboardDoubleArrowDownIcon
+              style={{
+                transform: `rotate(${
+                  isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0
+                }deg)`,
+                transition: 'transform 150ms',
+              }}
+            />
+          )}
         </IconButton>
       </span>
     </Tooltip>

package/src/buttons/MRT_ExpandButton.tsx

@@ -61,14 +61,16 @@ export const MRT_ExpandButton = ({ row, table }: Props) => {
           })}
           title={undefined}
         >
-          <ExpandMoreIcon
-            style={{
-              transform: `rotate(${
-                !canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0
-              }deg)`,
-              transition: 'transform 150ms',
-            }}
-          />
+          {iconButtonProps?.children ?? (
+            <ExpandMoreIcon
+              style={{
+                transform: `rotate(${
+                  !canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0
+                }deg)`,
+                transition: 'transform 150ms',
+              }}
+            />
+          )}
         </IconButton>
       </span>
     </Tooltip>

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -64,7 +64,10 @@ export const MRT_ToggleRowActionMenuButton = <
         <>{renderRowActions({ cell, row, table })}</>
       ) : row.id === editingRow?.id && editingMode === 'row' ? (
         <MRT_EditActionButtons row={row} table={table} />
-      ) : !renderRowActionMenuItems && enableEditing ? (
+      ) : !renderRowActionMenuItems &&
+        (enableEditing instanceof Function
+          ? enableEditing(row)
+          : enableEditing) ? (
         <Tooltip placement="right" arrow title={localization.edit}>
           <IconButton
             aria-label={localization.edit}

package/src/column.utils.ts

@@ -16,6 +16,7 @@ import type {
   MRT_DefinedColumnDef,
   MRT_DisplayColumnIds,
   MRT_FilterOption,
+  MRT_Header,
   MRT_TableInstance,
 } from '.';
 
@@ -241,11 +242,13 @@ export const getTotalRight = (table: MRT_TableInstance, column: MRT_Column) => {
 
 export const getCommonCellStyles = ({
   column,
+  header,
   table,
   tableCellProps,
   theme,
 }: {
   column: MRT_Column;
+  header?: MRT_Header;
   table: MRT_TableInstance;
   tableCellProps: TableCellProps;
   theme: Theme;
@@ -263,7 +266,7 @@ export const getCommonCellStyles = ({
   display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell',
   flex:
     table.options.layoutMode === 'grid'
-      ? `var(--col-${parseCSSVarId(column.id)}-size) 0 auto`
+      ? `var(--col-${parseCSSVarId(header?.id ?? column.id)}-size) 0 auto`
       : undefined,
   left:
     column.getIsPinned() === 'left'
@@ -306,10 +309,12 @@ export const getCommonCellStyles = ({
   ...(tableCellProps?.sx instanceof Function
     ? tableCellProps.sx(theme)
     : (tableCellProps?.sx as any)),
-  minWidth: `max(calc(var(--col-${parseCSSVarId(column.id)}-size) * 1px), ${
-    column.columnDef.minSize ?? 30
-  }px)`,
-  width: `calc(var(--col-${parseCSSVarId(column.id)}-size) * 1px)`,
+  minWidth: `max(calc(var(--col-${parseCSSVarId(
+    header?.id ?? column.id,
+  )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
+  width: `calc(var(--col-${parseCSSVarId(
+    header?.id ?? column.id,
+  )}-size) * 1px)`,
 });
 
 export const MRT_DefaultColumn = {
@@ -335,4 +340,9 @@ export const MRT_DefaultDisplayColumn = {
 } as const;
 
 export const parseCSSVarId = (id: string) =>
-  id.replaceAll('.', '_').replaceAll(' ', '_').replaceAll('+', '_');
+  id
+    .replaceAll('.', '_')
+    .replaceAll(' ', '_')
+    .replaceAll('+', '_')
+    .replaceAll('(', '_')
+    .replaceAll(')', '_');

package/src/footer/MRT_TableFooter.tsx

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

package/src/footer/MRT_TableFooterRow.tsx

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

package/src/head/MRT_TableHead.tsx

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

package/src/head/MRT_TableHeadCell.tsx

@@ -165,6 +165,7 @@ export const MRT_TableHeadCell = ({ header, table }: Props) => {
             : 1,
         ...getCommonCellStyles({
           column,
+          header,
           table,
           tableCellProps,
           theme,

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -67,7 +67,7 @@ export const MRT_TableHeadCellColumnActionsButton = ({
             height: '2rem',
             m: '-8px -4px',
             opacity: 0.5,
-            transform: 'scale(0.85)',
+            transform: 'scale(0.85) translateX(-4px)',
             transition: 'opacity 150ms',
             width: '2rem',
             '&:hover': {

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -14,10 +14,8 @@ export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
     options: { columnResizeMode },
     setColumnSizingInfo,
   } = table;
-  const { density, showColumnFilters } = getState();
+  const { density } = getState();
   const { column } = header;
-  const { columnDef } = column;
-  const { columnDefType } = columnDef;
 
   return (
     <Box
@@ -54,8 +52,7 @@ export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
         sx={{
           borderRadius: '2px',
           borderWidth: '2px',
-          height:
-            showColumnFilters && columnDefType === 'data' ? '3.5rem' : '1.5rem',
+          height: '24px',
           touchAction: 'none',
           transition: column.getIsResizing()
             ? undefined

package/src/head/MRT_TableHeadRow.tsx

@@ -2,13 +2,17 @@ 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 { VirtualItem } from '@tanstack/react-virtual';
-import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
+import type {
+  MRT_Header,
+  MRT_HeaderGroup,
+  MRT_TableInstance,
+  MRT_VirtualItem,
+} from '..';
 
 interface Props {
   headerGroup: MRT_HeaderGroup;
   table: MRT_TableInstance;
-  virtualColumns?: VirtualItem[];
+  virtualColumns?: MRT_VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }

package/src/icons.ts

@@ -9,7 +9,6 @@ import DensitySmallIcon from '@mui/icons-material/DensitySmall';
 import DragHandleIcon from '@mui/icons-material/DragHandle';
 import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
 import EditIcon from '@mui/icons-material/Edit';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import FilterListIcon from '@mui/icons-material/FilterList';
@@ -41,7 +40,6 @@ export interface MRT_Icons {
   DragHandleIcon: any;
   DynamicFeedIcon: any;
   EditIcon: any;
-  ExpandLessIcon: any;
   ExpandMoreIcon: any;
   FilterAltIcon: any;
   FilterListIcon: any;
@@ -72,7 +70,6 @@ export const MRT_Default_Icons: MRT_Icons = {
   DragHandleIcon,
   DynamicFeedIcon,
   EditIcon,
-  ExpandLessIcon,
   ExpandMoreIcon,
   FilterAltIcon,
   FilterListIcon,