material-react-table-narender 1.0.0

package/packages/material-react-table/src/components/body/MRT_TableBody.tsx

@@ -0,0 +1,221 @@
+import { memo, useMemo } from 'react';
+import { type VirtualItem } from '@tanstack/react-virtual';
+import TableBody, { type TableBodyProps } from '@mui/material/TableBody';
+import Typography from '@mui/material/Typography';
+import { MRT_TableBodyRow, Memo_MRT_TableBodyRow } from './MRT_TableBodyRow';
+import { useMRT_RowVirtualizer } from '../../hooks/useMRT_RowVirtualizer';
+import { useMRT_Rows } from '../../hooks/useMRT_Rows';
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_TableBodyProps<TData extends MRT_RowData>
+  extends TableBodyProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableBody = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  table,
+  ...rest
+}: MRT_TableBodyProps<TData>) => {
+  const {
+    getBottomRows,
+    getIsSomeRowsPinned,
+    getRowModel,
+    getState,
+    getTopRows,
+    options: {
+      enableStickyFooter,
+      enableStickyHeader,
+      layoutMode,
+      localization,
+      memoMode,
+      muiTableBodyProps,
+      renderDetailPanel,
+      renderEmptyRowsFallback,
+      rowPinningDisplayMode,
+    },
+    refs: { tableFooterRef, tableHeadRef, tablePaperRef },
+  } = table;
+  const { columnFilters, globalFilter, isFullScreen, rowPinning } = getState();
+
+  const tableBodyProps = {
+    ...parseFromValuesOrFunc(muiTableBodyProps, { table }),
+    ...rest,
+  };
+
+  const tableHeadHeight =
+    ((enableStickyHeader || isFullScreen) &&
+      tableHeadRef.current?.clientHeight) ||
+    0;
+  const tableFooterHeight =
+    (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
+
+  const pinnedRowIds = useMemo(() => {
+    if (!rowPinning.bottom?.length && !rowPinning.top?.length) return [];
+    return getRowModel()
+      .rows.filter((row) => row.getIsPinned())
+      .map((r) => r.id);
+  }, [rowPinning, getRowModel().rows]);
+
+  const rows = useMRT_Rows(table);
+
+  const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
+
+  const { virtualRows } = rowVirtualizer ?? {};
+
+  const commonRowProps = {
+    columnVirtualizer,
+    numRows: rows.length,
+    table,
+  };
+
+  return (
+    <>
+      {!rowPinningDisplayMode?.includes('sticky') &&
+        getIsSomeRowsPinned('top') && (
+          <TableBody
+            {...tableBodyProps}
+            sx={(theme) => ({
+              display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+              position: 'sticky',
+              top: tableHeadHeight - 1,
+              zIndex: 1,
+              ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
+            })}
+          >
+            {getTopRows().map((row, staticRowIndex) => {
+              const props = {
+                ...commonRowProps,
+                row,
+                staticRowIndex,
+              };
+              return memoMode === 'rows' ? (
+                <Memo_MRT_TableBodyRow key={row.id} {...props} />
+              ) : (
+                <MRT_TableBodyRow key={row.id} {...props} />
+              );
+            })}
+          </TableBody>
+        )}
+      <TableBody
+        {...tableBodyProps}
+        sx={(theme) => ({
+          display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+          height: rowVirtualizer
+            ? `${rowVirtualizer.getTotalSize()}px`
+            : undefined,
+          minHeight: !rows.length ? '100px' : undefined,
+          position: 'relative',
+          ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
+        })}
+      >
+        {tableBodyProps?.children ??
+          (!rows.length ? (
+            <tr
+              style={{
+                display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+              }}
+            >
+              <td
+                colSpan={table.getVisibleLeafColumns().length}
+                style={{
+                  display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+                }}
+              >
+                {renderEmptyRowsFallback?.({ table }) ?? (
+                  <Typography
+                    sx={{
+                      color: 'text.secondary',
+                      fontStyle: 'italic',
+                      maxWidth: `min(100vw, ${
+                        tablePaperRef.current?.clientWidth ?? 360
+                      }px)`,
+                      py: '2rem',
+                      textAlign: 'center',
+                      width: '100%',
+                    }}
+                  >
+                    {globalFilter || columnFilters.length
+                      ? localization.noResultsFound
+                      : localization.noRecordsToDisplay}
+                  </Typography>
+                )}
+              </td>
+            </tr>
+          ) : (
+            <>
+              {(virtualRows ?? rows).map((rowOrVirtualRow, staticRowIndex) => {
+                let row = rowOrVirtualRow as MRT_Row<TData>;
+                if (rowVirtualizer) {
+                  if (renderDetailPanel) {
+                    if (rowOrVirtualRow.index % 2 === 1) {
+                      return null;
+                    } else {
+                      staticRowIndex = rowOrVirtualRow.index / 2;
+                    }
+                  } else {
+                    staticRowIndex = rowOrVirtualRow.index;
+                  }
+                  row = rows[staticRowIndex];
+                }
+                const props = {
+                  ...commonRowProps,
+                  pinnedRowIds,
+                  row,
+                  rowVirtualizer,
+                  staticRowIndex,
+                  virtualRow: rowVirtualizer
+                    ? (rowOrVirtualRow as VirtualItem)
+                    : undefined,
+                };
+                const key = `${row.id}-${row.index}`;
+                return memoMode === 'rows' ? (
+                  <Memo_MRT_TableBodyRow key={key} {...props} />
+                ) : (
+                  <MRT_TableBodyRow key={key} {...props} />
+                );
+              })}
+            </>
+          ))}
+      </TableBody>
+      {!rowPinningDisplayMode?.includes('sticky') &&
+        getIsSomeRowsPinned('bottom') && (
+          <TableBody
+            {...tableBodyProps}
+            sx={(theme) => ({
+              bottom: tableFooterHeight - 1,
+              display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+              position: 'sticky',
+              zIndex: 1,
+              ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
+            })}
+          >
+            {getBottomRows().map((row, staticRowIndex) => {
+              const props = {
+                ...commonRowProps,
+                row,
+                staticRowIndex,
+              };
+              return memoMode === 'rows' ? (
+                <Memo_MRT_TableBodyRow key={row.id} {...props} />
+              ) : (
+                <MRT_TableBodyRow key={row.id} {...props} />
+              );
+            })}
+          </TableBody>
+        )}
+    </>
+  );
+};
+
+export const Memo_MRT_TableBody = memo(
+  MRT_TableBody,
+  (prev, next) => prev.table.options.data === next.table.options.data,
+) as typeof MRT_TableBody;

package/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx

@@ -0,0 +1,351 @@
+import {
+  type DragEvent,
+  type MouseEvent,
+  type RefObject,
+  memo,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import TableCell, { type TableCellProps } from '@mui/material/TableCell';
+import { useTheme } from '@mui/material/styles';
+import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
+import {
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import {
+  isCellEditable,
+  cellKeyboardShortcuts,
+  openEditingCell,
+} from '../../utils/cell.utils';
+import { getCommonMRTCellStyles } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
+import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
+
+export interface MRT_TableBodyCellProps<TData extends MRT_RowData>
+  extends TableCellProps {
+  cell: MRT_Cell<TData>;
+  numRows?: number;
+  rowRef: RefObject<HTMLTableRowElement | null>;
+  staticColumnIndex?: number;
+  staticRowIndex: number;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableBodyCell = <TData extends MRT_RowData>({
+  cell,
+  numRows,
+  rowRef,
+  staticColumnIndex,
+  staticRowIndex,
+  table,
+  ...rest
+}: MRT_TableBodyCellProps<TData>) => {
+  const theme = useTheme();
+  const {
+    getState,
+    options: {
+      columnResizeDirection,
+      columnResizeMode,
+      createDisplayMode,
+      editDisplayMode,
+      enableCellActions,
+      enableClickToCopy,
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableGrouping,
+      enableKeyboardShortcuts,
+      layoutMode,
+      mrtTheme: { draggingBorderColor },
+      muiSkeletonProps,
+      muiTableBodyCellProps,
+    },
+    setHoveredColumn,
+  } = table;
+  const {
+    actionCell,
+    columnSizingInfo,
+    creatingRow,
+    density,
+    draggingColumn,
+    draggingRow,
+    editingCell,
+    editingRow,
+    hoveredColumn,
+    hoveredRow,
+    isLoading,
+    showSkeletons,
+  } = getState();
+  const { column, row } = cell;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const args = { cell, column, row, table };
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(muiTableBodyCellProps, args),
+    ...parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, args),
+    ...rest,
+  };
+
+  const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
+    cell,
+    column,
+    row,
+    table,
+  });
+
+  const [skeletonWidth, setSkeletonWidth] = useState(100);
+  useEffect(() => {
+    if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
+    const size = column.getSize();
+    setSkeletonWidth(
+      columnDefType === 'display'
+        ? size / 2
+        : Math.round(Math.random() * (size - size / 3) + size / 3),
+    );
+  }, [isLoading, showSkeletons]);
+
+  const draggingBorders = useMemo(() => {
+    const isDraggingColumn = draggingColumn?.id === column.id;
+    const isHoveredColumn = hoveredColumn?.id === column.id;
+    const isDraggingRow = draggingRow?.id === row.id;
+    const isHoveredRow = hoveredRow?.id === row.id;
+    const isFirstColumn = column.getIsFirstColumn();
+    const isLastColumn = column.getIsLastColumn();
+    const isLastRow = numRows && staticRowIndex === numRows - 1;
+    const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
+    const showResizeBorder =
+      isResizingColumn && columnResizeMode === 'onChange';
+
+    const borderStyle = showResizeBorder
+      ? `2px solid ${draggingBorderColor} !important`
+      : isDraggingColumn || isDraggingRow
+        ? `1px dashed ${theme.palette.grey[500]} !important`
+        : isHoveredColumn || isHoveredRow || isResizingColumn
+          ? `2px dashed ${draggingBorderColor} !important`
+          : undefined;
+
+    if (showResizeBorder) {
+      return columnResizeDirection === 'ltr'
+        ? { borderRight: borderStyle }
+        : { borderLeft: borderStyle };
+    }
+
+    return borderStyle
+      ? {
+          borderBottom:
+            isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn)
+              ? borderStyle
+              : undefined,
+          borderLeft:
+            isDraggingColumn ||
+            isHoveredColumn ||
+            ((isDraggingRow || isHoveredRow) && isFirstColumn)
+              ? borderStyle
+              : undefined,
+          borderRight:
+            isDraggingColumn ||
+            isHoveredColumn ||
+            ((isDraggingRow || isHoveredRow) && isLastColumn)
+              ? borderStyle
+              : undefined,
+          borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
+        }
+      : undefined;
+  }, [
+    columnSizingInfo.isResizingColumn,
+    draggingColumn,
+    draggingRow,
+    hoveredColumn,
+    hoveredRow,
+    staticRowIndex,
+  ]);
+
+  const isColumnPinned =
+    enableColumnPinning &&
+    columnDef.columnDefType !== 'group' &&
+    column.getIsPinned();
+
+  const isEditable = isCellEditable({ cell, table });
+
+  const isEditing =
+    isEditable &&
+    !['custom', 'modal'].includes(editDisplayMode as string) &&
+    (editDisplayMode === 'table' ||
+      editingRow?.id === row.id ||
+      editingCell?.id === cell.id) &&
+    !row.getIsGrouped();
+
+  const isCreating =
+    isEditable && createDisplayMode === 'row' && creatingRow?.id === row.id;
+
+  const showClickToCopyButton =
+    (parseFromValuesOrFunc(enableClickToCopy, cell) === true ||
+      parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === true) &&
+    !['context-menu', false].includes(
+      // @ts-ignore
+      parseFromValuesOrFunc(columnDef.enableClickToCopy, cell),
+    );
+
+  const isRightClickable = parseFromValuesOrFunc(enableCellActions, cell);
+
+  const cellValueProps = {
+    cell,
+    table,
+    staticColumnIndex,
+    staticRowIndex,
+  };
+
+  const handleDoubleClick = (event: MouseEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onDoubleClick?.(event);
+    openEditingCell({ cell, table });
+  };
+
+  const handleDragEnter = (e: DragEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onDragEnter?.(e);
+    if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
+      setHoveredColumn(null);
+    }
+    if (enableColumnOrdering && draggingColumn) {
+      setHoveredColumn(
+        columnDef.enableColumnOrdering !== false ? column : null,
+      );
+    }
+  };
+
+  const handleDragOver = (e: DragEvent) => {
+    if (columnDef.enableColumnOrdering !== false) {
+      e.preventDefault();
+    }
+  };
+
+  const handleContextMenu = (e: MouseEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onContextMenu?.(e);
+    if (isRightClickable) {
+      e.preventDefault();
+      table.setActionCell(cell);
+      table.refs.actionCellRef.current = e.currentTarget;
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onKeyDown?.(event);
+    cellKeyboardShortcuts({
+      cell,
+      cellValue: cell.getValue<string>(),
+      event,
+      table,
+    });
+  };
+
+  return (
+    <TableCell
+      align={theme.direction === 'rtl' ? 'right' : 'left'}
+      data-index={staticColumnIndex}
+      data-pinned={!!isColumnPinned || undefined}
+      tabIndex={enableKeyboardShortcuts ? 0 : undefined}
+      {...tableCellProps}
+      onKeyDown={handleKeyDown}
+      onContextMenu={handleContextMenu}
+      onDoubleClick={handleDoubleClick}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      sx={(theme) => ({
+        '&:hover': {
+          outline:
+            actionCell?.id === cell.id ||
+            (editDisplayMode === 'cell' && isEditable) ||
+            (editDisplayMode === 'table' && (isCreating || isEditing))
+              ? `1px solid ${theme.palette.grey[500]}`
+              : undefined,
+          textOverflow: 'clip',
+        },
+        alignItems: layoutMode?.startsWith('grid') ? 'center' : undefined,
+        cursor: isRightClickable
+          ? 'context-menu'
+          : isEditable && editDisplayMode === 'cell'
+            ? 'pointer'
+            : 'inherit',
+        outline:
+          actionCell?.id === cell.id
+            ? `1px solid ${theme.palette.grey[500]}`
+            : undefined,
+        outlineOffset: '-1px',
+        overflow: 'hidden',
+        p:
+          density === 'compact'
+            ? columnDefType === 'display'
+              ? '0 0.5rem'
+              : '0.5rem'
+            : density === 'comfortable'
+              ? columnDefType === 'display'
+                ? '0.5rem 0.75rem'
+                : '1rem'
+              : columnDefType === 'display'
+                ? '1rem 1.25rem'
+                : '1.5rem',
+
+        textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
+        whiteSpace:
+          row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
+        ...getCommonMRTCellStyles({
+          column,
+          table,
+          tableCellProps,
+          theme,
+        }),
+        ...draggingBorders,
+      })}
+    >
+      {tableCellProps.children ?? (
+        <>
+          {cell.getIsPlaceholder() ? (
+            (columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null)
+          ) : showSkeletons !== false && (isLoading || showSkeletons) ? (
+            <Skeleton
+              animation="wave"
+              height={20}
+              width={skeletonWidth}
+              {...skeletonProps}
+            />
+          ) : columnDefType === 'display' &&
+            (['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(
+              column.id,
+            ) ||
+              !row.getIsGrouped()) ? (
+            columnDef.Cell?.({
+              cell,
+              column,
+              renderedCellValue: cell.renderValue() as any,
+              row,
+              rowRef,
+              staticColumnIndex,
+              staticRowIndex,
+              table,
+            })
+          ) : isCreating || isEditing ? (
+            <MRT_EditCellTextField cell={cell} table={table} />
+          ) : showClickToCopyButton && columnDef.enableClickToCopy !== false ? (
+            <MRT_CopyButton cell={cell} table={table}>
+              <MRT_TableBodyCellValue {...cellValueProps} />
+            </MRT_CopyButton>
+          ) : (
+            <MRT_TableBodyCellValue {...cellValueProps} />
+          )}
+          {cell.getIsGrouped() && !columnDef.GroupedCell && (
+            <> ({row.subRows?.length})</>
+          )}
+        </>
+      )}
+    </TableCell>
+  );
+};
+
+export const Memo_MRT_TableBodyCell = memo(
+  MRT_TableBodyCell,
+  (prev, next) => next.cell === prev.cell,
+) as typeof MRT_TableBodyCell;

