@cutting/material-react-table 4.0.0

package/src/components/body/MRT_TableBodyRow.tsx

@@ -0,0 +1,283 @@
+import { alpha, darken, lighten, type Theme, useTheme } from '@mui/material/styles';
+import TableRow, { type TableRowProps } from '@mui/material/TableRow';
+import { type VirtualItem } from '@tanstack/react-virtual';
+import { type DragEvent, memo, useMemo, useRef } from 'react';
+
+import {
+  type MRT_Cell,
+  type MRT_ColumnVirtualizer,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_RowVirtualizer,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { getIsRowSelected } from '../../utils/row.utils';
+import {
+  commonCellBeforeAfterStyles,
+  getCommonPinnedCellStyles,
+} from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
+import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
+
+export interface MRT_TableBodyRowProps<TData extends MRT_RowData>
+  extends TableRowProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  numRows?: number;
+  pinnedRowIds?: string[];
+  row: MRT_Row<TData>;
+  rowVirtualizer?: MRT_RowVirtualizer;
+  staticRowIndex: number;
+  table: MRT_TableInstance<TData>;
+  virtualRow?: VirtualItem;
+}
+
+export const MRT_TableBodyRow = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  numRows,
+  pinnedRowIds,
+  row,
+  rowVirtualizer,
+  staticRowIndex,
+  table,
+  virtualRow,
+  ...rest
+}: MRT_TableBodyRowProps<TData>) => {
+  const theme = useTheme();
+
+  const {
+    getState,
+    options: {
+      enableRowOrdering,
+      enableRowPinning,
+      enableStickyFooter,
+      enableStickyHeader,
+      layoutMode,
+      memoMode,
+      mrtTheme: {
+        baseBackgroundColor,
+        pinnedRowBackgroundColor,
+        selectedRowBackgroundColor,
+      },
+      muiTableBodyRowProps,
+      renderDetailPanel,
+      rowPinningDisplayMode,
+    },
+    refs: { tableFooterRef, tableHeadRef },
+    setHoveredRow,
+  } = table;
+  const {
+    density,
+    draggingColumn,
+    draggingRow,
+    editingCell,
+    editingRow,
+    hoveredRow,
+    isFullScreen,
+    rowPinning,
+  } = getState();
+
+  const visibleCells = row.getVisibleCells();
+
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
+
+  const isRowSelected = getIsRowSelected({ row, table });
+  const isRowPinned = enableRowPinning && row.getIsPinned();
+  const isDraggingRow = draggingRow?.id === row.id;
+  const isHoveredRow = hoveredRow?.id === row.id;
+
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(muiTableBodyRowProps, {
+      row,
+      staticRowIndex,
+      table,
+    }),
+    ...rest,
+  };
+
+  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 defaultRowHeight =
+    density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69;
+
+  const customRowHeight =
+    // @ts-expect-error
+    parseInt(tableRowProps?.style?.height ?? sx?.height, 10) || undefined;
+
+  const rowHeight = customRowHeight || defaultRowHeight;
+
+  const handleDragEnter = (_e: DragEvent) => {
+    if (enableRowOrdering && draggingRow) {
+      setHoveredRow(row);
+    }
+  };
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+  };
+
+  const rowRef = useRef<HTMLTableRowElement | null>(null);
+
+  const cellHighlightColor = isRowSelected
+    ? selectedRowBackgroundColor
+    : isRowPinned
+      ? pinnedRowBackgroundColor
+      : undefined;
+
+  const cellHighlightColorHover =
+    tableRowProps?.hover !== false
+      ? isRowSelected
+        ? cellHighlightColor
+        : theme.palette.mode === 'dark'
+          ? `${lighten(baseBackgroundColor, 0.3)}`
+          : `${darken(baseBackgroundColor, 0.3)}`
+      : undefined;
+
+  return (
+    <>
+      <TableRow
+        data-index={renderDetailPanel ? staticRowIndex * 2 : staticRowIndex}
+        data-pinned={!!isRowPinned || undefined}
+        data-selected={isRowSelected || undefined}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        ref={(node: HTMLTableRowElement) => {
+          if (node) {
+            rowRef.current = node;
+            rowVirtualizer?.measureElement(node);
+          }
+        }}
+        selected={isRowSelected}
+        {...tableRowProps}
+        style={{
+          transform: virtualRow
+            ? `translateY(${virtualRow.start}px)`
+            : undefined,
+          ...tableRowProps?.style,
+        }}
+        sx={(theme: Theme) => ({
+          '&:hover td:after': cellHighlightColorHover
+            ? {
+                backgroundColor: alpha(cellHighlightColorHover, 0.3),
+                ...commonCellBeforeAfterStyles,
+              }
+            : undefined,
+          backgroundColor: `${baseBackgroundColor} !important`,
+          bottom:
+            !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
+              ? `${
+                  bottomPinnedIndex * rowHeight +
+                  (enableStickyFooter ? tableFooterHeight - 1 : 0)
+                }px`
+              : undefined,
+          boxSizing: 'border-box',
+          display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+          opacity: isRowPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1,
+          position: virtualRow
+            ? 'absolute'
+            : rowPinningDisplayMode?.includes('sticky') && isRowPinned
+              ? 'sticky'
+              : 'relative',
+          td: {
+            ...getCommonPinnedCellStyles({ table, theme }),
+          },
+          'td:after': cellHighlightColor
+            ? {
+                backgroundColor: cellHighlightColor,
+                ...commonCellBeforeAfterStyles,
+              }
+            : undefined,
+          top: virtualRow
+            ? 0
+            : topPinnedIndex !== undefined && isRowPinned
+              ? `${
+                  topPinnedIndex * rowHeight +
+                  (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
+                }px`
+              : undefined,
+          transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
+          width: '100%',
+          zIndex:
+            rowPinningDisplayMode?.includes('sticky') && isRowPinned ? 2 : 0,
+          ...(sx as any),
+        })}
+      >
+        {virtualPaddingLeft ? (
+          <td style={{ display: 'flex', width: virtualPaddingLeft }} />
+        ) : null}
+        {(virtualColumns ?? visibleCells).map(
+          (cellOrVirtualCell, staticColumnIndex) => {
+            let cell = cellOrVirtualCell as MRT_Cell<TData>;
+            if (columnVirtualizer) {
+              staticColumnIndex = (cellOrVirtualCell as MRT_VirtualItem).index;
+              cell = visibleCells[staticColumnIndex];
+            }
+            const props = {
+              cell,
+              numRows,
+              rowRef,
+              staticColumnIndex,
+              staticRowIndex,
+              table,
+            };
+            const key = `${cell.id}-${staticRowIndex}`;
+            return cell ? (
+              memoMode === 'cells' &&
+              cell.column.columnDef.columnDefType === 'data' &&
+              !draggingColumn &&
+              !draggingRow &&
+              editingCell?.id !== cell.id &&
+              editingRow?.id !== row.id ? (
+                <Memo_MRT_TableBodyCell key={key} {...props} />
+              ) : (
+                <MRT_TableBodyCell key={key} {...props} />
+              )
+            ) : null;
+          },
+        )}
+        {virtualPaddingRight ? (
+          <td style={{ display: 'flex', width: virtualPaddingRight }} />
+        ) : null}
+      </TableRow>
+      {renderDetailPanel && !row.getIsGrouped() && (
+        <MRT_TableDetailPanel
+          parentRowRef={rowRef}
+          row={row}
+          rowVirtualizer={rowVirtualizer}
+          staticRowIndex={staticRowIndex}
+          table={table}
+          virtualRow={virtualRow}
+        />
+      )}
+    </>
+  );
+};
+
+export const Memo_MRT_TableBodyRow = memo(
+  MRT_TableBodyRow,
+  (prev, next) =>
+    prev.row === next.row && prev.staticRowIndex === next.staticRowIndex,
+) as typeof MRT_TableBodyRow;

