@cutting/material-react-table 4.0.0

package/src/components/head/MRT_TableHeadCell.tsx

@@ -0,0 +1,352 @@
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import { type Theme } from '@mui/material/styles';
+import TableCell, { type TableCellProps } from '@mui/material/TableCell';
+import { type DragEvent, useCallback, useMemo } from 'react';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { cellKeyboardShortcuts } from '../../utils/cell.utils';
+import { getCommonMRTCellStyles } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
+import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
+import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
+import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
+import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
+import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
+
+export interface MRT_TableHeadCellProps<TData extends MRT_RowData>
+  extends TableCellProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  header: MRT_Header<TData>;
+  staticColumnIndex?: number;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCell = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  header,
+  staticColumnIndex,
+  table,
+  ...rest
+}: MRT_TableHeadCellProps<TData>) => {
+  const theme = useTheme();
+  const {
+    getState,
+    options: {
+      columnFilterDisplayMode,
+      columnResizeDirection,
+      columnResizeMode,
+      enableColumnActions,
+      enableColumnDragging,
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableGrouping,
+      enableKeyboardShortcuts,
+      enableMultiSort,
+      layoutMode,
+      mrtTheme: { draggingBorderColor },
+      muiTableHeadCellProps,
+    },
+    refs: { tableHeadCellRefs },
+    setHoveredColumn,
+  } = table;
+  const {
+    columnSizingInfo,
+    density,
+    draggingColumn,
+    grouping,
+    hoveredColumn,
+    showColumnFilters,
+  } = getState();
+  const { column } = header;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
+      column,
+      table,
+    }),
+    ...rest,
+  };
+
+  const isColumnPinned =
+    enableColumnPinning &&
+    columnDef.columnDefType !== 'group' &&
+    column.getIsPinned();
+
+  const showColumnActions =
+    (enableColumnActions || columnDef.enableColumnActions) &&
+    columnDef.enableColumnActions !== false;
+
+  const showDragHandle =
+    enableColumnDragging !== false &&
+    columnDef.enableColumnDragging !== false &&
+    (enableColumnDragging ||
+      (enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
+      (enableGrouping &&
+        columnDef.enableGrouping !== false &&
+        !grouping.includes(column.id)));
+
+  const headerPL = useMemo(() => {
+    let pl = 0;
+    if (column.getCanSort()) pl += 1;
+    if (showColumnActions) pl += 1.75;
+    if (showDragHandle) pl += 1.5;
+    return pl;
+  }, [showColumnActions, showDragHandle]);
+
+  const draggingBorders = useMemo(() => {
+    const showResizeBorder =
+      columnSizingInfo.isResizingColumn === column.id &&
+      columnResizeMode === 'onChange' &&
+      !header.subHeaders.length;
+
+    const borderStyle = showResizeBorder
+      ? `2px solid ${draggingBorderColor} !important`
+      : draggingColumn?.id === column.id
+        ? `1px dashed ${theme.palette.grey[500]}`
+        : hoveredColumn?.id === column.id
+          ? `2px dashed ${draggingBorderColor}`
+          : undefined;
+
+    if (showResizeBorder) {
+      return columnResizeDirection === 'ltr'
+        ? { borderRight: borderStyle }
+        : { borderLeft: borderStyle };
+    }
+    const draggingBorders = borderStyle
+      ? {
+          borderLeft: borderStyle,
+          borderRight: borderStyle,
+          borderTop: borderStyle,
+        }
+      : undefined;
+
+    return draggingBorders;
+  }, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
+
+  const handleDragEnter = (_e: DragEvent) => {
+    if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
+      setHoveredColumn(null);
+    }
+    if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
+      setHoveredColumn(
+        columnDef.enableColumnOrdering !== false ? column : null,
+      );
+    }
+  };
+
+  const handleDragOver = (e: DragEvent) => {
+    if (columnDef.enableColumnOrdering !== false) {
+      e.preventDefault();
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onKeyDown?.(event);
+    cellKeyboardShortcuts({
+      cellValue: header.column.columnDef.header,
+      event,
+      header,
+      table,
+    });
+  };
+
+  const handleRef = useCallback(
+    (node: HTMLTableCellElement) => {
+      if (node) {
+        if (tableHeadCellRefs.current) {
+          tableHeadCellRefs.current[column.id] = node;
+        }
+        if (columnDefType !== 'group') {
+          columnVirtualizer?.measureElement?.(node);
+        }
+      }
+    },
+    [column.id, columnDefType, columnVirtualizer, tableHeadCellRefs],
+  );
+
+  const HeaderElement =
+    parseFromValuesOrFunc(columnDef.Header, {
+      column,
+      header,
+      table,
+    }) ?? columnDef.header;
+
+  return (
+    <TableCell
+      align={
+        columnDefType === 'group'
+          ? 'center'
+          : theme.direction === 'rtl'
+            ? 'right'
+            : 'left'
+      }
+      aria-sort={
+        column.getIsSorted()
+          ? column.getIsSorted() === 'asc'
+            ? 'ascending'
+            : 'descending'
+          : 'none'
+      }
+      colSpan={header.colSpan}
+      data-can-sort={column.getCanSort() || undefined}
+      data-index={staticColumnIndex}
+      data-pinned={!!isColumnPinned || undefined}
+      data-sort={column.getIsSorted() || undefined}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      ref={handleRef}
+      tabIndex={enableKeyboardShortcuts ? 0 : undefined}
+      {...tableCellProps}
+      onKeyDown={handleKeyDown}
+      sx={(theme: Theme) => ({
+        '& :hover': {
+          '.MuiButtonBase-root': {
+            opacity: 1,
+          },
+        },
+        flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined,
+        fontWeight: 'bold',
+        overflow: 'visible',
+        p:
+          density === 'compact'
+            ? '0.5rem'
+            : density === 'comfortable'
+              ? columnDefType === 'display'
+                ? '0.75rem'
+                : '1rem'
+              : columnDefType === 'display'
+                ? '1rem 1.25rem'
+                : '1.5rem',
+        pb:
+          columnDefType === 'display'
+            ? 0
+            : showColumnFilters || density === 'compact'
+              ? '0.4rem'
+              : '0.6rem',
+        pt:
+          columnDefType === 'group' || density === 'compact'
+            ? '0.25rem'
+            : density === 'comfortable'
+              ? '.75rem'
+              : '1.25rem',
+        userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
+        verticalAlign: 'top',
+        ...getCommonMRTCellStyles({
+          column,
+          header,
+          table,
+          tableCellProps,
+          theme,
+        }),
+        ...draggingBorders,
+      })}
+    >
+      {header.isPlaceholder
+        ? null
+        : (tableCellProps.children ?? (
+            <Box
+              className="Mui-TableHeadCell-Content"
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                flexDirection:
+                  tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
+                justifyContent:
+                  columnDefType === 'group' ||
+                  tableCellProps?.align === 'center'
+                    ? 'center'
+                    : column.getCanResize()
+                      ? 'space-between'
+                      : 'flex-start',
+                position: 'relative',
+                width: '100%',
+              }}
+            >
+              <Box
+                className="Mui-TableHeadCell-Content-Labels"
+                onClick={column.getToggleSortingHandler()}
+                sx={{
+                  alignItems: 'center',
+                  cursor:
+                    column.getCanSort() && columnDefType !== 'group'
+                      ? 'pointer'
+                      : undefined,
+                  display: 'flex',
+                  flexDirection:
+                    tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
+                  overflow: columnDefType === 'data' ? 'hidden' : undefined,
+                  pl:
+                    tableCellProps?.align === 'center'
+                      ? `${headerPL}rem`
+                      : undefined,
+                }}
+              >
+                <Box
+                  className="Mui-TableHeadCell-Content-Wrapper"
+                  sx={{
+                    '&:hover': {
+                      textOverflow: 'clip',
+                    },
+                    minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
+                    overflow: columnDefType === 'data' ? 'hidden' : undefined,
+                    textOverflow: 'ellipsis',
+                    whiteSpace:
+                      (columnDef.header?.length ?? 0) < 20
+                        ? 'nowrap'
+                        : 'normal',
+                  }}
+                >
+                  {HeaderElement}
+                </Box>
+                {column.getCanFilter() && (
+                  <MRT_TableHeadCellFilterLabel header={header} table={table} />
+                )}
+                {column.getCanSort() && (
+                  <MRT_TableHeadCellSortLabel header={header} table={table} />
+                )}
+              </Box>
+              {columnDefType !== 'group' && (
+                <Box
+                  className="Mui-TableHeadCell-Content-Actions"
+                  sx={{
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {showDragHandle && (
+                    <MRT_TableHeadCellGrabHandle
+                      column={column}
+                      table={table}
+                      tableHeadCellRef={{
+                        current: tableHeadCellRefs.current?.[column.id]!,
+                      }}
+                    />
+                  )}
+                  {showColumnActions && (
+                    <MRT_TableHeadCellColumnActionsButton
+                      header={header}
+                      table={table}
+                    />
+                  )}
+                </Box>
+              )}
+              {column.getCanResize() && (
+                <MRT_TableHeadCellResizeHandle header={header} table={table} />
+              )}
+            </Box>
+          ))}
+      {columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (
+        <MRT_TableHeadCellFilterContainer header={header} table={table} />
+      )}
+    </TableCell>
+  );
+};

