@cutting/material-react-table 4.0.0

package/src/components/menus/MRT_ColumnActionMenu.tsx

@@ -0,0 +1,353 @@
+import Menu, { type MenuProps } from '@mui/material/Menu';
+import { type MouseEvent, useState } from 'react';
+
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
+import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
+
+export interface MRT_ColumnActionMenuProps<TData extends MRT_RowData>
+  extends Partial<MenuProps> {
+  anchorEl: HTMLElement | null;
+  header: MRT_Header<TData>;
+  setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
+  anchorEl,
+  header,
+  setAnchorEl,
+  table,
+  ...rest
+}: MRT_ColumnActionMenuProps<TData>) => {
+  const {
+    getAllLeafColumns,
+    getState,
+    options: {
+      columnFilterDisplayMode,
+      columnFilterModeOptions,
+      enableColumnFilterModes,
+      enableColumnFilters,
+      enableColumnPinning,
+      enableColumnResizing,
+      enableGrouping,
+      enableHiding,
+      enableSorting,
+      enableSortingRemoval,
+      icons: {
+        ClearAllIcon,
+        DynamicFeedIcon,
+        FilterListIcon,
+        FilterListOffIcon,
+        PushPinIcon,
+        RestartAltIcon,
+        SortIcon,
+        ViewColumnIcon,
+        VisibilityOffIcon,
+      },
+      localization,
+      mrtTheme: { menuBackgroundColor },
+      renderColumnActionsMenuItems,
+    },
+    refs: { filterInputRefs },
+    setColumnFilterFns,
+    setColumnOrder,
+    setColumnSizingInfo,
+    setShowColumnFilters,
+  } = table;
+  const { column } = header;
+  const { columnDef } = column;
+  const { columnSizing, columnVisibility, density, showColumnFilters } =
+    getState();
+  const columnFilterValue = column.getFilterValue();
+
+  const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
+    useState<HTMLElement | null>(null);
+
+  const handleClearSort = () => {
+    column.clearSorting();
+    setAnchorEl(null);
+  };
+
+  const handleSortAsc = () => {
+    column.toggleSorting(false);
+    setAnchorEl(null);
+  };
+
+  const handleSortDesc = () => {
+    column.toggleSorting(true);
+    setAnchorEl(null);
+  };
+
+  const handleResetColumnSize = () => {
+    setColumnSizingInfo((old) => ({ ...old, isResizingColumn: false }));
+    column.resetSize();
+    setAnchorEl(null);
+  };
+
+  const handleHideColumn = () => {
+    column.toggleVisibility(false);
+    setAnchorEl(null);
+  };
+
+  const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
+    column.pin(pinDirection);
+    setAnchorEl(null);
+  };
+
+  const handleGroupByColumn = () => {
+    column.toggleGrouping();
+    setColumnOrder((old: any) => ['mrt-row-expand', ...old]);
+    setAnchorEl(null);
+  };
+
+  const handleClearFilter = () => {
+    column.setFilterValue(undefined);
+    setAnchorEl(null);
+    if (['empty', 'notEmpty'].includes(columnDef._filterFn)) {
+      setColumnFilterFns((prev) => ({
+        ...prev,
+        [header.id]: allowedColumnFilterOptions?.[0] ?? 'fuzzy',
+      }));
+    }
+  };
+
+  const handleFilterByColumn = () => {
+    setShowColumnFilters(true);
+    queueMicrotask(() => filterInputRefs.current?.[`${column.id}-0`]?.focus());
+    setAnchorEl(null);
+  };
+
+  const handleShowAllColumns = () => {
+    getAllLeafColumns()
+      .filter((col) => col.columnDef.enableHiding !== false)
+      .forEach((col) => col.toggleVisibility(true));
+    setAnchorEl(null);
+  };
+
+  const handleOpenFilterModeMenu = (event: MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    setFilterMenuAnchorEl(event.currentTarget);
+  };
+
+  const isSelectFilter = !!columnDef.filterSelectOptions;
+
+  const allowedColumnFilterOptions =
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
+
+  const showFilterModeSubMenu =
+    enableColumnFilterModes &&
+    columnDef.enableColumnFilterModes !== false &&
+    !isSelectFilter &&
+    (allowedColumnFilterOptions === undefined ||
+      !!allowedColumnFilterOptions?.length);
+
+  const internalColumnMenuItems = [
+    ...(enableSorting && column.getCanSort()
+      ? [
+          enableSortingRemoval !== false && (
+            <MRT_ActionMenuItem
+              disabled={column.getIsSorted() === false}
+              icon={<ClearAllIcon />}
+              key={0}
+              label={localization.clearSort}
+              onClick={handleClearSort}
+              table={table}
+            />
+          ),
+          <MRT_ActionMenuItem
+            disabled={column.getIsSorted() === 'asc'}
+            icon={
+              <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
+            }
+            key={1}
+            label={localization.sortByColumnAsc?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
+            onClick={handleSortAsc}
+            table={table}
+          />,
+          <MRT_ActionMenuItem
+            disabled={column.getIsSorted() === 'desc'}
+            divider={enableColumnFilters || enableGrouping || enableHiding}
+            icon={<SortIcon />}
+            key={2}
+            label={localization.sortByColumnDesc?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
+            onClick={handleSortDesc}
+            table={table}
+          />,
+        ]
+      : []),
+    ...(enableColumnFilters && column.getCanFilter()
+      ? [
+          <MRT_ActionMenuItem
+            disabled={
+              !columnFilterValue ||
+              (Array.isArray(columnFilterValue) &&
+                !columnFilterValue.filter((value) => value).length)
+            }
+            icon={<FilterListOffIcon />}
+            key={3}
+            label={localization.clearFilter}
+            onClick={handleClearFilter}
+            table={table}
+          />,
+          columnFilterDisplayMode === 'subheader' && (
+            <MRT_ActionMenuItem
+              disabled={showColumnFilters && !enableColumnFilterModes}
+              divider={enableGrouping || enableHiding}
+              icon={<FilterListIcon />}
+              key={4}
+              label={localization.filterByColumn?.replace(
+                '{column}',
+                String(columnDef.header),
+              )}
+              onClick={
+                showColumnFilters
+                  ? handleOpenFilterModeMenu
+                  : handleFilterByColumn
+              }
+              onOpenSubMenu={
+                showFilterModeSubMenu ? handleOpenFilterModeMenu : undefined
+              }
+              table={table}
+            />
+          ),
+          showFilterModeSubMenu && (
+            <MRT_FilterOptionMenu
+              anchorEl={filterMenuAnchorEl}
+              header={header}
+              key={5}
+              onSelect={handleFilterByColumn}
+              setAnchorEl={setFilterMenuAnchorEl}
+              table={table}
+            />
+          ),
+        ].filter(Boolean)
+      : []),
+    ...(enableGrouping && column.getCanGroup()
+      ? [
+          <MRT_ActionMenuItem
+            divider={enableColumnPinning}
+            icon={<DynamicFeedIcon />}
+            key={6}
+            label={localization[
+              column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn'
+            ]?.replace('{column}', String(columnDef.header))}
+            onClick={handleGroupByColumn}
+            table={table}
+          />,
+        ]
+      : []),
+    ...(enableColumnPinning && column.getCanPin()
+      ? [
+          <MRT_ActionMenuItem
+            disabled={column.getIsPinned() === 'left' || !column.getCanPin()}
+            icon={<PushPinIcon style={{ transform: 'rotate(90deg)' }} />}
+            key={7}
+            label={localization.pinToLeft}
+            onClick={() => handlePinColumn('left')}
+            table={table}
+          />,
+          <MRT_ActionMenuItem
+            disabled={column.getIsPinned() === 'right' || !column.getCanPin()}
+            icon={<PushPinIcon style={{ transform: 'rotate(-90deg)' }} />}
+            key={8}
+            label={localization.pinToRight}
+            onClick={() => handlePinColumn('right')}
+            table={table}
+          />,
+          <MRT_ActionMenuItem
+            disabled={!column.getIsPinned()}
+            divider={enableHiding}
+            icon={<PushPinIcon />}
+            key={9}
+            label={localization.unpin}
+            onClick={() => handlePinColumn(false)}
+            table={table}
+          />,
+        ]
+      : []),
+    ...(enableColumnResizing && column.getCanResize()
+      ? [
+          <MRT_ActionMenuItem
+            disabled={columnSizing[column.id] === undefined}
+            icon={<RestartAltIcon />}
+            key={10}
+            label={localization.resetColumnSize}
+            onClick={handleResetColumnSize}
+            table={table}
+          />,
+        ]
+      : []),
+    ...(enableHiding
+      ? [
+          <MRT_ActionMenuItem
+            disabled={!column.getCanHide()}
+            icon={<VisibilityOffIcon />}
+            key={11}
+            label={localization.hideColumn?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
+            onClick={handleHideColumn}
+            table={table}
+          />,
+          <MRT_ActionMenuItem
+            disabled={
+              !Object.values(columnVisibility).filter((visible) => !visible)
+                .length
+            }
+            icon={<ViewColumnIcon />}
+            key={12}
+            label={localization.showAllColumns?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
+            onClick={handleShowAllColumns}
+            table={table}
+          />,
+        ]
+      : []),
+  ].filter(Boolean);
+
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      disableScrollLock
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
+      slotProps={{
+        list: {
+          dense: density === 'compact',
+          sx: {
+            backgroundColor: menuBackgroundColor,
+          },
+        },
+      }}
+      {...rest}
+    >
+      {columnDef.renderColumnActionsMenuItems?.({
+        closeMenu: () => setAnchorEl(null),
+        column,
+        internalColumnMenuItems,
+        table,
+      }) ??
+        renderColumnActionsMenuItems?.({
+          closeMenu: () => setAnchorEl(null),
+          column,
+          internalColumnMenuItems,
+          table,
+        }) ??
+        internalColumnMenuItems}
+    </Menu>
+  );
+};

package/src/components/menus/MRT_FilterOptionMenu.tsx

@@ -0,0 +1,293 @@
+import Menu, { type MenuProps } from '@mui/material/Menu';
+import { useMemo } from 'react';
+
+import {
+  type MRT_FilterOption,
+  type MRT_Header,
+  type MRT_InternalFilterOption,
+  type MRT_Localization,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
+
+export const mrtFilterOptions = (
+  localization: MRT_Localization,
+): MRT_InternalFilterOption[] => [
+  {
+    divider: false,
+    label: localization.filterFuzzy,
+    option: 'fuzzy',
+    symbol: '≈',
+  },
+  {
+    divider: false,
+    label: localization.filterContains,
+    option: 'contains',
+    symbol: '*',
+  },
+  {
+    divider: false,
+    label: localization.filterStartsWith,
+    option: 'startsWith',
+    symbol: 'a',
+  },
+  {
+    divider: true,
+    label: localization.filterEndsWith,
+    option: 'endsWith',
+    symbol: 'z',
+  },
+  {
+    divider: false,
+    label: localization.filterEquals,
+    option: 'equals',
+    symbol: '=',
+  },
+  {
+    divider: true,
+    label: localization.filterNotEquals,
+    option: 'notEquals',
+    symbol: '≠',
+  },
+  {
+    divider: false,
+    label: localization.filterBetween,
+    option: 'between',
+    symbol: '⇿',
+  },
+  {
+    divider: true,
+    label: localization.filterBetweenInclusive,
+    option: 'betweenInclusive',
+    symbol: '⬌',
+  },
+  {
+    divider: false,
+    label: localization.filterGreaterThan,
+    option: 'greaterThan',
+    symbol: '>',
+  },
+  {
+    divider: false,
+    label: localization.filterGreaterThanOrEqualTo,
+    option: 'greaterThanOrEqualTo',
+    symbol: '≥',
+  },
+  {
+    divider: false,
+    label: localization.filterLessThan,
+    option: 'lessThan',
+    symbol: '<',
+  },
+  {
+    divider: true,
+    label: localization.filterLessThanOrEqualTo,
+    option: 'lessThanOrEqualTo',
+    symbol: '≤',
+  },
+  {
+    divider: false,
+    label: localization.filterEmpty,
+    option: 'empty',
+    symbol: '∅',
+  },
+  {
+    divider: false,
+    label: localization.filterNotEmpty,
+    option: 'notEmpty',
+    symbol: '!∅',
+  },
+];
+
+const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
+const emptyModes = ['empty', 'notEmpty'];
+const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
+const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
+
+export interface MRT_FilterOptionMenuProps<TData extends MRT_RowData>
+  extends Partial<MenuProps> {
+  anchorEl: HTMLElement | null;
+  header?: MRT_Header<TData>;
+  onSelect?: () => void;
+  setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  setFilterValue?: (filterValue: any) => void;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
+  anchorEl,
+  header,
+  onSelect,
+  setAnchorEl,
+  setFilterValue,
+  table,
+  ...rest
+}: MRT_FilterOptionMenuProps<TData>) => {
+  const {
+    getState,
+    options: {
+      columnFilterModeOptions,
+      globalFilterModeOptions,
+      localization,
+      mrtTheme: { menuBackgroundColor },
+      renderColumnFilterModeMenuItems,
+      renderGlobalFilterModeMenuItems,
+    },
+    setColumnFilterFns,
+    setGlobalFilterFn,
+  } = table;
+  const { density, globalFilterFn } = getState();
+  const { column } = header ?? {};
+  const { columnDef } = column ?? {};
+  const currentFilterValue = column?.getFilterValue();
+
+  let allowedColumnFilterOptions =
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
+
+  if (rangeVariants.includes(columnDef?.filterVariant as string)) {
+    allowedColumnFilterOptions = [
+      ...rangeModes,
+      ...(allowedColumnFilterOptions ?? []),
+    ].filter((option) => rangeModes.includes(option));
+  }
+
+  const internalFilterOptions = useMemo(
+    () =>
+      mrtFilterOptions(localization).filter((filterOption) =>
+        columnDef
+          ? allowedColumnFilterOptions === undefined ||
+            allowedColumnFilterOptions?.includes(filterOption.option)
+          : (!globalFilterModeOptions ||
+              globalFilterModeOptions.includes(filterOption.option)) &&
+            ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option),
+      ),
+    [],
+  );
+
+  const handleSelectFilterMode = (option: MRT_FilterOption) => {
+    const prevFilterMode = columnDef?._filterFn ?? '';
+    if (!header || !column) {
+      // global filter mode
+      setGlobalFilterFn(option);
+    } else if (option !== prevFilterMode) {
+      // column filter mode
+      setColumnFilterFns((prev: { [key: string]: any }) => ({
+        ...prev,
+        [header.id]: option,
+      }));
+
+      // reset filter value and/or perform new filter render
+      if (emptyModes.includes(option)) {
+        // will now be empty/notEmpty filter mode
+        if (
+          currentFilterValue !== ' ' &&
+          !emptyModes.includes(prevFilterMode)
+        ) {
+          column.setFilterValue(' ');
+        } else if (currentFilterValue) {
+          column.setFilterValue(currentFilterValue); // perform new filter render
+        }
+      } else if (
+        columnDef?.filterVariant === 'multi-select' ||
+        arrModes.includes(option as string)
+      ) {
+        // will now be array filter mode
+        if (
+          currentFilterValue instanceof String ||
+          (currentFilterValue as Array<any>)?.length
+        ) {
+          column.setFilterValue([]);
+          setFilterValue?.([]);
+        } else if (currentFilterValue) {
+          column.setFilterValue(currentFilterValue); // perform new filter render
+        }
+      } else if (
+        columnDef?.filterVariant?.includes('range') ||
+        rangeModes.includes(option as MRT_FilterOption)
+      ) {
+        // will now be range filter mode
+        if (
+          !Array.isArray(currentFilterValue) ||
+          (!(currentFilterValue as Array<any>)?.every((v) => v === '') &&
+            !rangeModes.includes(prevFilterMode))
+        ) {
+          column.setFilterValue(['', '']);
+          setFilterValue?.('');
+        } else {
+          column.setFilterValue(currentFilterValue); // perform new filter render
+        }
+      } else {
+        // will now be single value filter mode
+        if (Array.isArray(currentFilterValue)) {
+          column.setFilterValue('');
+          setFilterValue?.('');
+        } else if (
+          currentFilterValue === ' ' &&
+          emptyModes.includes(prevFilterMode)
+        ) {
+          column.setFilterValue(undefined);
+        } else {
+          column.setFilterValue(currentFilterValue); // perform new filter render
+        }
+      }
+    }
+    setAnchorEl(null);
+    onSelect?.();
+  };
+
+  const filterOption =
+    !!header && columnDef ? columnDef._filterFn : globalFilterFn;
+
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      anchorOrigin={{ horizontal: 'right', vertical: 'center' }}
+      disableScrollLock
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
+      slotProps={{
+        list: {
+          dense: density === 'compact',
+          sx: {
+            backgroundColor: menuBackgroundColor,
+          },
+        },
+      }}
+      {...rest}
+    >
+      {(header && column && columnDef
+        ? (columnDef.renderColumnFilterModeMenuItems?.({
+            column: column as any,
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+          }) ??
+          renderColumnFilterModeMenuItems?.({
+            column: column as any,
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+          }))
+        : renderGlobalFilterModeMenuItems?.({
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+          })) ??
+        internalFilterOptions.map(
+          ({ divider, label, option, symbol }, index) => (
+            <MRT_ActionMenuItem
+              divider={divider}
+              icon={symbol}
+              key={index}
+              label={label}
+              onClick={() => handleSelectFilterMode(option as MRT_FilterOption)}
+              selected={option === filterOption}
+              table={table}
+              value={option}
+            />
+          ),
+        )}
+    </Menu>
+  );
+};