package/src/components/body/MRT_TableBodyRowGrabHandle.tsx

@@ -0,0 +1,62 @@
+import { type IconButtonProps } from '@mui/material/IconButton';
+import { type DragEvent, type RefObject } from 'react';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+
+export interface MRT_TableBodyRowGrabHandleProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  row: MRT_Row<TData>;
+  rowRef: RefObject<HTMLTableRowElement | null>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableBodyRowGrabHandle = <TData extends MRT_RowData>({
+  row,
+  rowRef,
+  table,
+  ...rest
+}: MRT_TableBodyRowGrabHandleProps<TData>) => {
+  const {
+    options: { muiRowDragHandleProps },
+  } = table;
+
+  const iconButtonProps = {
+    ...parseFromValuesOrFunc(muiRowDragHandleProps, {
+      row,
+      table,
+    }),
+    ...rest,
+  };
+
+  const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
+    iconButtonProps?.onDragStart?.(event);
+    try {
+      event.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
+    } catch (e) {
+      console.error(e);
+    }
+    table.setDraggingRow(row as any);
+  };
+
+  const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
+    iconButtonProps?.onDragEnd?.(event);
+    table.setDraggingRow(null);
+    table.setHoveredRow(null);
+  };
+
+  return (
+    <MRT_GrabHandleButton
+      {...iconButtonProps}
+      location="row"
+      onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
+      table={table}
+    />
+  );
+};

