material-react-table 2.0.0-beta.0 → 2.0.0-beta.10

package/src/head/MRT_TableHead.tsx

@@ -1,22 +1,23 @@
 import { type VirtualItem } from '@tanstack/react-virtual';
-import TableHead from '@mui/material/TableHead';
+import TableHead, { type TableHeadProps } from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_ToolbarAlertBanner } from '../toolbar';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableHeadProps {
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableHead = <TData extends Record<string, any>>({
+export const MRT_TableHead = <TData extends MRT_RowData>({
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     getHeaderGroups,
@@ -32,7 +33,10 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
   } = table;
   const { isFullScreen, showAlertBanner } = getState();
 
-  const tableHeadProps = parseFromValuesOrFunc(muiTableHeadProps, { table });
+  const tableHeadProps = {
+    ...parseFromValuesOrFunc(muiTableHeadProps, { table }),
+    ...rest,
+  };
 
   const stickyHeader = enableStickyHeader || isFullScreen;
 
@@ -65,7 +69,7 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
           <th
             colSpan={table.getVisibleLeafColumns().length}
             style={{
-              display: layoutMode?.startsWith('grid') ? 'grid' : 'table-cell',
+              display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
               padding: 0,
             }}
           >

package/src/head/MRT_TableHeadCell.tsx

@@ -1,6 +1,6 @@
 import { type DragEvent, useMemo } from 'react';
 import Box from '@mui/material/Box';
-import TableCell from '@mui/material/TableCell';
+import TableCell, { type TableCellProps } from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
 import { type Theme } from '@mui/material/styles';
 import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
@@ -9,18 +9,23 @@ import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
 import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
-import { getCommonCellStyles } from '../column.utils';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import { getCommonMRTCellStyles, getMRTTheme } from '../style.utils';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableCellProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCell = <TData extends Record<string, any>>({
+export const MRT_TableHeadCell = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const theme = useTheme();
   const {
@@ -39,6 +44,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
     setHoveredColumn,
   } = table;
   const {
+    columnSizingInfo,
     density,
     draggingColumn,
     grouping,
@@ -55,8 +61,11 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
       column,
       table,
     }),
+    ...rest,
   };
 
+  const { draggingBorderColor } = getMRTTheme(table, theme);
+
   const showColumnActions =
     (enableColumnActions || columnDef.enableColumnActions) &&
     columnDef.enableColumnActions !== false;
@@ -78,23 +87,30 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
     return pl;
   }, [showColumnActions, showDragHandle]);
 
-  const draggingBorder = useMemo(
-    () =>
-      draggingColumn?.id === column.id
-        ? `1px dashed ${theme.palette.text.secondary}`
+  const draggingBorders = useMemo(() => {
+    const borderStyle =
+      columnSizingInfo.isResizingColumn === column.id &&
+      !header.subHeaders.length
+        ? `2px solid ${draggingBorderColor} !important`
+        : draggingColumn?.id === column.id
+        ? `1px dashed ${theme.palette.grey[500]}`
         : hoveredColumn?.id === column.id
-        ? `2px dashed ${theme.palette.primary.main}`
-        : undefined,
-    [draggingColumn, hoveredColumn],
-  );
+        ? `2px dashed ${draggingBorderColor}`
+        : undefined;
+
+    if (columnSizingInfo.isResizingColumn === column.id) {
+      return { borderRight: borderStyle };
+    }
+    const draggingBorders = borderStyle
+      ? {
+          borderLeft: borderStyle,
+          borderRight: borderStyle,
+          borderTop: borderStyle,
+        }
+      : undefined;
 
-  const draggingBorders = draggingBorder
-    ? {
-        borderLeft: draggingBorder,
-        borderRight: draggingBorder,
-        borderTop: draggingBorder,
-      }
-    : undefined;
+    return draggingBorders;
+  }, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
@@ -164,7 +180,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
             : column.getIsPinned() && columnDefType !== 'group'
             ? 2
             : 1,
-        ...getCommonCellStyles({
+        ...getCommonMRTCellStyles({
           column,
           header,
           table,
@@ -174,97 +190,100 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
         ...draggingBorders,
       })}
     >
-      {header.isPlaceholder ? null : (
-        <Box
-          className="Mui-TableHeadCell-Content"
-          sx={{
-            alignItems: 'center',
-            display: 'flex',
-            flexDirection:
-              tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
-            justifyContent:
-              columnDefType === 'group' || tableCellProps?.align === 'center'
-                ? 'center'
-                : column.getCanResize()
-                ? 'space-between'
-                : 'flex-start',
-            position: 'relative',
-            width: '100%',
-          }}
-        >
-          <Box
-            className="Mui-TableHeadCell-Content-Labels"
-            onClick={column.getToggleSortingHandler()}
-            sx={{
-              alignItems: 'center',
-              cursor:
-                column.getCanSort() && columnDefType !== 'group'
-                  ? 'pointer'
-                  : undefined,
-              display: 'flex',
-              flexDirection:
-                tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
-              overflow: columnDefType === 'data' ? 'hidden' : undefined,
-              pl:
-                tableCellProps?.align === 'center'
-                  ? `${headerPL}rem`
-                  : undefined,
-            }}
-          >
+      {header.isPlaceholder
+        ? null
+        : tableCellProps.children ?? (
             <Box
-              className="Mui-TableHeadCell-Content-Wrapper"
+              className="Mui-TableHeadCell-Content"
               sx={{
-                '&:hover': {
-                  textOverflow: 'clip',
-                },
-                minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
-                overflow: columnDefType === 'data' ? 'hidden' : undefined,
-                textOverflow: 'ellipsis',
-                whiteSpace:
-                  (columnDef.header?.length ?? 0) < 20 ? 'nowrap' : 'normal',
+                alignItems: 'center',
+                display: 'flex',
+                flexDirection:
+                  tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
+                justifyContent:
+                  columnDefType === 'group' ||
+                  tableCellProps?.align === 'center'
+                    ? 'center'
+                    : column.getCanResize()
+                    ? 'space-between'
+                    : 'flex-start',
+                position: 'relative',
+                width: '100%',
               }}
-              title={columnDefType === 'data' ? columnDef.header : undefined}
             >
-              {headerElement}
-            </Box>
-            {column.getCanFilter() && (
-              <MRT_TableHeadCellFilterLabel header={header} table={table} />
-            )}
-            {column.getCanSort() && (
-              <MRT_TableHeadCellSortLabel
-                header={header}
-                table={table}
-                tableCellProps={tableCellProps}
-              />
-            )}
-          </Box>
-          {columnDefType !== 'group' && (
-            <Box
-              className="Mui-TableHeadCell-Content-Actions"
-              sx={{ whiteSpace: 'nowrap' }}
-            >
-              {showDragHandle && (
-                <MRT_TableHeadCellGrabHandle
-                  column={column}
-                  table={table}
-                  tableHeadCellRef={{
-                    current: tableHeadCellRefs.current[column.id],
+              <Box
+                className="Mui-TableHeadCell-Content-Labels"
+                onClick={column.getToggleSortingHandler()}
+                sx={{
+                  alignItems: 'center',
+                  cursor:
+                    column.getCanSort() && columnDefType !== 'group'
+                      ? 'pointer'
+                      : undefined,
+                  display: 'flex',
+                  flexDirection:
+                    tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
+                  overflow: columnDefType === 'data' ? 'hidden' : undefined,
+                  pl:
+                    tableCellProps?.align === 'center'
+                      ? `${headerPL}rem`
+                      : undefined,
+                }}
+              >
+                <Box
+                  className="Mui-TableHeadCell-Content-Wrapper"
+                  sx={{
+                    '&:hover': {
+                      textOverflow: 'clip',
+                    },
+                    minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
+                    overflow: columnDefType === 'data' ? 'hidden' : undefined,
+                    textOverflow: 'ellipsis',
+                    whiteSpace:
+                      (columnDef.header?.length ?? 0) < 20
+                        ? 'nowrap'
+                        : 'normal',
                   }}
-                />
+                  title={
+                    columnDefType === 'data' ? columnDef.header : undefined
+                  }
+                >
+                  {headerElement}
+                </Box>
+                {column.getCanFilter() && (
+                  <MRT_TableHeadCellFilterLabel header={header} table={table} />
+                )}
+                {column.getCanSort() && (
+                  <MRT_TableHeadCellSortLabel header={header} table={table} />
+                )}
+              </Box>
+              {columnDefType !== 'group' && (
+                <Box
+                  className="Mui-TableHeadCell-Content-Actions"
+                  sx={{ whiteSpace: 'nowrap' }}
+                >
+                  {showDragHandle && (
+                    <MRT_TableHeadCellGrabHandle
+                      column={column}
+                      table={table}
+                      tableHeadCellRef={{
+                        current: tableHeadCellRefs.current[column.id],
+                      }}
+                    />
+                  )}
+                  {showColumnActions && (
+                    <MRT_TableHeadCellColumnActionsButton
+                      header={header}
+                      table={table}
+                    />
+                  )}
+                </Box>
               )}
-              {showColumnActions && (
-                <MRT_TableHeadCellColumnActionsButton
-                  header={header}
-                  table={table}
-                />
+              {column.getCanResize() && (
+                <MRT_TableHeadCellResizeHandle header={header} table={table} />
               )}
             </Box>
           )}
-          {column.getCanResize() && (
-            <MRT_TableHeadCellResizeHandle header={header} table={table} />
-          )}
-        </Box>
-      )}
       {columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (
         <MRT_TableHeadCellFilterContainer header={header} table={table} />
       )}

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -1,24 +1,28 @@
 import { type MouseEvent, useState } from 'react';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableHeadCellColumnActionsButton = <
-  TData extends Record<string, any>,
+  TData extends MRT_RowData,
 >({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
-      columnFilterDisplayMode,
       icons: { MoreVertIcon },
       localization,
       muiColumnActionsButtonProps,
@@ -44,12 +48,12 @@ export const MRT_TableHeadCellColumnActionsButton = <
       column,
       table,
     }),
+    ...rest,
   };
 
   return (
     <>
       <Tooltip
-        arrow
         enterDelay={1000}
         enterNextDelay={1000}
         placement="top"
@@ -65,18 +69,15 @@ export const MRT_TableHeadCellColumnActionsButton = <
               opacity: 1,
             },
             height: '2rem',
-            m: '-4px',
+            m: '-8px -4px',
             opacity: 0.3,
-            transform: `scale(0.85) ${
-              columnFilterDisplayMode !== 'popover' ? 'translateX(-4px)' : ''
-            }`,
-            transition: 'opacity 150ms',
+            transition: 'all 150ms',
             width: '2rem',
             ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}
         >
-          <MoreVertIcon />
+          <MoreVertIcon style={{ transform: 'scale(0.9)' }} />
         </IconButton>
       </Tooltip>
       {anchorEl && (

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -1,20 +1,23 @@
-import Collapse from '@mui/material/Collapse';
+import Collapse, { type CollapseProps } from '@mui/material/Collapse';
 import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
 import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends CollapseProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCellFilterContainer = <
-  TData extends Record<string, any>,
->({
+export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -29,6 +32,7 @@ export const MRT_TableHeadCellFilterContainer = <
       in={showColumnFilters || columnFilterDisplayMode === 'popover'}
       mountOnEnter
       unmountOnExit
+      {...rest}
     >
       {columnDef.filterVariant === 'checkbox' ? (
         <MRT_FilterCheckbox column={column} table={table} />

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -1,22 +1,26 @@
 import { type MouseEvent, useState } from 'react';
 import Box from '@mui/material/Box';
 import Grow from '@mui/material/Grow';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Popover from '@mui/material/Popover';
 import Tooltip from '@mui/material/Tooltip';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCellFilterLabel = <
-  TData extends Record<string, any> = {},
->({
+export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -88,7 +92,7 @@ export const MRT_TableHeadCellFilterLabel = <
         unmountOnExit
       >
         <Box component="span" sx={{ flex: '0 0' }}>
-          <Tooltip arrow placement="top" title={filterTooltip}>
+          <Tooltip placement="top" title={filterTooltip}>
             <IconButton
               disableRipple
               onClick={(event: MouseEvent<HTMLButtonElement>) => {
@@ -104,7 +108,8 @@ export const MRT_TableHeadCellFilterLabel = <
                 event.stopPropagation();
               }}
               size="small"
-              sx={{
+              {...rest}
+              sx={(theme) => ({
                 height: '16px',
                 ml: '4px',
                 opacity: isFilterActive ? 1 : 0.3,
@@ -112,7 +117,8 @@ export const MRT_TableHeadCellFilterLabel = <
                 transform: 'scale(0.75)',
                 transition: 'all 150ms ease-in-out',
                 width: '16px',
-              }}
+                ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+              })}
             >
               <FilterAltIcon />
             </IconButton>

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -1,18 +1,24 @@
 import { type DragEvent, type RefObject } from 'react';
+import { type IconButtonProps } from '@mui/material/IconButton';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { parseFromValuesOrFunc, reorderColumn } from '../column.utils';
-import { type MRT_Column, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
   tableHeadCellRef: RefObject<HTMLTableCellElement>;
 }
 
-export const MRT_TableHeadCellGrabHandle = <TData extends Record<string, any>>({
+export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
   column,
   table,
   tableHeadCellRef,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -30,6 +36,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends Record<string, any>>({
       column,
       table,
     }),
+    ...rest,
   };
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -1,17 +1,21 @@
 import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import Divider, { type DividerProps } from '@mui/material/Divider';
+import { parseFromValuesOrFunc } from '../column.utils';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends DividerProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCellResizeHandle = <
-  TData extends Record<string, any>,
->({
+export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -42,20 +46,25 @@ export const MRT_TableHeadCellResizeHandle = <
       sx={(theme) => ({
         '&:active > hr': {
           backgroundColor: theme.palette.info.main,
-          opacity: 1,
+          opacity: header.subHeaders.length ? 1 : 0,
         },
         cursor: 'col-resize',
-        mr: density === 'compact' ? '-0.75rem' : '-1rem',
+        mr:
+          density === 'compact'
+            ? '-12px'
+            : density === 'comfortable'
+            ? '-20px'
+            : '-28px',
         position: 'absolute',
         px: '4px',
-        right: '4px',
+        right: column.columnDef.columnDefType === 'display' ? '4px' : '0',
       })}
     >
       <Divider
         className="Mui-TableHeadCell-ResizeHandle-Divider"
         flexItem
         orientation="vertical"
-        sx={{
+        sx={(theme) => ({
           borderRadius: '2px',
           borderWidth: '2px',
           height: '24px',
@@ -65,7 +74,8 @@ export const MRT_TableHeadCellResizeHandle = <
             : 'all 150ms ease-in-out',
           userSelect: 'none',
           zIndex: 4,
-        }}
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        })}
       />
     </Box>
   );