@cutting/material-react-table 4.0.0

package/src/components/head/MRT_TableHeadCellGrabHandle.tsx

@@ -0,0 +1,92 @@
+import { type IconButtonProps } from '@mui/material/IconButton';
+import { type DragEvent, type RefObject } from 'react';
+
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { reorderColumn } from '../../utils/column.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+
+export interface MRT_TableHeadCellGrabHandleProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  column: MRT_Column<TData>;
+  table: MRT_TableInstance<TData>;
+  tableHeadCellRef: RefObject<HTMLTableCellElement | null>;
+}
+
+export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
+  column,
+  table,
+  tableHeadCellRef,
+  ...rest
+}: MRT_TableHeadCellGrabHandleProps<TData>) => {
+  const {
+    getState,
+    options: { enableColumnOrdering, muiColumnDragHandleProps },
+    setColumnOrder,
+    setColumnPinning,
+    setDraggingColumn,
+    setHoveredColumn,
+  } = table;
+  const { columnDef } = column;
+  const { columnOrder, draggingColumn, hoveredColumn } = getState();
+
+  const iconButtonProps = {
+    ...parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiColumnDragHandleProps, {
+      column,
+      table,
+    }),
+    ...rest,
+  };
+
+  const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
+    iconButtonProps?.onDragStart?.(event);
+    setDraggingColumn(column);
+    try {
+      event.dataTransfer.setDragImage(
+        tableHeadCellRef.current as HTMLElement,
+        0,
+        0,
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
+    iconButtonProps?.onDragEnd?.(event);
+    if (hoveredColumn?.id === 'drop-zone') {
+      column.toggleGrouping();
+    } else if (
+      enableColumnOrdering &&
+      hoveredColumn &&
+      hoveredColumn?.id !== draggingColumn?.id
+    ) {
+      const reorderedColumns = reorderColumn(
+        column,
+        hoveredColumn as MRT_Column<TData>,
+        columnOrder,
+      );
+      setColumnOrder(reorderedColumns);
+      setColumnPinning(({ left = [], right = [] }) => ({
+        left: reorderedColumns.filter((header) => left.includes(header)),
+        right: reorderedColumns.filter((header) => right.includes(header)),
+      }));
+    }
+    setDraggingColumn(null);
+    setHoveredColumn(null);
+  };
+
+  return (
+    <MRT_GrabHandleButton
+      {...iconButtonProps}
+      onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
+      table={table}
+    />
+  );
+};

package/src/components/head/MRT_TableHeadCellResizeHandle.tsx

@@ -0,0 +1,97 @@
+import Box from '@mui/material/Box';
+import Divider, { type DividerProps } from '@mui/material/Divider';
+
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_TableHeadCellResizeHandleProps<TData extends MRT_RowData>
+  extends DividerProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: MRT_TableHeadCellResizeHandleProps<TData>) => {
+  const {
+    getState,
+    options: { columnResizeDirection, columnResizeMode },
+    setColumnSizingInfo,
+  } = table;
+  const { density } = getState();
+  const { column } = header;
+
+  const handler = header.getResizeHandler();
+
+  const mx =
+    density === 'compact'
+      ? '-8px'
+      : density === 'comfortable'
+        ? '-16px'
+        : '-24px';
+
+  const lr = column.columnDef.columnDefType === 'display' ? '4px' : '0';
+
+  return (
+    <Box
+      className="Mui-TableHeadCell-ResizeHandle-Wrapper"
+      onDoubleClick={() => {
+        setColumnSizingInfo((old) => ({
+          ...old,
+          isResizingColumn: false,
+        }));
+        column.resetSize();
+      }}
+      onMouseDown={handler}
+      onTouchStart={handler}
+      style={{
+        transform:
+          column.getIsResizing() && columnResizeMode === 'onEnd'
+            ? `translateX(${
+                (columnResizeDirection === 'rtl' ? -1 : 1) *
+                (getState().columnSizingInfo.deltaOffset ?? 0)
+              }px)`
+            : undefined,
+      }}
+      sx={(theme) => ({
+        '&:active > hr': {
+          backgroundColor: theme.palette.info.main,
+          opacity:
+            header.subHeaders.length || columnResizeMode === 'onEnd' ? 1 : 0,
+        },
+        cursor: 'col-resize',
+        left: columnResizeDirection === 'rtl' ? lr : undefined,
+        ml: columnResizeDirection === 'rtl' ? mx : undefined,
+        mr: columnResizeDirection === 'ltr' ? mx : undefined,
+        position: 'absolute',
+        px: '4px',
+        right: columnResizeDirection === 'ltr' ? lr : undefined,
+      })}
+    >
+      <Divider
+        className="Mui-TableHeadCell-ResizeHandle-Divider"
+        flexItem
+        orientation="vertical"
+        sx={(theme) => ({
+          borderRadius: '2px',
+          borderWidth: '2px',
+          height: '24px',
+          touchAction: 'none',
+          transform: 'translateX(4px)',
+          transition: column.getIsResizing()
+            ? undefined
+            : 'all 150ms ease-in-out',
+          userSelect: 'none',
+          zIndex: 4,
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        })}
+      />
+    </Box>
+  );
+};

