@novastera-oss/material-react-table 4.0.0-beta.7

package/src/components/head/MRT_TableHeadCellGrabHandle.tsx

@@ -0,0 +1,91 @@
+import { type DragEvent, type RefObject } from 'react';
+import { type IconButtonProps } from '@mui/material/IconButton';
+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,96 @@
+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';
+
+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={[
+          () => ({
+            borderRadius: '2px',
+            borderWidth: '2px',
+            height: '24px',
+            touchAction: 'none',
+            transform: 'translateX(4px)',
+            transition: column.getIsResizing()
+              ? undefined
+              : 'all 150ms ease-in-out',
+            userSelect: 'none',
+            zIndex: 4,
+          }),
+          ...(Array.isArray(rest?.sx) ? rest.sx : [rest?.sx]),
+        ]}
+      />
+    </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';
+
+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
+          IconComponent={
+            !isSorted
+              ? (props) => (
+                  <SyncAltIcon
+                    {...props}
+                    direction={direction}
+                    style={{
+                      transform: 'rotate(-90deg) scaleX(0.9) translateX(-1px)',
+                    }}
+                  />
+                )
+              : ArrowDownwardIcon
+          }
+          active
+          aria-label={sortTooltip}
+          direction={direction}
+          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',
+            }),
+            ...(Array.isArray(rest?.sx) ? rest.sx : [rest?.sx]),
+          ]}
+        />
+      </Badge>
+    </Tooltip>
+  );
+};

package/src/components/head/MRT_TableHeadRow.tsx

@@ -0,0 +1,94 @@
+import TableRow, { type TableRowProps } from '@mui/material/TableRow';
+import { alpha } from '@mui/material/styles';
+import { MRT_TableHeadCell } from './MRT_TableHeadCell';
+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';
+
+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,
+        }),
+        ...(Array.isArray(tableRowProps?.sx)
+          ? tableRowProps.sx
+          : [tableRowProps?.sx]),
+      ]}
+    >
+      {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,195 @@
+import {
+  type ChangeEvent,
+  type FocusEvent,
+  type KeyboardEvent,
+  useState,
+} from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
+import { type TextFieldProps } from '@mui/material/TextField';
+import {
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { getValueAndLabel, parseFromValuesOrFunc, resolveSlotProps } 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 })}</>;
+  }
+
+  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}
+      slotProps={{
+        ...textFieldProps.slotProps,
+        input: (ownerState: any) =>
+          resolveSlotProps(
+            textFieldProps.slotProps?.input,
+            textFieldProps.variant !== 'outlined'
+              ? { disableUnderline: editDisplayMode === 'table' }
+              : null,
+            ownerState,
+          ),
+        select: (ownerState: any) =>
+          resolveSlotProps(
+            textFieldProps.slotProps?.select,
+            { MenuProps: { disableScrollLock: true } },
+            ownerState,
+          ),
+        htmlInput: (ownerState: any) =>
+          resolveSlotProps(
+            textFieldProps.slotProps?.htmlInput,
+            { autoComplete: 'off' },
+            ownerState,
+          ),
+      }}
+      onBlur={handleBlur}
+      onChange={handleChange}
+      onClick={(e) => {
+        e.stopPropagation();
+        textFieldProps?.onClick?.(e);
+      }}
+      onKeyDown={handleEnterKeyDown}
+      onCompositionStart={() => setCompletesComposition(false)}
+      onCompositionEnd={() => setCompletesComposition(true)}
+    >
+      {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,94 @@
+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={[
+              {
+                height: '2.5rem',
+                width: '2.5rem',
+              },
+              ...(Array.isArray(checkboxProps?.sx)
+                ? checkboxProps.sx
+                : [checkboxProps?.sx]),
+            ]}
+          />
+        }
+        disableTypography
+        label={checkboxProps.title ?? filterLabel}
+        sx={{ color: 'text.secondary', fontWeight: 'normal', mt: '-4px' }}
+        title={undefined}
+      />
+    </Tooltip>
+  );
+};