material-react-table 1.15.0 → 2.0.0-alpha.1

package/src/body/MRT_TableBodyRow.tsx

@@ -1,28 +1,37 @@
-import { type DragEvent, memo, useRef } from 'react';
+import { type DragEvent, memo, useRef, useMemo } from 'react';
 import TableRow from '@mui/material/TableRow';
-import { type Theme, alpha, darken, lighten } from '@mui/material/styles';
+import {
+  type Theme,
+  alpha,
+  darken,
+  lighten,
+  useTheme,
+} from '@mui/material/styles';
 import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 
-interface Props {
+interface Props<TData extends Record<string, any>> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   measureElement?: (element: HTMLTableRowElement) => void;
   numRows: number;
-  row: MRT_Row;
+  pinnedRowIds?: string[];
+  row: MRT_Row<TData>;
   rowIndex: number;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
   virtualRow?: VirtualItem;
 }
 
-export const MRT_TableBodyRow = ({
+export const MRT_TableBodyRow = <TData extends Record<string, any>>({
   columnVirtualizer,
   measureElement,
   numRows,
+  pinnedRowIds,
   row,
   rowIndex,
   table,
@@ -30,25 +39,71 @@ export const MRT_TableBodyRow = ({
   virtualPaddingLeft,
   virtualPaddingRight,
   virtualRow,
-}: Props) => {
+}: Props<TData>) => {
+  const theme = useTheme();
+
   const {
     getState,
     options: {
       enableRowOrdering,
+      enableRowPinning,
+      enableStickyFooter,
+      enableStickyHeader,
       layoutMode,
+      rowPinningDisplayMode,
       memoMode,
       muiTableBodyRowProps,
       renderDetailPanel,
     },
+    refs: { tableHeadRef, tableFooterRef },
     setHoveredRow,
   } = table;
-  const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } =
-    getState();
+  const {
+    density,
+    draggingColumn,
+    draggingRow,
+    editingCell,
+    editingRow,
+    hoveredRow,
+    isFullScreen,
+    rowPinning,
+  } = getState();
+
+  const isPinned = enableRowPinning && row.getIsPinned();
+
+  const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+    row,
+    staticRowIndex: rowIndex,
+    table,
+  });
+
+  const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
+    if (
+      !enableRowPinning ||
+      !rowPinningDisplayMode?.includes('sticky') ||
+      !pinnedRowIds ||
+      !row.getIsPinned()
+    )
+      return [];
+    return [
+      [...pinnedRowIds].reverse().indexOf(row.id),
+      pinnedRowIds.indexOf(row.id),
+    ];
+  }, [pinnedRowIds, rowPinning]);
+
+  const tableHeadHeight =
+    ((enableStickyHeader || isFullScreen) &&
+      tableHeadRef.current?.clientHeight) ||
+    0;
+  const tableFooterHeight =
+    (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
+
+  const sx = parseFromValuesOrFunc(tableRowProps?.sx, theme as any);
 
-  const tableRowProps =
-    muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ row, staticRowIndex: rowIndex, table })
-      : muiTableBodyRowProps;
+  const rowHeight =
+    // @ts-ignore
+    parseInt(tableRowProps?.style?.height ?? sx?.height, 10) ||
+    (density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69);
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableRowOrdering && draggingRow) {
@@ -72,15 +127,50 @@ export const MRT_TableBodyRow = ({
         }}
         {...tableRowProps}
         sx={(theme: Theme) => ({
-          backgroundColor: lighten(theme.palette.background.default, 0.06),
+          backgroundColor: `${lighten(
+            theme.palette.background.default,
+            0.06,
+          )} !important`,
           boxSizing: 'border-box',
+          bottom:
+            bottomPinnedIndex !== undefined && isPinned
+              ? `${
+                  bottomPinnedIndex * rowHeight +
+                  (enableStickyFooter ? tableFooterHeight - 1 : 0)
+                }px`
+              : undefined,
           display: layoutMode === 'grid' ? 'flex' : 'table-row',
-          opacity:
-            draggingRow?.id === row.id || hoveredRow?.id === row.id ? 0.5 : 1,
-          position: virtualRow ? 'absolute' : undefined,
+          opacity: isPinned
+            ? 0.98
+            : draggingRow?.id === row.id || hoveredRow?.id === row.id
+            ? 0.5
+            : 1,
+          position: virtualRow
+            ? 'absolute'
+            : rowPinningDisplayMode?.includes('sticky') && isPinned
+            ? 'sticky'
+            : undefined,
           transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
-          top: virtualRow ? 0 : undefined,
+          top: virtualRow
+            ? 0
+            : topPinnedIndex !== undefined && isPinned
+            ? `${
+                topPinnedIndex * rowHeight +
+                (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
+              }px`
+            : undefined,
           width: '100%',
+          zIndex:
+            rowPinningDisplayMode?.includes('sticky') && isPinned
+              ? 1
+              : undefined,
+          td: {
+            backgroundColor: row.getIsSelected()
+              ? alpha(theme.palette.primary.main, 0.2)
+              : isPinned
+              ? alpha(theme.palette.primary.main, 0.1)
+              : undefined,
+          },
           '&:hover td': {
             backgroundColor:
               tableRowProps?.hover !== false
@@ -91,9 +181,7 @@ export const MRT_TableBodyRow = ({
                   : `${darken(theme.palette.background.default, 0.05)}`
                 : undefined,
           },
-          ...(tableRowProps?.sx instanceof Function
-            ? tableRowProps.sx(theme)
-            : (tableRowProps?.sx as any)),
+          ...(sx as any),
         })}
         style={{
           transform: virtualRow
@@ -108,7 +196,7 @@ export const MRT_TableBodyRow = ({
         {(virtualColumns ?? row.getVisibleCells()).map((cellOrVirtualCell) => {
           const cell = columnVirtualizer
             ? row.getVisibleCells()[(cellOrVirtualCell as VirtualItem).index]
-            : (cellOrVirtualCell as MRT_Cell);
+            : (cellOrVirtualCell as MRT_Cell<TData>);
           const props = {
             cell,
             measureElement: columnVirtualizer?.measureElement,
@@ -151,4 +239,4 @@ export const MRT_TableBodyRow = ({
 export const Memo_MRT_TableBodyRow = memo(
   MRT_TableBodyRow,
   (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex,
-);
+) as typeof MRT_TableBodyRow;

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -1,23 +1,27 @@
 import { type DragEvent, type RefObject } from 'react';
-import { type MRT_Cell, type MRT_TableInstance } from '../types';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props {
-  cell: MRT_Cell;
+interface Props<TData extends Record<string, any>> {
+  row: MRT_Row<TData>;
   rowRef: RefObject<HTMLTableRowElement>;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table }: Props) => {
+export const MRT_TableBodyRowGrabHandle = <TData extends Record<string, any>>({
+  row,
+  rowRef,
+  table,
+}: Props<TData>) => {
   const {
-    options: { muiTableBodyRowDragHandleProps },
+    options: { muiRowDragHandleProps },
   } = table;
-  const { row } = cell;
 
-  const iconButtonProps =
-    muiTableBodyRowDragHandleProps instanceof Function
-      ? muiTableBodyRowDragHandleProps({ row, table })
-      : muiTableBodyRowDragHandleProps;
+  const iconButtonProps = parseFromValuesOrFunc(muiRowDragHandleProps, {
+    row,
+    table,
+  });
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
     iconButtonProps?.onDragStart?.(event);

package/src/body/MRT_TableBodyRowPinButton.tsx

@@ -0,0 +1,46 @@
+import Box from '@mui/material/Box';
+import { MRT_RowPinButton } from '../buttons/MRT_RowPinButton';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
+
+interface Props<TData extends Record<string, any>> {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableBodyRowPinButton = <TData extends Record<string, any>>({
+  row,
+  table,
+}: Props<TData>) => {
+  const {
+    getState,
+    options: { enableRowPinning, rowPinningDisplayMode },
+  } = table;
+  const { density } = getState();
+
+  const canPin = parseFromValuesOrFunc(enableRowPinning, row as any);
+
+  if (!canPin) return null;
+
+  if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: density === 'compact' ? 'row' : 'column',
+        }}
+      >
+        <MRT_RowPinButton row={row} table={table} pinningPosition="top" />
+        <MRT_RowPinButton row={row} table={table} pinningPosition="bottom" />
+      </Box>
+    );
+  }
+
+  return (
+    <MRT_RowPinButton
+      row={row}
+      table={table}
+      pinningPosition={rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top'}
+    />
+  );
+};

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,52 +1,50 @@
-import * as React from 'react';
+import { type RefObject } from 'react';
 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 { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
-interface Props {
-  parentRowRef: React.RefObject<HTMLTableRowElement>;
-  row: MRT_Row;
+interface Props<TData extends Record<string, any>> {
+  parentRowRef: RefObject<HTMLTableRowElement>;
+  row: MRT_Row<TData>;
   rowIndex: number;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
   virtualRow?: VirtualItem;
 }
 
-export const MRT_TableDetailPanel = ({
+export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
   parentRowRef,
   row,
   rowIndex,
   table,
   virtualRow,
-}: Props) => {
+}: Props<TData>) => {
   const {
     getVisibleLeafColumns,
     getState,
     options: {
       layoutMode,
       muiTableBodyRowProps,
-      muiTableDetailPanelProps,
+      muiDetailPanelProps,
       renderDetailPanel,
     },
   } = table;
   const { isLoading } = getState();
 
-  const tableRowProps =
-    muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({
-          isDetailPanel: true,
-          row,
-          staticRowIndex: rowIndex,
-          table,
-        })
-      : muiTableBodyRowProps;
+  const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+    isDetailPanel: true,
+    row,
+    staticRowIndex: rowIndex,
+    table,
+  });
 
-  const tableCellProps =
-    muiTableDetailPanelProps instanceof Function
-      ? muiTableDetailPanelProps({ row, table })
-      : muiTableDetailPanelProps;
+  const tableCellProps = parseFromValuesOrFunc(muiDetailPanelProps, {
+    row,
+    table,
+  });
 
   return (
     <TableRow
@@ -63,9 +61,7 @@ export const MRT_TableDetailPanel = ({
           : undefined,
         width: '100%',
         zIndex: virtualRow ? 2 : undefined,
-        ...(tableRowProps?.sx instanceof Function
-          ? tableRowProps.sx(theme)
-          : (tableRowProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}
     >
       <TableCell
@@ -82,9 +78,7 @@ export const MRT_TableDetailPanel = ({
           pt: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 150ms ease-in-out',
           width: `${table.getTotalSize()}px`,
-          ...(tableCellProps?.sx instanceof Function
-            ? tableCellProps.sx(theme)
-            : (tableCellProps?.sx as any)),
+          ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
         })}
       >
         {renderDetailPanel && (

package/src/body/index.ts

@@ -0,0 +1,7 @@
+export * from './MRT_TableBody';
+export * from './MRT_TableBodyCell';
+export * from './MRT_TableBodyCellValue';
+export * from './MRT_TableBodyRow';
+export * from './MRT_TableBodyRowGrabHandle';
+export * from './MRT_TableBodyRowPinButton';
+export * from './MRT_TableDetailPanel';

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -3,14 +3,12 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Column, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ColumnPinningButtons = <
-  TData extends Record<string, any> = {},
->({
+export const MRT_ColumnPinningButtons = <TData extends Record<string, any>>({
   column,
   table,
 }: Props<TData>) => {

package/src/buttons/MRT_CopyButton.tsx

@@ -2,20 +2,21 @@ import { type MouseEvent, type ReactNode, useState } from 'react';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   cell: MRT_Cell<TData>;
   children: ReactNode;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
+export const MRT_CopyButton = <TData extends Record<string, any>>({
   cell,
   children,
   table,
 }: Props<TData>) => {
   const {
-    options: { localization, muiTableBodyCellCopyButtonProps },
+    options: { localization, muiCopyButtonProps },
   } = table;
   const { column, row } = cell;
   const { columnDef } = column;
@@ -29,24 +30,19 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
     setTimeout(() => setCopied(false), 4000);
   };
 
-  const mTableBodyCellCopyButtonProps =
-    muiTableBodyCellCopyButtonProps instanceof Function
-      ? muiTableBodyCellCopyButtonProps({ cell, column, row, table })
-      : muiTableBodyCellCopyButtonProps;
-
-  const mcTableBodyCellCopyButtonProps =
-    columnDef.muiTableBodyCellCopyButtonProps instanceof Function
-      ? columnDef.muiTableBodyCellCopyButtonProps({
-          cell,
-          column,
-          row,
-          table,
-        })
-      : columnDef.muiTableBodyCellCopyButtonProps;
-
   const buttonProps = {
-    ...mTableBodyCellCopyButtonProps,
-    ...mcTableBodyCellCopyButtonProps,
+    ...parseFromValuesOrFunc(muiCopyButtonProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
   };
 
   return (
@@ -78,9 +74,7 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
           minWidth: 'unset',
           textAlign: 'inherit',
           textTransform: 'inherit',
-          ...(buttonProps?.sx instanceof Function
-            ? buttonProps.sx(theme)
-            : (buttonProps?.sx as any)),
+          ...(parseFromValuesOrFunc(buttonProps?.sx, theme) as any),
         })}
         title={undefined}
       >

package/src/buttons/MRT_EditActionButtons.tsx

@@ -2,15 +2,16 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
+import CircularProgress from '@mui/material/CircularProgress';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
   variant?: 'icon' | 'text';
 }
 
-export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
+export const MRT_EditActionButtons = <TData extends Record<string, any>>({
   row,
   table,
   variant = 'icon',
@@ -20,36 +21,59 @@ export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
     options: {
       icons: { CancelIcon, SaveIcon },
       localization,
+      onCreatingRowCancel,
+      onCreatingRowSave,
       onEditingRowSave,
       onEditingRowCancel,
     },
     refs: { editInputRefs },
+    setCreatingRow,
     setEditingRow,
   } = table;
-  const { editingRow } = getState();
+  const { creatingRow, editingRow, isSaving } = getState();
+
+  const isCreating = creatingRow?.id === row.id;
+  const isEditing = editingRow?.id === row.id;
 
   const handleCancel = () => {
-    onEditingRowCancel?.({ row, table });
-    setEditingRow(null);
+    if (isCreating) {
+      onCreatingRowCancel?.({ row, table });
+      setCreatingRow(null);
+    } else if (isEditing) {
+      onEditingRowCancel?.({ row, table });
+      setEditingRow(null);
+    }
+    row._valuesCache = {} as any; //reset values cache
   };
 
-  const handleSave = () => {
+  const handleSubmitRow = () => {
     //look for auto-filled input values
-    Object.values(editInputRefs?.current)?.forEach((input) => {
-      if (
-        input.value !== undefined &&
-        Object.hasOwn(editingRow?._valuesCache as object, input.name)
-      ) {
-        // @ts-ignore
-        editingRow._valuesCache[input.name] = input.value;
-      }
-    });
-    onEditingRowSave?.({
-      exitEditingMode: () => setEditingRow(null),
-      row: editingRow ?? row,
-      table,
-      values: editingRow?._valuesCache ?? { ...row.original },
-    });
+    Object.values(editInputRefs?.current)
+      .filter((inputRef) => row.id === inputRef?.name?.split('_')?.[0])
+      ?.forEach((input) => {
+        if (
+          input.value !== undefined &&
+          Object.hasOwn(row?._valuesCache as object, input.name)
+        ) {
+          // @ts-ignore
+          row._valuesCache[input.name] = input.value;
+        }
+      });
+    if (isCreating)
+      onCreatingRowSave?.({
+        exitCreatingMode: () => setCreatingRow(null),
+        row,
+        table,
+        values: row._valuesCache,
+      });
+    else if (isEditing) {
+      onEditingRowSave?.({
+        exitEditingMode: () => setEditingRow(null),
+        row,
+        table,
+        values: row?._valuesCache,
+      });
+    }
   };
 
   return (
@@ -68,16 +92,23 @@ export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
             <IconButton
               aria-label={localization.save}
               color="info"
-              onClick={handleSave}
+              onClick={handleSubmitRow}
             >
-              <SaveIcon />
+              {isSaving ? <CircularProgress size={18} /> : <SaveIcon />}
             </IconButton>
           </Tooltip>
         </>
       ) : (
         <>
-          <Button onClick={handleCancel}>{localization.cancel}</Button>
-          <Button onClick={handleSave} variant="contained">
+          <Button sx={{ minWidth: '100px' }} onClick={handleCancel}>
+            {localization.cancel}
+          </Button>
+          <Button
+            sx={{ minWidth: '100px' }}
+            onClick={handleSubmitRow}
+            variant="contained"
+          >
+            {isSaving && <CircularProgress color="inherit" size={18} />}
             {localization.save}
           </Button>
         </>

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,12 +1,15 @@
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ExpandAllButton = ({ table }: Props) => {
+export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
+  table,
+}: Props<TData>) => {
   const {
     getIsAllRowsExpanded,
     getIsSomeRowsExpanded,
@@ -22,10 +25,9 @@ export const MRT_ExpandAllButton = ({ table }: Props) => {
   } = table;
   const { density, isLoading } = getState();
 
-  const iconButtonProps =
-    muiExpandAllButtonProps instanceof Function
-      ? muiExpandAllButtonProps({ table })
-      : muiExpandAllButtonProps;
+  const iconButtonProps = parseFromValuesOrFunc(muiExpandAllButtonProps, {
+    table,
+  });
 
   const isAllRowsExpanded = getIsAllRowsExpanded();
 
@@ -52,9 +54,7 @@ export const MRT_ExpandAllButton = ({ table }: Props) => {
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             width: density === 'compact' ? '1.75rem' : '2.25rem',
             mt: density !== 'compact' ? '-0.25rem' : undefined,
-            ...(iconButtonProps?.sx instanceof Function
-              ? iconButtonProps?.sx(theme)
-              : (iconButtonProps?.sx as any)),
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}
         >