package/src/components/body/MRT_TableBodyRowPinButton.tsx

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

package/src/components/body/MRT_TableDetailPanel.tsx

@@ -0,0 +1,111 @@
+import Collapse from '@mui/material/Collapse';
+import TableCell, { type TableCellProps } from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import { type RefObject } from 'react';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_RowVirtualizer,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_TableDetailPanelProps<TData extends MRT_RowData>
+  extends TableCellProps {
+  parentRowRef: RefObject<HTMLTableRowElement | null>;
+  row: MRT_Row<TData>;
+  rowVirtualizer?: MRT_RowVirtualizer;
+  staticRowIndex: number;
+  table: MRT_TableInstance<TData>;
+  virtualRow?: MRT_VirtualItem;
+}
+
+export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
+  parentRowRef,
+  row,
+  rowVirtualizer,
+  staticRowIndex,
+  table,
+  virtualRow,
+  ...rest
+}: MRT_TableDetailPanelProps<TData>) => {
+  const {
+    getState,
+    getVisibleLeafColumns,
+    options: {
+      layoutMode,
+      mrtTheme: { baseBackgroundColor },
+      muiDetailPanelProps,
+      muiTableBodyRowProps,
+      renderDetailPanel,
+    },
+  } = table;
+  const { isLoading } = getState();
+
+  const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+    isDetailPanel: true,
+    row,
+    staticRowIndex,
+    table,
+  });
+
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(muiDetailPanelProps, {
+      row,
+      table,
+    }),
+    ...rest,
+  };
+
+  const DetailPanel = !isLoading && renderDetailPanel?.({ row, table });
+
+  return (
+    <TableRow
+      className="Mui-TableBodyCell-DetailPanel"
+      data-index={renderDetailPanel ? staticRowIndex * 2 + 1 : staticRowIndex}
+      ref={(node: HTMLTableRowElement) => {
+        if (node) {
+          rowVirtualizer?.measureElement?.(node);
+        }
+      }}
+      {...tableRowProps}
+      sx={(theme) => ({
+        display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+        position: virtualRow ? 'absolute' : undefined,
+        top: virtualRow
+          ? `${parentRowRef.current?.getBoundingClientRect()?.height}px`
+          : undefined,
+        transform: virtualRow
+          ? `translateY(${virtualRow?.start}px)`
+          : undefined,
+        width: '100%',
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
+      })}
+    >
+      <TableCell
+        className="Mui-TableBodyCell-DetailPanel"
+        colSpan={getVisibleLeafColumns().length}
+        {...tableCellProps}
+        sx={(theme) => ({
+          backgroundColor: virtualRow ? baseBackgroundColor : undefined,
+          borderBottom: !row.getIsExpanded() ? 'none' : undefined,
+          display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+          py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0,
+          transition: !virtualRow ? 'all 150ms ease-in-out' : undefined,
+          width: `100%`,
+          ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
+        })}
+      >
+        {virtualRow ? (
+          row.getIsExpanded() && DetailPanel
+        ) : (
+          <Collapse in={row.getIsExpanded()} mountOnEnter unmountOnExit>
+            {DetailPanel}
+          </Collapse>
+        )}
+      </TableCell>
+    </TableRow>
+  );
+};