package/src/components/head/MRT_TableHeadCellSortLabel.tsx

@@ -0,0 +1,102 @@
+import Badge from '@mui/material/Badge';
+import TableSortLabel, {
+  type TableSortLabelProps,
+} from '@mui/material/TableSortLabel';
+import Tooltip from '@mui/material/Tooltip';
+
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_TableHeadCellSortLabelProps<TData extends MRT_RowData>
+  extends TableSortLabelProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: MRT_TableHeadCellSortLabelProps<TData>) => {
+  const {
+    getState,
+    options: {
+      icons: { ArrowDownwardIcon, SyncAltIcon },
+      localization,
+    },
+  } = table;
+  const { column } = header;
+  const { columnDef } = column;
+  const { isLoading, showSkeletons, sorting } = getState();
+
+  const isSorted = !!column.getIsSorted();
+
+  const sortTooltip =
+    isLoading || showSkeletons
+      ? ''
+      : column.getIsSorted()
+        ? column.getIsSorted() === 'desc'
+          ? localization.sortedByColumnDesc.replace(
+              '{column}',
+              columnDef.header,
+            )
+          : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
+        : column.getNextSortingOrder() === 'desc'
+          ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
+          : localization.sortByColumnAsc.replace('{column}', columnDef.header);
+
+  const direction = isSorted
+    ? (column.getIsSorted() as 'asc' | 'desc')
+    : undefined;
+
+  return (
+    <Tooltip placement="top" title={sortTooltip}>
+      <Badge
+        badgeContent={sorting.length > 1 ? column.getSortIndex() + 1 : 0}
+        overlap="circular"
+      >
+        <TableSortLabel
+          active
+          aria-label={sortTooltip}
+          direction={direction}
+          IconComponent={
+            !isSorted
+              ? (props) => (
+                  <SyncAltIcon
+                    {...props}
+                    direction={direction}
+                    style={{
+                      transform: 'rotate(-90deg) scaleX(0.9) translateX(-1px)',
+                    }}
+                  />
+                )
+              : ArrowDownwardIcon
+          }
+          onClick={(e) => {
+            e.stopPropagation();
+            header.column.getToggleSortingHandler()?.(e);
+          }}
+          {...rest}
+          sx={(theme) => ({
+            '.MuiTableSortLabel-icon': {
+              color: `${
+                theme.palette.mode === 'dark'
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary
+              } !important`,
+            },
+            flex: '0 0',
+            opacity: isSorted ? 1 : 0.3,
+            transition: 'all 150ms ease-in-out',
+            width: '3ch',
+            ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+          })}
+        />
+      </Badge>
+    </Tooltip>
+  );
+};

package/src/components/head/MRT_TableHeadRow.tsx

@@ -0,0 +1,91 @@
+import { alpha } from '@mui/material/styles';
+import TableRow, { type TableRowProps } from '@mui/material/TableRow';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_Header,
+  type MRT_HeaderGroup,
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_TableHeadCell } from './MRT_TableHeadCell';
+
+export interface MRT_TableHeadRowProps<TData extends MRT_RowData>
+  extends TableRowProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  headerGroup: MRT_HeaderGroup<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadRow = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  headerGroup,
+  table,
+  ...rest
+}: MRT_TableHeadRowProps<TData>) => {
+  const {
+    options: {
+      enableStickyHeader,
+      layoutMode,
+      mrtTheme: { baseBackgroundColor },
+      muiTableHeadRowProps,
+    },
+  } = table;
+
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
+
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(muiTableHeadRowProps, {
+      headerGroup,
+      table,
+    }),
+    ...rest,
+  };
+
+  return (
+    <TableRow
+      {...tableRowProps}
+      sx={(theme) => ({
+        backgroundColor: baseBackgroundColor,
+        boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
+        display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+        position:
+          enableStickyHeader && layoutMode === 'semantic'
+            ? 'sticky'
+            : 'relative',
+        top: 0,
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
+      })}
+    >
+      {virtualPaddingLeft ? (
+        <th style={{ display: 'flex', width: virtualPaddingLeft }} />
+      ) : null}
+      {(virtualColumns ?? headerGroup.headers).map(
+        (headerOrVirtualHeader, staticColumnIndex) => {
+          let header = headerOrVirtualHeader as MRT_Header<TData>;
+          if (columnVirtualizer) {
+            staticColumnIndex = (headerOrVirtualHeader as MRT_VirtualItem)
+              .index;
+            header = headerGroup.headers[staticColumnIndex];
+          }
+
+          return header ? (
+            <MRT_TableHeadCell
+              columnVirtualizer={columnVirtualizer}
+              header={header}
+              key={header.id}
+              staticColumnIndex={staticColumnIndex}
+              table={table}
+            />
+          ) : null;
+        },
+      )}
+      {virtualPaddingRight ? (
+        <th style={{ display: 'flex', width: virtualPaddingRight }} />
+      ) : null}
+    </TableRow>
+  );
+};

