@cutting/material-react-table 4.0.0

package/src/components/menus/MRT_RowActionMenu.tsx

@@ -0,0 +1,89 @@
+import Menu, { type MenuProps } from '@mui/material/Menu';
+import { type MouseEvent, type ReactNode, useMemo } from 'react';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
+
+export interface MRT_RowActionMenuProps<TData extends MRT_RowData>
+  extends Partial<MenuProps> {
+  anchorEl: HTMLElement | null;
+  handleEdit: (event: MouseEvent) => void;
+  row: MRT_Row<TData>;
+  setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  staticRowIndex?: number;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_RowActionMenu = <TData extends MRT_RowData>({
+  anchorEl,
+  handleEdit,
+  row,
+  setAnchorEl,
+  staticRowIndex,
+  table,
+  ...rest
+}: MRT_RowActionMenuProps<TData>) => {
+  const {
+    getState,
+    options: {
+      editDisplayMode,
+      enableEditing,
+      icons: { EditIcon },
+      localization,
+      mrtTheme: { menuBackgroundColor },
+      renderRowActionMenuItems,
+    },
+  } = table;
+  const { density } = getState();
+
+  const menuItems = useMemo(() => {
+    const items: ReactNode[] = [];
+    const editItem = parseFromValuesOrFunc(enableEditing, row) &&
+      ['modal', 'row'].includes(editDisplayMode!) && (
+        <MRT_ActionMenuItem
+          icon={<EditIcon />}
+          key={'edit'}
+          label={localization.edit}
+          onClick={handleEdit}
+          table={table}
+        />
+      );
+    if (editItem) items.push(editItem);
+    const rowActionMenuItems = renderRowActionMenuItems?.({
+      closeMenu: () => setAnchorEl(null),
+      row,
+      staticRowIndex,
+      table,
+    });
+    if (rowActionMenuItems?.length) items.push(...rowActionMenuItems);
+    return items;
+  }, [renderRowActionMenuItems, row, staticRowIndex, table]);
+
+  if (!menuItems.length) return null;
+
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      disableScrollLock
+      onClick={(event) => event.stopPropagation()}
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
+      slotProps={{
+        list: {
+          dense: density === 'compact',
+          sx: {
+            backgroundColor: menuBackgroundColor,
+          },
+        },
+      }}
+      {...rest}
+    >
+      {menuItems}
+    </Menu>
+  );
+};

package/src/components/menus/MRT_ShowHideColumnsMenu.tsx

