@kissesses/mantine-react-table-open 9.0.3

package/src/components/menus/MRT_FilterOptionMenu.tsx

@@ -0,0 +1,274 @@
+import classes from './MRT_FilterOptionMenu.module.css';
+
+import { Fragment, useMemo } from 'react';
+
+import { Menu } from '@mantine/core';
+
+import {
+  type MRT_FilterOption,
+  type MRT_Header,
+  type MRT_InternalFilterOption,
+  type MRT_Localization,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+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', 'range'];
+
+interface Props<TData extends MRT_RowData> {
+  header?: MRT_Header<TData>;
+  onSelect?: () => void;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
+  header,
+  onSelect,
+  table,
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: {
+      columnFilterModeOptions,
+      globalFilterModeOptions,
+      localization,
+      renderColumnFilterModeMenuItems,
+      renderGlobalFilterModeMenuItems,
+    },
+    setColumnFilterFns,
+    setGlobalFilterFn,
+  } = table;
+  const { 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(() => {
+    const filterOptions = mrtFilterOptions(localization).filter(
+      (filterOption) =>
+        columnDef
+          ? allowedColumnFilterOptions === undefined ||
+            allowedColumnFilterOptions?.includes(filterOption.option)
+          : (!globalFilterModeOptions ||
+              globalFilterModeOptions.includes(filterOption.option)) &&
+            ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option),
+    );
+    if (filterOptions[filterOptions.length - 1].divider) {
+      filterOptions[filterOptions.length - 1].divider = false;
+    }
+    return filterOptions;
+  }, [columnDef, globalFilterModeOptions]);
+
+  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([]);
+        } else if (currentFilterValue) {
+          column.setFilterValue(currentFilterValue); // perform new filter render
+        }
+      } else if (
+        rangeVariants.includes(columnDef?.filterVariant as string) ||
+        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(['', '']);
+        } else {
+          column.setFilterValue(currentFilterValue); // perform new filter render
+        }
+      } else {
+        // will now be single value filter mode
+        if (Array.isArray(currentFilterValue)) {
+          column.setFilterValue('');
+        } else if (
+          currentFilterValue === ' ' &&
+          emptyModes.includes(prevFilterMode)
+        ) {
+          column.setFilterValue(undefined);
+        } else {
+          column.setFilterValue(currentFilterValue); // perform new filter render
+        }
+      }
+    }
+    onSelect?.();
+  };
+
+  const filterOption =
+    !!header && columnDef ? columnDef._filterFn : globalFilterFn;
+
+  return (
+    <Menu.Dropdown>
+      {(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) => (
+            <Fragment key={index}>
+              <Menu.Item
+                color={option === filterOption ? 'blue' : undefined}
+                leftSection={<span className={classes.symbol}>{symbol}</span>}
+                onClick={() =>
+                  handleSelectFilterMode(option as MRT_FilterOption)
+                }
+                value={option}
+              >
+                {label}
+              </Menu.Item>
+              {divider && <Menu.Divider />}
+            </Fragment>
+          ),
+        )}
+    </Menu.Dropdown>
+  );
+};

package/src/components/menus/MRT_RowActionMenu.tsx

@@ -0,0 +1,74 @@
+import { type MouseEvent } from 'react';
+
+import { ActionIcon, type ActionIconProps, Menu, Tooltip } from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  handleEdit: (event: MouseEvent) => void;
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_RowActionMenu = <TData extends MRT_RowData>({
+  handleEdit,
+  row,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    options: {
+      editDisplayMode,
+      enableEditing,
+      icons: { IconDots, IconEdit },
+      localization,
+      positionActionsColumn,
+      renderRowActionMenuItems,
+    },
+  } = table;
+
+  return (
+    <Menu
+      closeOnItemClick
+      position={
+        positionActionsColumn === 'first'
+          ? 'bottom-start'
+          : positionActionsColumn === 'last'
+            ? 'bottom-end'
+            : undefined
+      }
+      withinPortal
+    >
+      <Tooltip label={localization.rowActions} openDelay={1000} withinPortal>
+        <Menu.Target>
+          <ActionIcon
+            aria-label={localization.rowActions}
+            color="gray"
+            onClick={(event) => event.stopPropagation()}
+            size="sm"
+            variant="subtle"
+            {...rest}
+          >
+            <IconDots />
+          </ActionIcon>
+        </Menu.Target>
+      </Tooltip>
+      <Menu.Dropdown onClick={(event) => event.stopPropagation()}>
+        {enableEditing && editDisplayMode !== 'table' && (
+          <Menu.Item leftSection={<IconEdit />} onClick={handleEdit}>
+            {localization.edit}
+          </Menu.Item>
+        )}
+        {renderRowActionMenuItems?.({
+          row,
+          table,
+        })}
+      </Menu.Dropdown>
+    </Menu>
+  );
+};