package/src/components/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -0,0 +1,97 @@
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { type MouseEvent, useState } from 'react';
+
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
+
+export interface MRT_TableHeadCellColumnActionsButtonProps<
+  TData extends MRT_RowData,
+> extends IconButtonProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCellColumnActionsButton = <
+  TData extends MRT_RowData,
+>({
+  header,
+  table,
+  ...rest
+}: MRT_TableHeadCellColumnActionsButtonProps<TData>) => {
+  const {
+    options: {
+      icons: { MoreVertIcon },
+      localization,
+      muiColumnActionsButtonProps,
+    },
+  } = table;
+  const { column } = header;
+  const { columnDef } = column;
+
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+
+  const iconButtonProps = {
+    ...parseFromValuesOrFunc(muiColumnActionsButtonProps, {
+      column,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiColumnActionsButtonProps, {
+      column,
+      table,
+    }),
+    ...rest,
+  };
+
+  return (
+    <>
+      <Tooltip
+        {...getCommonTooltipProps('top')}
+        title={iconButtonProps?.title ?? localization.columnActions}
+      >
+        <IconButton
+          aria-label={localization.columnActions}
+          onClick={handleClick}
+          size="small"
+          {...iconButtonProps}
+          sx={(theme) => ({
+            '&:hover': {
+              opacity: 1,
+            },
+            height: '2rem',
+            m: '-8px -4px',
+            opacity: 0.3,
+            transition: 'all 150ms',
+            width: '2rem',
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
+          })}
+          title={undefined}
+        >
+          {iconButtonProps?.children ?? (
+            <MoreVertIcon style={{ transform: 'scale(0.9)' }} />
+          )}
+        </IconButton>
+      </Tooltip>
+      {anchorEl && (
+        <MRT_ColumnActionMenu
+          anchorEl={anchorEl}
+          header={header}
+          setAnchorEl={setAnchorEl}
+          table={table}
+        />
+      )}
+    </>
+  );
+};

package/src/components/head/MRT_TableHeadCellFilterContainer.tsx

@@ -0,0 +1,53 @@
+import Collapse, { type CollapseProps } from '@mui/material/Collapse';
+
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { getColumnFilterInfo } from '../../utils/column.utils';
+import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
+import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
+import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
+import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
+
+export interface MRT_TableHeadCellFilterContainerProps<
+  TData extends MRT_RowData,
+> extends CollapseProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: MRT_TableHeadCellFilterContainerProps<TData>) => {
+  const {
+    getState,
+    options: { columnFilterDisplayMode },
+  } = table;
+  const { showColumnFilters } = getState();
+  const { column } = header;
+  const { columnDef } = column;
+  const { isRangeFilter } = getColumnFilterInfo({ header, table });
+
+  return (
+    <Collapse
+      in={showColumnFilters || columnFilterDisplayMode === 'popover'}
+      mountOnEnter
+      unmountOnExit
+      {...rest}
+    >
+      {columnDef.filterVariant === 'checkbox' ? (
+        <MRT_FilterCheckbox column={column} table={table} />
+      ) : columnDef.filterVariant === 'range-slider' ? (
+        <MRT_FilterRangeSlider header={header} table={table} />
+      ) : isRangeFilter ? (
+        <MRT_FilterRangeFields header={header} table={table} />
+      ) : (
+        <MRT_FilterTextField header={header} table={table} />
+      )}
+    </Collapse>
+  );
+};