@@ -0,0 +1,180 @@
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Menu, { type MenuProps } from '@mui/material/Menu';
+import { useMemo, useState } from 'react';
+
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_VisibilityState
+} from '../../types';
+import { getDefaultColumnOrderIds } from '../../utils/displayColumn.utils';
+import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
+
+export interface MRT_ShowHideColumnsMenuProps<TData extends MRT_RowData>
+  extends Partial<MenuProps> {
+  anchorEl: HTMLElement | null;
+  isSubMenu?: boolean;
+  setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
+  anchorEl,
+  setAnchorEl,
+  table,
+  ...rest
+}: MRT_ShowHideColumnsMenuProps<TData>) => {
+  const {
+    getAllColumns,
+    getAllLeafColumns,
+    getCenterLeafColumns,
+    getIsAllColumnsVisible,
+    getIsSomeColumnsPinned,
+    getIsSomeColumnsVisible,
+    getLeftLeafColumns,
+    getRightLeafColumns,
+    getState,
+    initialState,
+    options: {
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableHiding,
+      localization,
+      mrtTheme: { menuBackgroundColor },
+    },
+  } = table;
+  const { columnOrder, columnPinning, density } = getState();
+
+  const handleToggleAllColumns = (value?: boolean) => {
+    const updates =
+      getAllLeafColumns()
+        .filter((column) => column.columnDef.enableHiding !== false)
+        .reduce((acc, column) => {
+          acc[column.id] = value ?? !column.getIsVisible()
+          return acc;
+        }, {} as MRT_VisibilityState);
+
+    table.setColumnVisibility((old) => ({ ...old, ...updates }));
+  };
+
+  const allColumns = useMemo(() => {
+    const columns = getAllColumns();
+    if (
+      columnOrder.length > 0 &&
+      !columns.some((col) => col.columnDef.columnDefType === 'group')
+    ) {
+      return [
+        ...getLeftLeafColumns(),
+        ...Array.from(new Set(columnOrder)).map((colId) =>
+          getCenterLeafColumns().find((col) => col?.id === colId),
+        ),
+        ...getRightLeafColumns(),
+      ].filter(Boolean);
+    }
+    return columns;
+  }, [
+    columnOrder,
+    columnPinning,
+    getAllColumns(),
+    getCenterLeafColumns(),
+    getLeftLeafColumns(),
+    getRightLeafColumns(),
+  ]) as MRT_Column<TData>[];
+
+  const isNestedColumns = allColumns.some(
+    (col) => col.columnDef.columnDefType === 'group',
+  );
+
+  const hasColumnOrderChanged = useMemo(
+    () =>
+      columnOrder.length !== initialState.columnOrder.length ||
+      !columnOrder.every(
+        (column, index) => column === initialState.columnOrder[index],
+      ),
+
+    [columnOrder, initialState.columnOrder],
+  );
+
+  const [hoveredColumn, setHoveredColumn] = useState<MRT_Column<TData> | null>(
+    null,
+  );
+
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      disableScrollLock
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
+      slotProps={{
+        list: {
+          dense: density === 'compact',
+          sx: {
+            backgroundColor: menuBackgroundColor,
+          },
+        },
+      }}
+      {...rest}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          p: '0.5rem',
+          pt: 0,
+        }}
+      >
+        {enableHiding && (
+          <Button
+            disabled={!getIsSomeColumnsVisible()}
+            onClick={() => handleToggleAllColumns(false)}
+          >
+            {localization.hideAll}
+          </Button>
+        )}
+        {enableColumnOrdering && (
+          <Button
+            disabled={!hasColumnOrderChanged}
+            onClick={() =>
+              table.setColumnOrder(
+                getDefaultColumnOrderIds(table.options, true),
+              )
+            }
+          >
+            {localization.resetOrder}
+          </Button>
+        )}
+        {enableColumnPinning && (
+          <Button
+            disabled={!getIsSomeColumnsPinned()}
+            onClick={() => table.resetColumnPinning(true)}
+          >
+            {localization.unpinAll}
+          </Button>
+        )}
+        {enableHiding && (
+          <Button
+            disabled={getIsAllColumnsVisible()}
+            onClick={() => handleToggleAllColumns(true)}
+          >
+            {localization.showAll}
+          </Button>
+        )}
+      </Box>
+      <Divider />
+      {allColumns.map((column, index) => (
+        <MRT_ShowHideColumnsMenuItems
+          allColumns={allColumns}
+          column={column}
+          hoveredColumn={hoveredColumn}
+          isNestedColumns={isNestedColumns}
+          key={`${index}-${column.id}`}
+          setHoveredColumn={setHoveredColumn}
+          table={table}
+        />
+      ))}
+    </Menu>
+  );
+};