package/src/components/inputs/MRT_EditCellTextField.tsx

@@ -0,0 +1,190 @@
+import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
+import { type TextFieldProps } from '@mui/material/TextField';
+import {
+  type ChangeEvent,
+  type FocusEvent,
+  type KeyboardEvent,
+  useState,
+} from 'react';
+
+import {
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { getTextFieldSlotProps } from '../../utils/slotProps.utils';
+import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_EditCellTextFieldProps<TData extends MRT_RowData>
+  extends TextFieldProps<'standard'> {
+  cell: MRT_Cell<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_EditCellTextField = <TData extends MRT_RowData>({
+  cell,
+  table,
+  ...rest
+}: MRT_EditCellTextFieldProps<TData>) => {
+  const {
+    getState,
+    options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps },
+    refs: { editInputRefs },
+    setCreatingRow,
+    setEditingCell,
+    setEditingRow,
+  } = table;
+  const { column, row } = cell;
+  const { columnDef } = column;
+  const { creatingRow, editingRow } = getState();
+  const { editSelectOptions, editVariant } = columnDef;
+
+  const isCreating = creatingRow?.id === row.id;
+  const isEditing = editingRow?.id === row.id;
+
+  const [value, setValue] = useState(() => cell.getValue<string>());
+  const [completesComposition, setCompletesComposition] = useState(true);
+
+  const textFieldProps: TextFieldProps = {
+    ...parseFromValuesOrFunc(muiEditTextFieldProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiEditTextFieldProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...rest,
+  };
+
+  const selectOptions = parseFromValuesOrFunc(editSelectOptions, {
+    cell,
+    column,
+    row,
+    table,
+  });
+
+  const isSelectEdit = editVariant === 'select' || textFieldProps?.select;
+
+  const saveInputValueToRowCache = (newValue: string) => {
+    //@ts-expect-error
+    row._valuesCache[column.id] = newValue;
+    if (isCreating) {
+      setCreatingRow(row);
+    } else if (isEditing) {
+      setEditingRow(row);
+    }
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    textFieldProps.onChange?.(event);
+    setValue(event.target.value);
+    if (isSelectEdit) {
+      saveInputValueToRowCache(event.target.value);
+    }
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    textFieldProps.onBlur?.(event);
+    saveInputValueToRowCache(value);
+    setEditingCell(null);
+  };
+
+  const handleEnterKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    textFieldProps.onKeyDown?.(event);
+    if (event.key === 'Enter' && !event.shiftKey && completesComposition) {
+      editInputRefs.current?.[column.id]?.blur();
+    }
+  };
+
+  if (columnDef.Edit) {
+    return <>{columnDef.Edit?.({ cell, column, row, table })}</>;
+  }
+
+  const consumerSlots = getTextFieldSlotProps(textFieldProps.slotProps);
+
+  return (
+    <TextField
+      disabled={parseFromValuesOrFunc(columnDef.enableEditing, row) === false}
+      fullWidth
+      inputRef={(inputRef) => {
+        if (inputRef) {
+          editInputRefs.current![column.id] = isSelectEdit
+            ? inputRef.node
+            : inputRef;
+          if (textFieldProps.inputRef) {
+            textFieldProps.inputRef = inputRef;
+          }
+        }
+      }}
+      label={
+        ['custom', 'modal'].includes(
+          (isCreating ? createDisplayMode : editDisplayMode) as string,
+        )
+          ? columnDef.header
+          : undefined
+      }
+      margin="none"
+      name={column.id}
+      placeholder={
+        !['custom', 'modal'].includes(
+          (isCreating ? createDisplayMode : editDisplayMode) as string,
+        )
+          ? columnDef.header
+          : undefined
+      }
+      select={isSelectEdit}
+      size="small"
+      value={value ?? ''}
+      variant="standard"
+      {...textFieldProps}
+      onBlur={handleBlur}
+      onChange={handleChange}
+      onClick={(e) => {
+        e.stopPropagation();
+        textFieldProps?.onClick?.(e);
+      }}
+      onCompositionEnd={() => setCompletesComposition(true)}
+      onCompositionStart={() => setCompletesComposition(false)}
+      onKeyDown={handleEnterKeyDown}
+      slotProps={{
+        htmlInput: { autoComplete: 'off', ...consumerSlots.htmlInput },
+        input: {
+          ...(textFieldProps.variant !== 'outlined'
+            ? { disableUnderline: editDisplayMode === 'table' }
+            : {}),
+          ...consumerSlots.input,
+          sx: { mb: 0, ...consumerSlots.input?.sx },
+        },
+        select: {
+          MenuProps: { disableScrollLock: true },
+          ...consumerSlots.select,
+        },
+      }}
+    >
+      {textFieldProps.children ??
+        selectOptions?.map((option) => {
+          const { label, value } = getValueAndLabel(option);
+          return (
+            <MenuItem
+              key={value}
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                gap: '0.5rem',
+                m: 0,
+              }}
+              value={value}
+            >
+              {label}
+            </MenuItem>
+          );
+        })}
+    </TextField>
+  );
+};