package/src/components/buttons/MRT_ColumnPinningButtons.tsx

@@ -0,0 +1,73 @@
+import Box, { type BoxProps } from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_ColumnPinningButtonsProps<TData extends MRT_RowData>
+  extends BoxProps {
+  column: MRT_Column<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ColumnPinningButtons = <TData extends MRT_RowData>({
+  column,
+  table,
+  ...rest
+}: MRT_ColumnPinningButtonsProps<TData>) => {
+  const {
+    options: {
+      icons: { PushPinIcon },
+      localization,
+    },
+  } = table;
+
+  const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
+    column.pin(pinDirection);
+  };
+
+  return (
+    <Box
+      {...rest}
+      sx={(theme) => ({
+        minWidth: '70px',
+        textAlign: 'center',
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+      })}
+    >
+      {column.getIsPinned() ? (
+        <Tooltip title={localization.unpin}>
+          <IconButton onClick={() => handlePinColumn(false)} size="small">
+            <PushPinIcon />
+          </IconButton>
+        </Tooltip>
+      ) : (
+        <>
+          <Tooltip title={localization.pinToLeft}>
+            <IconButton onClick={() => handlePinColumn('left')} size="small">
+              <PushPinIcon
+                style={{
+                  transform: 'rotate(90deg)',
+                }}
+              />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title={localization.pinToRight}>
+            <IconButton onClick={() => handlePinColumn('right')} size="small">
+              <PushPinIcon
+                style={{
+                  transform: 'rotate(-90deg)',
+                }}
+              />
+            </IconButton>
+          </Tooltip>
+        </>
+      )}
+    </Box>
+  );
+};

package/src/components/buttons/MRT_CopyButton.tsx

@@ -0,0 +1,88 @@
+import Button, { type ButtonProps } from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+import { type MouseEvent, useState } from 'react';
+
+import {
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_CopyButtonProps<TData extends MRT_RowData>
+  extends ButtonProps {
+  cell: MRT_Cell<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_CopyButton = <TData extends MRT_RowData>({
+  cell,
+  table,
+  ...rest
+}: MRT_CopyButtonProps<TData>) => {
+  const {
+    options: { localization, muiCopyButtonProps },
+  } = table;
+  const { column, row } = cell;
+  const { columnDef } = column;
+
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = (event: MouseEvent, text: unknown) => {
+    event.stopPropagation();
+    navigator.clipboard.writeText(text as string);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 4000);
+  };
+
+  const buttonProps = {
+    ...parseFromValuesOrFunc(muiCopyButtonProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...rest,
+  };
+
+  return (
+    <Tooltip
+      {...getCommonTooltipProps('top')}
+      title={
+        buttonProps?.title ??
+        (copied ? localization.copiedToClipboard : localization.clickToCopy)
+      }
+    >
+      <Button
+        onClick={(e) => handleCopy(e, cell.getValue())}
+        size="small"
+        type="button"
+        variant="text"
+        {...buttonProps}
+        sx={(theme) => ({
+          backgroundColor: 'transparent',
+          border: 'none',
+          color: 'inherit',
+          cursor: 'copy',
+          fontFamily: 'inherit',
+          fontSize: 'inherit',
+          letterSpacing: 'inherit',
+          m: '-0.25rem',
+          minWidth: 'unset',
+          py: 0,
+          textAlign: 'inherit',
+          textTransform: 'inherit',
+          ...(parseFromValuesOrFunc(buttonProps?.sx, theme) as any),
+        })}
+        title={undefined}
+      />
+    </Tooltip>
+  );
+};