package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -0,0 +1,204 @@
+import Box from '@mui/material/Box';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import MenuItem, { type MenuItemProps } from '@mui/material/MenuItem';
+import Switch from '@mui/material/Switch';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import {
+  type Dispatch,
+  type DragEvent,
+  type SetStateAction,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { reorderColumn } from '../../utils/column.utils';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+
+export interface MRT_ShowHideColumnsMenuItemsProps<TData extends MRT_RowData>
+  extends MenuItemProps {
+  allColumns: MRT_Column<TData>[];
+  column: MRT_Column<TData>;
+  hoveredColumn: MRT_Column<TData> | null;
+  isNestedColumns: boolean;
+  setHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
+  allColumns,
+  column,
+  hoveredColumn,
+  isNestedColumns,
+  setHoveredColumn,
+  table,
+  ...rest
+}: MRT_ShowHideColumnsMenuItemsProps<TData>) => {
+  const {
+    getState,
+    options: {
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableHiding,
+      localization,
+      mrtTheme: { draggingBorderColor },
+    },
+    setColumnOrder,
+    setColumnPinning,
+  } = table;
+  const { columnOrder } = getState();
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const switchChecked = column.getIsVisible();
+
+  const handleToggleColumnHidden = (column: MRT_Column<TData>) => {
+    if (columnDefType === 'group') {
+      column?.columns?.forEach?.((childColumn: MRT_Column<TData>) => {
+        childColumn.toggleVisibility(!switchChecked);
+      });
+    } else {
+      column.toggleVisibility();
+    }
+  };
+
+  const menuItemRef = useRef<HTMLElement>(null);
+
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
+    setIsDragging(true);
+    try {
+      e.dataTransfer.setDragImage(menuItemRef.current as HTMLElement, 0, 0);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleDragEnd = (_e: DragEvent<HTMLButtonElement>) => {
+    setIsDragging(false);
+    setHoveredColumn(null);
+    if (hoveredColumn) {
+      const reorderedColumns = reorderColumn(
+        column,
+        hoveredColumn,
+        columnOrder,
+      );
+      setColumnOrder(reorderedColumns);
+      setColumnPinning(({ left = [], right = [] }) => ({
+        left: reorderedColumns.filter((header) => left.includes(header)),
+        right: reorderedColumns.filter((header) => right.includes(header)),
+      }));
+    }
+  };
+
+  const handleDragEnter = (_e: DragEvent) => {
+    if (!isDragging && columnDef.enableColumnOrdering !== false) {
+      setHoveredColumn(column);
+    }
+  };
+
+  if (!columnDef.header || columnDef.visibleInShowHideMenu === false) {
+    return null;
+  }
+
+  return (
+    <>
+      <MenuItem
+        disableRipple
+        onDragEnter={handleDragEnter}
+        ref={menuItemRef as any}
+        {...rest}
+        sx={(theme) => ({
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          my: 0,
+          opacity: isDragging ? 0.5 : 1,
+          outline: isDragging
+            ? `2px dashed ${theme.palette.grey[500]}`
+            : hoveredColumn?.id === column.id
+              ? `2px dashed ${draggingBorderColor}`
+              : 'none',
+          outlineOffset: '-2px',
+          pl: `${(column.depth + 0.5) * 2}rem`,
+          py: '6px',
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        })}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexWrap: 'nowrap',
+            gap: '8px',
+          }}
+        >
+          {columnDefType !== 'group' &&
+            enableColumnOrdering &&
+            !isNestedColumns &&
+            (columnDef.enableColumnOrdering !== false ? (
+              <MRT_GrabHandleButton
+                onDragEnd={handleDragEnd}
+                onDragStart={handleDragStart}
+                table={table}
+              />
+            ) : (
+              <Box sx={{ width: '28px' }} />
+            ))}
+          {enableColumnPinning &&
+            (column.getCanPin() ? (
+              <MRT_ColumnPinningButtons column={column} table={table} />
+            ) : (
+              <Box sx={{ width: '70px' }} />
+            ))}
+          {enableHiding ? (
+            <FormControlLabel
+              checked={switchChecked}
+              control={
+                <Tooltip
+                  {...getCommonTooltipProps()}
+                  title={localization.toggleVisibility}
+                >
+                  <Switch />
+                </Tooltip>
+              }
+              disabled={!column.getCanHide()}
+              label={columnDef.header}
+              onChange={() => handleToggleColumnHidden(column)}
+              slotProps={{
+                typography: {
+                  sx: {
+                    mb: 0,
+                    opacity: columnDefType !== 'display' ? 1 : 0.5,
+                  },
+                },
+              }}
+            />
+          ) : (
+            <Typography sx={{ alignSelf: 'center' }}>
+              {columnDef.header}
+            </Typography>
+          )}
+        </Box>
+      </MenuItem>
+      {column.columns?.map((c: MRT_Column<TData>, i) => (
+        <MRT_ShowHideColumnsMenuItems
+          allColumns={allColumns}
+          column={c}
+          hoveredColumn={hoveredColumn}
+          isNestedColumns={isNestedColumns}
+          key={`${i}-${c.id}`}
+          setHoveredColumn={setHoveredColumn}
+          table={table}
+        />
+      ))}
+    </>
+  );
+};

package/src/components/modals/MRT_EditRowModal.tsx