package/src/components/menus/MRT_ShowHideColumnsMenu.module.css

@@ -0,0 +1,10 @@
+.root {
+  max-height: calc(80vh - 100px);
+  overflow-y: auto;
+  .content {
+    padding-top: rem(4px);
+    padding-bottom: rem(4px);
+    gap: rem(8px);
+    justify-content: space-between;
+  }
+}

package/src/components/menus/MRT_ShowHideColumnsMenu.tsx

@@ -0,0 +1,135 @@
+import clsx from 'clsx';
+
+import classes from './MRT_ShowHideColumnsMenu.module.css';
+
+import { useMemo, useState } from 'react';
+
+import { Button, Flex, Menu } from '@mantine/core';
+
+import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
+
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { getDefaultColumnOrderIds } from '../../utils/displayColumn.utils';
+
+interface Props<TData extends MRT_RowData> {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
+  table,
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getAllColumns,
+    getAllLeafColumns,
+    getCenterLeafColumns,
+    getIsAllColumnsVisible,
+    getIsSomeColumnsPinned,
+    getIsSomeColumnsVisible,
+    getLeftLeafColumns,
+    getRightLeafColumns,
+    getState,
+    options: {
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableHiding,
+      localization,
+    },
+  } = table;
+  const { columnOrder, columnPinning } = getState();
+
+  const handleToggleAllColumns = (value?: boolean) => {
+    getAllLeafColumns()
+      .filter((col) => col.columnDef.enableHiding !== false)
+      .forEach((col) => col.toggleVisibility(value));
+  };
+
+  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 [hoveredColumn, setHoveredColumn] = useState<MRT_Column<TData> | null>(
+    null,
+  );
+
+  return (
+    <Menu.Dropdown className={clsx('mrt-show-hide-columns-menu', classes.root)}>
+      <Flex className={classes.content}>
+        {enableHiding && (
+          <Button
+            disabled={!getIsSomeColumnsVisible()}
+            onClick={() => handleToggleAllColumns(false)}
+            variant="subtle"
+          >
+            {localization.hideAll}
+          </Button>
+        )}
+        {enableColumnOrdering && (
+          <Button
+            onClick={() =>
+              table.setColumnOrder(
+                getDefaultColumnOrderIds(table.options as any, true),
+              )
+            }
+            variant="subtle"
+          >
+            {localization.resetOrder}
+          </Button>
+        )}
+        {enableColumnPinning && (
+          <Button
+            disabled={!getIsSomeColumnsPinned()}
+            onClick={() => table.resetColumnPinning(true)}
+            variant="subtle"
+          >
+            {localization.unpinAll}
+          </Button>
+        )}
+        {enableHiding && (
+          <Button
+            disabled={getIsAllColumnsVisible()}
+            onClick={() => handleToggleAllColumns(true)}
+            variant="subtle"
+          >
+            {localization.showAll}
+          </Button>
+        )}
+      </Flex>
+      <Menu.Divider />
+      {allColumns.map((column, index) => (
+        <MRT_ShowHideColumnsMenuItems
+          allColumns={allColumns}
+          column={column}
+          hoveredColumn={hoveredColumn}
+          key={`${index}-${column.id}`}
+          setHoveredColumn={setHoveredColumn}
+          table={table}
+        />
+      ))}
+    </Menu.Dropdown>
+  );
+};

package/src/components/menus/MRT_ShowHideColumnsMenuItems.module.css

@@ -0,0 +1,35 @@
+.root {
+  align-items: center;
+  cursor: default;
+  justify-content: flex-start;
+  opacity: 1;
+  outline: none;
+  padding-left: var(--_column-depth);
+  padding-top: rem(6px);
+  padding-bottom: rem(6);
+  &[data-dragging] {
+    opacity: 0.5;
+    outline: 1px dashed var(--mantine-color-gray-7);
+  }
+  &[data-order-hovered]:not(&[data-dragging]) {
+    outline: 2px dashed var(--_hover-color);
+  }
+}
+.menu {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: rem(8px);
+}
+.grab {
+  width: rem(28px);
+}
+.pin {
+  width: rem(70px);
+}
+.switch {
+  cursor: pointer !important;
+}
+.header {
+  align-self: center;
+}