package/src/components/head/MRT_TableHeadCellFilterLabel.tsx

@@ -0,0 +1,179 @@
+import Box from '@mui/material/Box';
+import Grow from '@mui/material/Grow';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
+import Popover from '@mui/material/Popover';
+import Tooltip from '@mui/material/Tooltip';
+import { type MouseEvent, useState } from 'react';
+
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import {
+  getColumnFilterInfo,
+  useDropdownOptions,
+} from '../../utils/column.utils';
+import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
+
+export interface MRT_TableHeadCellFilterLabelProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
+  header,
+  table,
+  ...rest
+}: MRT_TableHeadCellFilterLabelProps<TData>) => {
+  const {
+    options: {
+      columnFilterDisplayMode,
+      icons: { FilterAltIcon },
+      localization,
+    },
+    refs: { filterInputRefs },
+    setShowColumnFilters,
+  } = table;
+  const { column } = header;
+  const { columnDef } = column;
+
+  const filterValue = column.getFilterValue() as [string, string] | string;
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const {
+    currentFilterOption,
+    isMultiSelectFilter,
+    isRangeFilter,
+    isSelectFilter,
+  } = getColumnFilterInfo({ header, table });
+
+  const dropdownOptions = useDropdownOptions({ header, table });
+
+  const getSelectLabel = (index?: number) =>
+    getValueAndLabel(
+      dropdownOptions?.find(
+        (option) =>
+          getValueAndLabel(option).value ===
+          (index !== undefined ? filterValue[index] : filterValue),
+      ),
+    ).label;
+
+  const isFilterActive =
+    (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
+    (!!filterValue && !Array.isArray(filterValue));
+
+  const filterTooltip =
+    columnFilterDisplayMode === 'popover' && !isFilterActive
+      ? localization.filterByColumn?.replace(
+          '{column}',
+          String(columnDef.header),
+        )
+      : localization.filteringByColumn
+          .replace('{column}', String(columnDef.header))
+          .replace(
+            '{filterType}',
+            currentFilterOption
+              ? localization[
+                  `filter${
+                    currentFilterOption.charAt(0).toUpperCase() +
+                    currentFilterOption.slice(1)
+                  }` as keyof typeof localization
+                ]
+              : '',
+          )
+          .replace(
+            '{filterValue}',
+            `"${
+              Array.isArray(filterValue)
+                ? (filterValue as [string, string])
+                    .map((value, index) =>
+                      isMultiSelectFilter ? getSelectLabel(index) : value,
+                    )
+                    .join(
+                      `" ${isRangeFilter ? localization.and : localization.or} "`,
+                    )
+                : isSelectFilter
+                  ? getSelectLabel()
+                  : (filterValue as string)
+            }"`,
+          )
+          .replace('" "', '');
+
+  return (
+    <>
+      <Grow
+        in={
+          columnFilterDisplayMode === 'popover' ||
+          (!!filterValue && !isRangeFilter) ||
+          (isRangeFilter && (!!filterValue?.[0] || !!filterValue?.[1]))
+        }
+        unmountOnExit
+      >
+        <Box component="span" sx={{ flex: '0 0' }}>
+          <Tooltip placement="top" title={filterTooltip}>
+            <IconButton
+              disableRipple
+              onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                if (columnFilterDisplayMode === 'popover') {
+                  setAnchorEl(event.currentTarget);
+                } else {
+                  setShowColumnFilters(true);
+                }
+                queueMicrotask(() => {
+                  filterInputRefs.current?.[`${column.id}-0`]?.focus?.();
+                  filterInputRefs.current?.[`${column.id}-0`]?.select?.();
+                });
+                event.stopPropagation();
+              }}
+              size="small"
+              {...rest}
+              sx={(theme) => ({
+                height: '16px',
+                ml: '4px',
+                opacity: isFilterActive ? 1 : 0.3,
+                p: '8px',
+                transform: 'scale(0.75)',
+                transition: 'all 150ms ease-in-out',
+                width: '16px',
+                ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+              })}
+            >
+              <FilterAltIcon />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      </Grow>
+      {columnFilterDisplayMode === 'popover' && (
+        <Popover
+          anchorEl={anchorEl}
+          anchorOrigin={{
+            horizontal: 'center',
+            vertical: 'top',
+          }}
+          disableScrollLock
+          onClick={(event) => event.stopPropagation()}
+          onClose={(event) => {
+            //@ts-expect-error
+            event.stopPropagation();
+            setAnchorEl(null);
+          }}
+          onKeyDown={(event) => event.key === 'Enter' && setAnchorEl(null)}
+          open={!!anchorEl}
+          slotProps={{ paper: { sx: { overflow: 'visible' } } }}
+          transformOrigin={{
+            horizontal: 'center',
+            vertical: 'bottom',
+          }}
+        >
+          <Box sx={{ p: '1rem' }}>
+            <MRT_TableHeadCellFilterContainer header={header} table={table} />
+          </Box>
+        </Popover>
+      )}
+    </>
+  );
+};