@@ -0,0 +1,115 @@
+import Dialog, { type DialogProps } from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Stack from '@mui/material/Stack';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_EditActionButtons } from '../buttons/MRT_EditActionButtons';
+import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
+
+export interface MRT_EditRowModalProps<TData extends MRT_RowData>
+  extends Partial<DialogProps> {
+  open: boolean;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_EditRowModal = <TData extends MRT_RowData>({
+  open,
+  table,
+  ...rest
+}: MRT_EditRowModalProps<TData>) => {
+  const {
+    getState,
+    options: {
+      localization,
+      muiCreateRowModalProps,
+      muiEditRowDialogProps,
+      onCreatingRowCancel,
+      onEditingRowCancel,
+      renderCreateRowDialogContent,
+      renderEditRowDialogContent,
+    },
+    setCreatingRow,
+    setEditingRow,
+  } = table;
+  const { creatingRow, editingRow } = getState();
+  const row = (creatingRow ?? editingRow) as MRT_Row<TData>;
+
+  const dialogProps = {
+    ...parseFromValuesOrFunc(muiEditRowDialogProps, { row, table }),
+    ...(creatingRow &&
+      parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })),
+    ...rest,
+  };
+
+  const internalEditComponents = row
+    .getAllCells()
+    .filter((cell) => cell.column.columnDef.columnDefType === 'data')
+    .map((cell) => (
+      <MRT_EditCellTextField
+        cell={cell as any}
+        key={cell.id}
+        table={table as any}
+      />
+    ));
+
+  return (
+    <Dialog
+      fullWidth
+      maxWidth="xs"
+      onClose={(event, reason) => {
+        if (creatingRow) {
+          onCreatingRowCancel?.({ row, table });
+          setCreatingRow(null);
+        } else {
+          onEditingRowCancel?.({ row, table });
+          setEditingRow(null);
+        }
+        row._valuesCache = {} as any; //reset values cache
+        dialogProps.onClose?.(event, reason);
+      }}
+      open={open}
+      {...dialogProps}
+    >
+      {((creatingRow &&
+        renderCreateRowDialogContent?.({
+          internalEditComponents,
+          row,
+          table,
+        })) ||
+        renderEditRowDialogContent?.({
+          internalEditComponents,
+          row,
+          table,
+        })) ?? (
+        <>
+          <DialogTitle sx={{ textAlign: 'center' }}>
+            {localization.edit}
+          </DialogTitle>
+          <DialogContent>
+            <form onSubmit={(e) => e.preventDefault()}>
+              <Stack
+                sx={{
+                  gap: '32px',
+                  paddingTop: '16px',
+                  width: '100%',
+                }}
+              >
+                {internalEditComponents}
+              </Stack>
+            </form>
+          </DialogContent>
+          <DialogActions sx={{ p: '1.25rem' }}>
+            <MRT_EditActionButtons row={row} table={table} variant="text" />
+          </DialogActions>
+        </>
+      )}
+    </Dialog>
+  );
+};

package/src/components/table/MRT_Table.tsx

@@ -0,0 +1,85 @@
+import Table, { type TableProps } from '@mui/material/Table';
+import { useMemo } from 'react';
+
+import { useMRT_ColumnVirtualizer } from '../../hooks/useMRT_ColumnVirtualizer';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseCSSVarId } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { Memo_MRT_TableBody, MRT_TableBody } from '../body/MRT_TableBody';
+import { MRT_TableFooter } from '../footer/MRT_TableFooter';
+import { MRT_TableHead } from '../head/MRT_TableHead';
+
+export interface MRT_TableProps<TData extends MRT_RowData> extends TableProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_Table = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: MRT_TableProps<TData>) => {
+  const {
+    getFlatHeaders,
+    getState,
+    options: {
+      columns,
+      enableStickyHeader,
+      enableTableFooter,
+      enableTableHead,
+      layoutMode,
+      memoMode,
+      muiTableProps,
+      renderCaption,
+    },
+  } = table;
+  const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } =
+    getState();
+
+  const tableProps = {
+    ...parseFromValuesOrFunc(muiTableProps, { table }),
+    ...rest,
+  };
+
+  const Caption = parseFromValuesOrFunc(renderCaption, { table });
+
+  const columnSizeVars = useMemo(() => {
+    const headers = getFlatHeaders();
+    const colSizes: { [key: string]: number } = {};
+    for (let i = 0; i < headers.length; i++) {
+      const header = headers[i];
+      const colSize = header.getSize();
+      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
+    }
+    return colSizes;
+  }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
+
+  const columnVirtualizer = useMRT_ColumnVirtualizer(table);
+
+  const commonTableGroupProps = {
+    columnVirtualizer,
+    table,
+  };
+
+  return (
+    <Table
+      stickyHeader={enableStickyHeader || isFullScreen}
+      {...tableProps}
+      style={{ ...columnSizeVars, ...tableProps?.style }}
+      sx={(theme) => ({
+        borderCollapse: 'separate',
+        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+        position: 'relative',
+        ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
+      })}
+    >
+      {!!Caption && <caption>{Caption}</caption>}
+      {enableTableHead && <MRT_TableHead {...commonTableGroupProps} />}
+      {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
+        <Memo_MRT_TableBody {...commonTableGroupProps} />
+      ) : (
+        <MRT_TableBody {...commonTableGroupProps} />
+      )}
+      {enableTableFooter && <MRT_TableFooter {...commonTableGroupProps} />}
+    </Table>
+  );
+};