package/src/components/inputs/MRT_FilterCheckbox.tsx

@@ -0,0 +1,91 @@
+import Checkbox, { type CheckboxProps } from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Tooltip from '@mui/material/Tooltip';
+
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_FilterCheckboxProps<TData extends MRT_RowData>
+  extends CheckboxProps {
+  column: MRT_Column<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
+  column,
+  table,
+  ...rest
+}: MRT_FilterCheckboxProps<TData>) => {
+  const {
+    getState,
+    options: { localization, muiFilterCheckboxProps },
+  } = table;
+  const { density } = getState();
+  const { columnDef } = column;
+
+  const checkboxProps = {
+    ...parseFromValuesOrFunc(muiFilterCheckboxProps, {
+      column,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterCheckboxProps, {
+      column,
+      table,
+    }),
+    ...rest,
+  };
+
+  const filterLabel = localization.filterByColumn?.replace(
+    '{column}',
+    columnDef.header,
+  );
+
+  return (
+    <Tooltip
+      {...getCommonTooltipProps()}
+      title={checkboxProps?.title ?? filterLabel}
+    >
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={column.getFilterValue() === 'true'}
+            color={
+              column.getFilterValue() === undefined ? 'default' : 'primary'
+            }
+            indeterminate={column.getFilterValue() === undefined}
+            size={density === 'compact' ? 'small' : 'medium'}
+            {...checkboxProps}
+            onChange={(e, checked) => {
+              column.setFilterValue(
+                column.getFilterValue() === undefined
+                  ? 'true'
+                  : column.getFilterValue() === 'true'
+                    ? 'false'
+                    : undefined,
+              );
+              checkboxProps?.onChange?.(e, checked);
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+              checkboxProps?.onClick?.(e);
+            }}
+            sx={(theme) => ({
+              height: '2.5rem',
+              width: '2.5rem',
+              ...(parseFromValuesOrFunc(checkboxProps?.sx, theme) as any),
+            })}
+          />
+        }
+        disableTypography
+        label={checkboxProps.title ?? filterLabel}
+        sx={{ color: 'text.secondary', fontWeight: 'normal', mt: '-4px' }}
+        title={undefined}
+      />
+    </Tooltip>
+  );
+};

package/src/components/inputs/MRT_FilterRangeFields.tsx

@@ -0,0 +1,42 @@
+import Box, { type BoxProps } from '@mui/material/Box';
+
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_FilterTextField } from './MRT_FilterTextField';
+
+export interface MRT_FilterRangeFieldsProps<TData extends MRT_RowData>
+  extends BoxProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_FilterRangeFields = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: MRT_FilterRangeFieldsProps<TData>) => {
+  return (
+    <Box
+      {...rest}
+      sx={(theme) => ({
+        display: 'grid',
+        gap: '1rem',
+        gridTemplateColumns: '1fr 1fr',
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+      })}
+    >
+      {[0, 1].map((rangeFilterIndex) => (
+        <MRT_FilterTextField
+          header={header}
+          key={rangeFilterIndex}
+          rangeFilterIndex={rangeFilterIndex}
+          table={table}
+        />
+      ))}
+    </Box>
+  );
+};