material-react-table-narender 1.0.0 → 2.13.3

package/src/components/body/MRT_TableBodyRow.tsx

@@ -0,0 +1,287 @@
+import { type DragEvent, memo, useMemo, useRef } from 'react';
+import { type VirtualItem } from '@tanstack/react-virtual';
+import TableRow, { type TableRowProps } from '@mui/material/TableRow';
+import {
+  type Theme,
+  alpha,
+  darken,
+  lighten,
+  useTheme,
+} from '@mui/material/styles';
+import { MRT_TableBodyCell, Memo_MRT_TableBodyCell } from './MRT_TableBodyCell';
+import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
+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';
+
+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-ignore
+    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,
+            };
+            return cell ? (
+              memoMode === 'cells' &&
+              cell.column.columnDef.columnDefType === 'data' &&
+              !draggingColumn &&
+              !draggingRow &&
+              editingCell?.id !== cell.id &&
+              editingRow?.id !== row.id ? (
+                <Memo_MRT_TableBodyCell key={cell.id} {...props} />
+              ) : (
+                <MRT_TableBodyCell key={cell.id} {...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,61 @@
+import { type DragEvent, type RefObject } from 'react';
+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_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+
+export interface MRT_TableBodyRowGrabHandleProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  row: MRT_Row<TData>;
+  rowRef: RefObject<HTMLTableRowElement>;
+  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_TableDetailPanel.tsx

@@ -0,0 +1,110 @@
+import { type RefObject } from 'react';
+import Collapse from '@mui/material/Collapse';
+import TableCell, { type TableCellProps } from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+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>;
+  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_EditActionButtons.tsx

@@ -0,0 +1,134 @@
+import Box, { type BoxProps } from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_EditActionButtonsProps<TData extends MRT_RowData>
+  extends BoxProps {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+  variant?: 'icon' | 'text';
+}
+
+export const MRT_EditActionButtons = <TData extends MRT_RowData>({
+  row,
+  table,
+  variant = 'icon',
+  ...rest
+}: MRT_EditActionButtonsProps<TData>) => {
+  const {
+    getState,
+    options: {
+      icons: { CancelIcon, SaveIcon },
+      localization,
+      onCreatingRowCancel,
+      onCreatingRowSave,
+      onEditingRowCancel,
+      onEditingRowSave,
+    },
+    refs: { editInputRefs },
+    setCreatingRow,
+    setEditingRow,
+  } = table;
+  const { creatingRow, editingRow, isSaving } = getState();
+
+  const isCreating = creatingRow?.id === row.id;
+  const isEditing = editingRow?.id === row.id;
+
+  const handleCancel = () => {
+    if (isCreating) {
+      onCreatingRowCancel?.({ row, table });
+      setCreatingRow(null);
+    } else if (isEditing) {
+      onEditingRowCancel?.({ row, table });
+      setEditingRow(null);
+    }
+    row._valuesCache = {} as any; //reset values cache
+  };
+
+  const handleSubmitRow = () => {
+    //look for auto-filled input values
+    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 (
+    <Box
+      onClick={(e) => e.stopPropagation()}
+      sx={(theme) => ({
+        display: 'flex',
+        gap: '0.75rem',
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+      })}
+    >
+      {variant === 'icon' ? (
+        <>
+          <Tooltip title={localization.cancel}>
+            <IconButton aria-label={localization.cancel} onClick={handleCancel}>
+              <CancelIcon />
+            </IconButton>
+          </Tooltip>
+          {((isCreating && onCreatingRowSave) ||
+            (isEditing && onEditingRowSave)) && (
+            <Tooltip title={localization.save}>
+              <IconButton
+                aria-label={localization.save}
+                color="info"
+                disabled={isSaving}
+                onClick={handleSubmitRow}
+              >
+                {isSaving ? <CircularProgress size={18} /> : <SaveIcon />}
+              </IconButton>
+            </Tooltip>
+          )}
+        </>
+      ) : (
+        <>
+          <Button onClick={handleCancel} sx={{ minWidth: '100px' }}>
+            {localization.cancel}
+          </Button>
+          <Button
+            disabled={isSaving}
+            onClick={handleSubmitRow}
+            sx={{ minWidth: '100px' }}
+            variant="contained"
+          >
+            {isSaving && <CircularProgress color="inherit" size={18} />}
+            {localization.save}
+          </Button>
+        </>
+      )}
+    </Box>
+  );
+};

package/src/components/buttons/MRT_RowPinButton.tsx

@@ -0,0 +1,82 @@
+import { type MouseEvent, useState } from 'react';
+import { type RowPinningPosition } from '@tanstack/react-table';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_RowPinButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  pinningPosition: RowPinningPosition;
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_RowPinButton = <TData extends MRT_RowData>({
+  pinningPosition,
+  row,
+  table,
+  ...rest
+}: MRT_RowPinButtonProps<TData>) => {
+  const {
+    options: {
+      icons: { CloseIcon, PushPinIcon },
+      localization,
+      rowPinningDisplayMode,
+    },
+  } = table;
+
+  const isPinned = row.getIsPinned();
+
+  const [tooltipOpened, setTooltipOpened] = useState(false);
+
+  const handleTogglePin = (event: MouseEvent<HTMLButtonElement>) => {
+    setTooltipOpened(false);
+    event.stopPropagation();
+    row.pin(isPinned ? false : pinningPosition);
+  };
+
+  return (
+    <Tooltip
+      {...getCommonTooltipProps()}
+      open={tooltipOpened}
+      title={isPinned ? localization.unpin : localization.pin}
+    >
+      <IconButton
+        aria-label={localization.pin}
+        onClick={handleTogglePin}
+        onMouseEnter={() => setTooltipOpened(true)}
+        onMouseLeave={() => setTooltipOpened(false)}
+        size="small"
+        {...rest}
+        sx={(theme) => ({
+          height: '24px',
+          width: '24px',
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        })}
+      >
+        {isPinned ? (
+          <CloseIcon />
+        ) : (
+          <PushPinIcon
+            fontSize="small"
+            style={{
+              transform: `rotate(${
+                rowPinningDisplayMode === 'sticky'
+                  ? 135
+                  : pinningPosition === 'top'
+                    ? 180
+                    : 0
+              }deg)`,
+            }}
+          />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};