package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -0,0 +1,170 @@
+import classes from './MRT_ShowHideColumnsMenuItems.module.css';
+
+import {
+  type Dispatch,
+  type DragEvent,
+  type SetStateAction,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  Box,
+  Menu,
+  Switch,
+  Text,
+  Tooltip,
+  useMantineTheme,
+} from '@mantine/core';
+
+import {
+  type MRT_CellValue,
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { reorderColumn } from '../../utils/column.utils';
+import { dataVariable, getPrimaryColor } from '../../utils/style.utils';
+import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+
+interface Props<TData extends MRT_RowData, TValue = MRT_CellValue> {
+  allColumns: MRT_Column<TData>[];
+  column: MRT_Column<TData, TValue>;
+  hoveredColumn: MRT_Column<TData> | null;
+  setHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
+  allColumns,
+  column,
+  hoveredColumn,
+  setHoveredColumn,
+  table,
+}: Props<TData>) => {
+  'use no memo';
+  const theme = useMantineTheme();
+  const {
+    getState,
+    options: {
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableHiding,
+      localization,
+    },
+    setColumnOrder,
+  } = table;
+  const { columnOrder } = getState();
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const switchChecked =
+    (columnDefType !== 'group' && column.getIsVisible()) ||
+    (columnDefType === 'group' &&
+      column.getLeafColumns().some((col) => col.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>(null);
+
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
+    setIsDragging(true);
+    e.dataTransfer.setDragImage(menuItemRef.current as HTMLElement, 0, 0);
+  };
+
+  const handleDragEnd = (_e: DragEvent<HTMLButtonElement>) => {
+    setIsDragging(false);
+    setHoveredColumn(null);
+    if (hoveredColumn) {
+      setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
+    }
+  };
+
+  const handleDragEnter = (_e: DragEvent) => {
+    if (!isDragging && columnDef.enableColumnOrdering !== false) {
+      setHoveredColumn(column);
+    }
+  };
+
+  if (!columnDef.header || columnDef.visibleInShowHideMenu === false) {
+    return null;
+  }
+
+  return (
+    <>
+      <Menu.Item
+        className={classes.root}
+        component="span"
+        onDragEnter={handleDragEnter}
+        ref={menuItemRef as any}
+        style={{
+          '--_column-depth': `${(column.depth + 0.5) * 2}rem`,
+          '--_hover-color': getPrimaryColor(theme),
+        }}
+        {...dataVariable('dragging', isDragging)}
+        {...dataVariable('order-hovered', hoveredColumn?.id === column.id)}
+      >
+        <Box className={classes.menu}>
+          {columnDefType !== 'group' &&
+            enableColumnOrdering &&
+            !allColumns.some(
+              (col) => col.columnDef.columnDefType === 'group',
+            ) &&
+            (columnDef.enableColumnOrdering !== false ? (
+              <MRT_GrabHandleButton
+                onDragEnd={handleDragEnd}
+                onDragStart={handleDragStart}
+                table={table}
+              />
+            ) : (
+              <Box className={classes.grab} />
+            ))}
+          {enableColumnPinning &&
+            (column.getCanPin() ? (
+              <MRT_ColumnPinningButtons column={column} table={table} />
+            ) : (
+              <Box className={classes.pin} />
+            ))}
+          {enableHiding ? (
+            <Tooltip
+              label={localization.toggleVisibility}
+              openDelay={1000}
+              withinPortal
+            >
+              <Switch
+                checked={switchChecked}
+                className={classes.switch}
+                disabled={!column.getCanHide()}
+                label={columnDef.header}
+                onChange={() => handleToggleColumnHidden(column)}
+              />
+            </Tooltip>
+          ) : (
+            <Text className={classes.header}>{columnDef.header}</Text>
+          )}
+        </Box>
+      </Menu.Item>
+      {column.columns?.map((c: MRT_Column<TData>, i) => (
+        <MRT_ShowHideColumnsMenuItems
+          allColumns={allColumns}
+          column={c}
+          hoveredColumn={hoveredColumn}
+          key={`${i}-${c.id}`}
+          setHoveredColumn={setHoveredColumn}
+          table={table}
+        />
+      ))}
+    </>
+  );
+};