material-react-table 2.0.0-beta.2 → 2.0.0-beta.4

package/src/column.utils.ts

@@ -171,7 +171,6 @@ export const getLeadingDisplayColumnIds = <TData extends MRT_RowData>(
       'mrt-row-expand',
     props.enableRowSelection && 'mrt-row-select',
     props.enableRowNumbers && 'mrt-row-numbers',
-    props.layoutMode === 'grid-no-grow' && 'mrt-row-spacer',
   ].filter(Boolean) as MRT_DisplayColumnIds[];
 
 export const getTrailingDisplayColumnIds = <TData extends MRT_RowData>(
@@ -186,6 +185,7 @@ export const getTrailingDisplayColumnIds = <TData extends MRT_RowData>(
     props.positionExpandColumn === 'last' &&
       showExpandColumn(props) &&
       'mrt-row-expand',
+    props.layoutMode === 'grid-no-grow' && 'mrt-row-spacer',
   ].filter(Boolean) as MRT_DisplayColumnIds[];
 
 export const getDefaultColumnOrderIds = <TData extends MRT_RowData>(

package/src/footer/MRT_TableFooter.tsx

@@ -1,10 +1,10 @@
 import { type VirtualItem } from '@tanstack/react-virtual';
-import TableFooter from '@mui/material/TableFooter';
+import TableFooter, { type TableFooterProps } from '@mui/material/TableFooter';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableFooterProps {
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
@@ -16,6 +16,7 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     getFooterGroups,
@@ -25,9 +26,12 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
   } = table;
   const { isFullScreen } = getState();
 
-  const tableFooterProps = parseFromValuesOrFunc(muiTableFooterProps, {
-    table,
-  });
+  const tableFooterProps = {
+    ...parseFromValuesOrFunc(muiTableFooterProps, {
+      table,
+    }),
+    ...rest,
+  };
 
   const stickFooter =
     (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,4 +1,4 @@
-import TableCell from '@mui/material/TableCell';
+import TableCell, { type TableCellProps } from '@mui/material/TableCell';
 import { getCommonCellStyles, parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Header,
@@ -6,7 +6,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableCellProps {
   footer: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -14,6 +14,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   footer,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -24,12 +25,11 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
+  const args = { column, table };
   const tableCellProps = {
-    ...parseFromValuesOrFunc(muiTableFooterCellProps, { column, table }),
-    ...parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, {
-      column,
-      table,
-    }),
+    ...parseFromValuesOrFunc(muiTableFooterCellProps, args),
+    ...parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args),
+    ...rest,
   };
 
   return (
@@ -39,7 +39,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
       variant="head"
       {...tableCellProps}
       sx={(theme) => ({
-        display: layoutMode?.startsWith('grid') ? 'grid' : 'table-cell',
+        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
         fontWeight: 'bold',
         justifyContent: columnDefType === 'group' ? 'center' : undefined,
         p:
@@ -56,10 +56,11 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
           tableCellProps,
           theme,
         }),
+        ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
       })}
     >
-      <>
-        {footer.isPlaceholder
+      {tableCellProps.children ??
+        (footer.isPlaceholder
           ? null
           : parseFromValuesOrFunc(columnDef.Footer, {
               column,
@@ -67,8 +68,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
               table,
             }) ??
             columnDef.footer ??
-            null}
-      </>
+            null)}
     </TableCell>
   );
 };

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,5 +1,5 @@
 import { type VirtualItem } from '@tanstack/react-virtual';
-import TableRow from '@mui/material/TableRow';
+import TableRow, { type TableRowProps } from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import { parseFromValuesOrFunc } from '../column.utils';
@@ -10,7 +10,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableRowProps {
   footerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
@@ -24,6 +24,7 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     options: { layoutMode, muiTableFooterRowProps },
@@ -40,10 +41,13 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
   )
     return null;
 
-  const tableRowProps = parseFromValuesOrFunc(muiTableFooterRowProps, {
-    footerGroup,
-    table,
-  });
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(muiTableFooterRowProps, {
+      footerGroup,
+      table,
+    }),
+    ...rest,
+  };
 
   return (
     <TableRow

package/src/head/MRT_TableHead.tsx

@@ -1,11 +1,11 @@
 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_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableHeadProps {
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
@@ -17,6 +17,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     getHeaderGroups,
@@ -32,7 +33,10 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
   } = 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 MRT_RowData>({
           <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';
@@ -17,7 +17,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableCellProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -25,6 +25,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_TableHeadCell = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const theme = useTheme();
   const {
@@ -60,6 +61,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       column,
       table,
     }),
+    ...rest,
   };
 
   const showColumnActions =
@@ -186,97 +188,104 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
         ...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}
+                    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],
+                      }}
+                    />
+                  )}
+                  {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,5 +1,5 @@
 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';
@@ -9,7 +9,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -19,6 +19,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
 >({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -48,6 +49,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
       column,
       table,
     }),
+    ...rest,
   };
 
   return (
@@ -71,7 +73,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
             height: '2rem',
             m: '-4px',
             opacity: 0.3,
-            transform: `scale(0.85) ${
+            transform: `scale(0.8) ${
               columnFilterDisplayMode !== 'popover' ? 'translateX(-4px)' : ''
             }`,
             transition: 'opacity 150ms',

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -1,4 +1,4 @@
-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';
@@ -9,7 +9,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends CollapseProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -17,6 +17,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -31,6 +32,7 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
       in={showColumnFilters || columnFilterDisplayMode === 'popover'}
       mountOnEnter
       unmountOnExit
+      {...rest}
     >
       {columnDef.filterVariant === 'checkbox' ? (
         <MRT_FilterCheckbox column={column} table={table} />

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -1,17 +1,18 @@
 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 { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -19,6 +20,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -106,7 +108,8 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
                 event.stopPropagation();
               }}
               size="small"
-              sx={{
+              {...rest}
+              sx={(theme) => ({
                 height: '16px',
                 ml: '4px',
                 opacity: isFilterActive ? 1 : 0.3,
@@ -114,7 +117,8 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
                 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,4 +1,5 @@
 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 {
@@ -7,7 +8,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
   tableHeadCellRef: RefObject<HTMLTableCellElement>;
@@ -17,6 +18,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
   column,
   table,
   tableHeadCellRef,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -34,6 +36,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
       column,
       table,
     }),
+    ...rest
   };
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -1,12 +1,13 @@
 import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
+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 MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends DividerProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -14,6 +15,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -62,7 +64,7 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
         className="Mui-TableHeadCell-ResizeHandle-Divider"
         flexItem
         orientation="vertical"
-        sx={{
+        sx={(theme) => ({
           borderRadius: '2px',
           borderWidth: '2px',
           height: '24px',
@@ -72,7 +74,8 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
             : 'all 150ms ease-in-out',
           userSelect: 'none',
           zIndex: 4,
-        }}
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        })}
       />
     </Box>
   );