package/packages/material-react-table/src/components/body/MRT_TableBodyCellValue.tsx

@@ -0,0 +1,130 @@
+import { type ReactNode, type RefObject } from 'react';
+import Box from '@mui/material/Box';
+import {
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import highlightWords from 'highlight-words';
+
+const allowedTypes = ['string', 'number'];
+
+export interface MRT_TableBodyCellValueProps<TData extends MRT_RowData> {
+  cell: MRT_Cell<TData>;
+  rowRef?: RefObject<HTMLTableRowElement | null>;
+  staticColumnIndex?: number;
+  staticRowIndex?: number;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
+  cell,
+  rowRef,
+  staticColumnIndex,
+  staticRowIndex,
+  table,
+}: MRT_TableBodyCellValueProps<TData>) => {
+  const {
+    getState,
+    options: {
+      enableFilterMatchHighlighting,
+      mrtTheme: { matchHighlightColor },
+    },
+  } = table;
+  const { column, row } = cell;
+  const { columnDef } = column;
+  const { globalFilter, globalFilterFn } = getState();
+  const filterValue = column.getFilterValue();
+
+  let renderedCellValue =
+    cell.getIsAggregated() && columnDef.AggregatedCell
+      ? columnDef.AggregatedCell({
+          cell,
+          column,
+          row,
+          table,
+          staticColumnIndex,
+          staticRowIndex,
+        })
+      : row.getIsGrouped() && !cell.getIsGrouped()
+        ? null
+        : cell.getIsGrouped() && columnDef.GroupedCell
+          ? columnDef.GroupedCell({
+              cell,
+              column,
+              row,
+              table,
+              staticColumnIndex,
+              staticRowIndex,
+            })
+          : undefined;
+
+  const isGroupedValue = renderedCellValue !== undefined;
+
+  if (!isGroupedValue) {
+    renderedCellValue = cell.renderValue() as ReactNode | number | string;
+  }
+
+  if (
+    enableFilterMatchHighlighting &&
+    columnDef.enableFilterMatchHighlighting !== false &&
+    String(renderedCellValue) &&
+    allowedTypes.includes(typeof renderedCellValue) &&
+    ((filterValue &&
+      allowedTypes.includes(typeof filterValue) &&
+      ['autocomplete', 'text'].includes(columnDef.filterVariant!)) ||
+      (globalFilter &&
+        allowedTypes.includes(typeof globalFilter) &&
+        column.getCanGlobalFilter()))
+  ) {
+    const chunks = highlightWords?.({
+      matchExactly:
+        (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
+      query: (filterValue ?? globalFilter ?? '').toString(),
+      text: renderedCellValue?.toString() as string,
+    });
+    if (chunks?.length > 1 || chunks?.[0]?.match) {
+      renderedCellValue = (
+        <span aria-label={renderedCellValue as string} role="note">
+          {chunks?.map(({ key, match, text }) => (
+            <Box
+              aria-hidden="true"
+              component="span"
+              key={key}
+              sx={
+                match
+                  ? {
+                      backgroundColor: matchHighlightColor,
+                      borderRadius: '2px',
+                      color: (theme) =>
+                        theme.palette.mode === 'dark'
+                          ? theme.palette.common.white
+                          : theme.palette.common.black,
+                      padding: '2px 1px',
+                    }
+                  : undefined
+              }
+            >
+              {text}
+            </Box>
+          )) ?? renderedCellValue}
+        </span>
+      );
+    }
+  }
+
+  if (columnDef.Cell && !isGroupedValue) {
+    renderedCellValue = columnDef.Cell({
+      cell,
+      column,
+      renderedCellValue,
+      row,
+      rowRef,
+      staticColumnIndex,
+      staticRowIndex,
+      table,
+    });
+  }
+
+  return renderedCellValue;
+};