@kissesses/mantine-react-table-open 9.0.3

package/src/components/head/MRT_TableHeadCell.tsx

@@ -0,0 +1,322 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TableHeadCell.module.css';
+
+import {
+  type CSSProperties,
+  type DragEventHandler,
+  type ReactNode,
+  type RefObject,
+  useMemo,
+  useState,
+} from 'react';
+
+import { Flex, TableTh, type TableThProps, useDirection } from '@mantine/core';
+import { useHover } from '@mantine/hooks';
+
+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';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseCSSVarId } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
+
+interface Props<TData extends MRT_RowData> extends TableThProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  header: MRT_Header<TData>;
+  renderedHeaderIndex?: number;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCell = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  header,
+  renderedHeaderIndex = 0,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const direction = useDirection();
+  const {
+    getState,
+    options: {
+      columnFilterDisplayMode,
+      columnResizeDirection,
+      columnResizeMode,
+      enableColumnActions,
+      enableColumnDragging,
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableGrouping,
+      enableHeaderActionsHoverReveal,
+      enableMultiSort,
+      layoutMode,
+      mantineTableHeadCellProps,
+    },
+    refs: { tableHeadCellRefs },
+    setHoveredColumn,
+  } = table;
+  const { columnSizingInfo, draggingColumn, grouping, hoveredColumn } =
+    getState();
+  const { column } = header;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const arg = { column, table };
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(mantineTableHeadCellProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineTableHeadCellProps, arg),
+    ...rest,
+  };
+
+  const widthStyles: CSSProperties = {
+    minWidth: `max(calc(var(--header-${parseCSSVarId(
+      header?.id,
+    )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
+    width: `calc(var(--header-${parseCSSVarId(header.id)}-size) * 1px)`,
+  };
+  if (layoutMode === 'grid') {
+    widthStyles.flex = `${
+      [0, false].includes(columnDef.grow!)
+        ? 0
+        : `var(--header-${parseCSSVarId(header.id)}-size)`
+    } 0 auto`;
+  } else if (layoutMode === 'grid-no-grow') {
+    widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
+  }
+
+  const isColumnPinned =
+    enableColumnPinning &&
+    columnDef.columnDefType !== 'group' &&
+    column.getIsPinned();
+
+  const isDraggingColumn = draggingColumn?.id === column.id;
+  const isHoveredColumn = hoveredColumn?.id === column.id;
+
+  const { hovered: isHoveredHeadCell, ref: isHoveredHeadCellRef } =
+    useHover<HTMLTableCellElement>();
+
+  const [isOpenedColumnActions, setIsOpenedColumnActions] = useState(false);
+
+  const columnActionsEnabled =
+    (enableColumnActions || columnDef.enableColumnActions) &&
+    columnDef.enableColumnActions !== false;
+
+  const showColumnButtons =
+    !enableHeaderActionsHoverReveal ||
+    isOpenedColumnActions ||
+    (isHoveredHeadCell &&
+      !table.getVisibleFlatColumns().find((column) => column.getIsResizing()));
+
+  const showDragHandle =
+    enableColumnDragging !== false &&
+    columnDef.enableColumnDragging !== false &&
+    (enableColumnDragging ||
+      (enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
+      (enableGrouping &&
+        columnDef.enableGrouping !== false &&
+        !grouping.includes(column.id))) &&
+    showColumnButtons;
+
+  const headerPL = useMemo(() => {
+    let pl = 0;
+    if (column.getCanSort()) pl++;
+    // Only add padding for buttons if they will actually be displayed
+    if (showColumnButtons && (columnActionsEnabled || showDragHandle))
+      pl += 1.75;
+    if (showDragHandle) pl += 1.25;
+    return pl;
+  }, [showColumnButtons, showDragHandle, columnActionsEnabled]);
+
+  const handleDragEnter: DragEventHandler<HTMLTableCellElement> = (_e) => {
+    if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
+      setHoveredColumn(null);
+    }
+    if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
+      setHoveredColumn(
+        columnDef.enableColumnOrdering !== false ? column : null,
+      );
+    }
+  };
+
+  const headerElement =
+    columnDef?.Header instanceof Function
+      ? columnDef?.Header?.({
+          column,
+          header,
+          table,
+        })
+      : (columnDef?.Header ?? (columnDef.header as ReactNode));
+
+  return (
+    <TableTh
+      colSpan={header.colSpan}
+      data-column-pinned={isColumnPinned || undefined}
+      data-dragging-column={isDraggingColumn || undefined}
+      data-first-right-pinned={
+        (isColumnPinned === 'right' &&
+          column.getIsFirstColumn(isColumnPinned)) ||
+        undefined
+      }
+      data-hovered-column-target={isHoveredColumn || undefined}
+      data-index={renderedHeaderIndex}
+      data-last-left-pinned={
+        (isColumnPinned === 'left' && column.getIsLastColumn(isColumnPinned)) ||
+        undefined
+      }
+      data-resizing={
+        (columnResizeMode === 'onChange' &&
+          columnSizingInfo?.isResizingColumn === column.id &&
+          columnResizeDirection) ||
+        undefined
+      }
+      {...tableCellProps}
+      __vars={{
+        '--mrt-table-cell-left':
+          isColumnPinned === 'left'
+            ? `${column.getStart(isColumnPinned)}`
+            : undefined,
+        '--mrt-table-cell-right':
+          isColumnPinned === 'right'
+            ? `${column.getAfter(isColumnPinned)}`
+            : undefined,
+      }}
+      align={
+        columnDefType === 'group'
+          ? 'center'
+          : direction.dir === 'rtl'
+            ? 'right'
+            : 'left'
+      }
+      className={clsx(
+        classes.root,
+        layoutMode?.startsWith('grid') && classes['root-grid'],
+        enableMultiSort && column.getCanSort() && classes['root-no-select'],
+        columnVirtualizer && classes['root-virtualized'],
+        tableCellProps?.className,
+      )}
+      onDragEnter={handleDragEnter}
+      ref={(node: HTMLTableCellElement | null) => {
+        if (node) {
+          tableHeadCellRefs.current[column.id] = node;
+
+          if (typeof isHoveredHeadCellRef === 'function') {
+            isHoveredHeadCellRef(node);
+          } else if (isHoveredHeadCellRef) {
+            (
+              isHoveredHeadCellRef as RefObject<HTMLTableCellElement | null>
+            ).current = node;
+          }
+
+          if (columnDefType !== 'group') {
+            columnVirtualizer?.measureElement?.(node);
+          }
+        }
+      }}
+      style={(theme) => ({
+        ...widthStyles,
+        ...parseFromValuesOrFunc(tableCellProps?.style, theme),
+      })}
+    >
+      {header.isPlaceholder
+        ? null
+        : (tableCellProps.children ?? (
+            <Flex
+              className={clsx(
+                'mrt-table-head-cell-content',
+                classes.content,
+                (columnDefType === 'group' ||
+                  tableCellProps?.align === 'center') &&
+                  classes['content-center'],
+                tableCellProps?.align === 'right' && classes['content-right'],
+                column.getCanResize() && classes['content-spaced'],
+              )}
+            >
+              <Flex
+                __vars={{
+                  '--mrt-table-head-cell-labels-padding-left': `${headerPL}`,
+                }}
+                className={clsx(
+                  'mrt-table-head-cell-labels',
+                  classes.labels,
+                  column.getCanSort() &&
+                    columnDefType !== 'group' &&
+                    classes['labels-sortable'],
+                  tableCellProps?.align === 'right'
+                    ? classes['labels-right']
+                    : tableCellProps?.align === 'center' &&
+                        classes['labels-center'],
+                  columnDefType === 'data' && classes['labels-data'],
+                )}
+                onClick={column.getToggleSortingHandler()}
+              >
+                <Flex
+                  className={clsx(
+                    'mrt-table-head-cell-content-wrapper',
+                    classes['content-wrapper'],
+                    columnDefType === 'data' &&
+                      classes['content-wrapper-hidden-overflow'],
+                    (columnDef.header?.length ?? 0) < 20 &&
+                      classes['content-wrapper-nowrap'],
+                  )}
+                >
+                  {headerElement}
+                </Flex>
+                {column.getCanFilter() &&
+                  (column.getIsFiltered() || showColumnButtons) && (
+                    <MRT_TableHeadCellFilterLabel
+                      header={header}
+                      table={table}
+                    />
+                  )}
+                {column.getCanSort() &&
+                  (column.getIsSorted() || showColumnButtons) && (
+                    <MRT_TableHeadCellSortLabel header={header} table={table} />
+                  )}
+              </Flex>
+              {columnDefType !== 'group' && (
+                <Flex
+                  className={clsx(
+                    'mrt-table-head-cell-content-actions',
+                    classes['content-actions'],
+                  )}
+                >
+                  {showDragHandle && (
+                    <MRT_TableHeadCellGrabHandle
+                      column={column}
+                      table={table}
+                      tableHeadCellRef={{
+                        current: tableHeadCellRefs.current[column.id],
+                      }}
+                    />
+                  )}
+                  {columnActionsEnabled && showColumnButtons && (
+                    <MRT_ColumnActionMenu
+                      header={header}
+                      onChange={setIsOpenedColumnActions}
+                      opened={isOpenedColumnActions}
+                      table={table}
+                    />
+                  )}
+                </Flex>
+              )}
+              {column.getCanResize() && (
+                <MRT_TableHeadCellResizeHandle header={header} table={table} />
+              )}
+            </Flex>
+          ))}
+      {columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (
+        <MRT_TableHeadCellFilterContainer header={header} table={table} />
+      )}
+    </TableTh>
+  );
+};

package/src/components/head/MRT_TableHeadCellFilterContainer.module.css

@@ -0,0 +1,5 @@
+.filter-mode-label {
+  white-space: nowrap;
+  margin-top: 4px;
+  font-size: 10px;
+}

package/src/components/head/MRT_TableHeadCellFilterContainer.tsx

@@ -0,0 +1,147 @@
+import classes from './MRT_TableHeadCellFilterContainer.module.css';
+
+import { useRef } from 'react';
+
+import {
+  ActionIcon,
+  Collapse,
+  Flex,
+  type FlexProps,
+  Menu,
+  Text,
+  Tooltip,
+} from '@mantine/core';
+
+import { localizedFilterOption } from '../../fns/filterFns';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
+import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
+import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
+import { MRT_FilterTextInput } from '../inputs/MRT_FilterTextInput';
+import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
+
+interface Props<TData extends MRT_RowData> extends FlexProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: {
+      columnFilterDisplayMode,
+      columnFilterModeOptions,
+      enableColumnFilterModes,
+      icons: { IconFilterCog },
+      localization,
+    },
+    refs: { filterInputRefs },
+  } = table;
+  const { showColumnFilters } = getState();
+  const { column } = header;
+  const { columnDef } = column;
+
+  const currentFilterOption = columnDef._filterFn;
+  const allowedColumnFilterOptions =
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
+  const isCollapseOpen =
+    showColumnFilters || columnFilterDisplayMode === 'popover';
+const collapseRef = useRef<HTMLDivElement | null>(null);
+
+  const showChangeModeButton =
+    enableColumnFilterModes &&
+    columnDef.enableColumnFilterModes !== false &&
+    (allowedColumnFilterOptions === undefined ||
+      !!allowedColumnFilterOptions?.length);
+
+  return (
+    <Collapse
+      expanded={isCollapseOpen}
+      renderRoot={({ ref, style, ...rootProps }) => (
+        <div
+          {...rootProps}
+          ref={(element) => {
+            if (typeof ref === 'function') {
+              ref(element);
+            } else if (ref) {
+              ref.current = element;
+            }
+            collapseRef.current = element;
+          }}
+          style={{
+            ...style,
+            overflow: isCollapseOpen ? 'visible' : style?.overflow,
+          }}
+        />
+      )}
+    >
+      <Flex direction="column" {...rest}>
+        <Flex align="flex-end">
+          {columnDef.filterVariant === 'checkbox' ? (
+            <MRT_FilterCheckbox column={column} table={table} />
+          ) : columnDef.filterVariant === 'range-slider' ? (
+            <MRT_FilterRangeSlider header={header} table={table} />
+          ) : ['date-range', 'range'].includes(columnDef.filterVariant ?? '') ||
+            ['between', 'betweenInclusive', 'inNumberRange'].includes(
+              columnDef._filterFn,
+            ) ? (
+            <MRT_FilterRangeFields header={header} table={table} />
+          ) : (
+            <MRT_FilterTextInput header={header} table={table} />
+          )}
+          {showChangeModeButton && (
+            <Menu withinPortal={columnFilterDisplayMode !== 'popover'}>
+              <Tooltip
+                label={localization.changeFilterMode}
+                position="bottom-start"
+                withinPortal
+              >
+                <Menu.Target>
+                  <ActionIcon
+                    aria-label={localization.changeFilterMode}
+                    color="gray"
+                    size="md"
+                    variant="subtle"
+                  >
+                    <IconFilterCog />
+                  </ActionIcon>
+                </Menu.Target>
+              </Tooltip>
+              <MRT_FilterOptionMenu
+                header={header}
+                onSelect={() =>
+                  setTimeout(
+                    () => filterInputRefs.current[`${column.id}-0`]?.focus(),
+                    100,
+                  )
+                }
+                table={table}
+              />
+            </Menu>
+          )}
+        </Flex>
+        {showChangeModeButton ? (
+          <Text
+            c="dimmed"
+            className={classes['filter-mode-label']}
+            component="label"
+          >
+            {localization.filterMode.replace(
+              '{filterType}',
+              localizedFilterOption(localization, currentFilterOption),
+            )}
+          </Text>
+        ) : null}
+      </Flex>
+    </Collapse>
+  );
+};

package/src/components/head/MRT_TableHeadCellFilterLabel.module.css

@@ -0,0 +1,14 @@
+.root {
+  transition: all 150ms ease;
+  --ai-size: var(--ai-size-sm);
+  --ai-bg: transparent;
+  --ai-hover: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-6)
+  );
+  --ai-hover-color: var(--mantine-color-bright);
+  color: var(--mantine-color-bright);
+  &[data-active] {
+    color: var(--mantine-primary-color-filled);
+  }
+}

package/src/components/head/MRT_TableHeadCellFilterLabel.tsx

@@ -0,0 +1,171 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TableHeadCellFilterLabel.module.css';
+
+import { type MouseEvent, useState } from 'react';
+
+import {
+  ActionIcon,
+  type ActionIconProps,
+  Popover,
+  Tooltip,
+  Transition,
+} from '@mantine/core';
+
+import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
+
+import { localizedFilterOption } from '../../fns/filterFns';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { dataVariable } from '../../utils/style.utils';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    options: {
+      columnFilterDisplayMode,
+      icons: { IconFilter },
+      localization,
+    },
+    refs: { filterInputRefs },
+    setShowColumnFilters,
+  } = table;
+  const { column } = header;
+  const { columnDef } = column;
+
+  const filterValue = column.getFilterValue();
+
+  const [popoverOpened, setPopoverOpened] = useState(false);
+
+  const isFilterActive =
+    (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
+    (!!filterValue && !Array.isArray(filterValue));
+
+  const isRangeFilter =
+    columnDef.filterVariant === 'range' ||
+    columnDef.filterVariant === 'date-range' ||
+    ['between', 'betweenInclusive', 'inNumberRange'].includes(
+      columnDef._filterFn,
+    );
+  const currentFilterOption = columnDef._filterFn;
+  const filterValueFn =
+    columnDef.filterTooltipValueFn || ((value) => value as string);
+  type FilterValueType = Parameters<typeof filterValueFn>[0];
+  const filterTooltip =
+    columnFilterDisplayMode === 'popover' && !isFilterActive
+      ? localization.filterByColumn?.replace(
+          '{column}',
+          String(columnDef.header),
+        )
+      : localization.filteringByColumn
+          .replace('{column}', String(columnDef.header))
+          .replace(
+            '{filterType}',
+            localizedFilterOption(localization, currentFilterOption),
+          )
+          .replace(
+            '{filterValue}',
+            `"${
+              Array.isArray(column.getFilterValue())
+                ? (
+                    column.getFilterValue() as [
+                      FilterValueType,
+                      FilterValueType,
+                    ]
+                  )
+                    .map((v) => filterValueFn(v))
+                    .join(
+                      `" ${isRangeFilter ? localization.and : localization.or} "`,
+                    )
+                : filterValueFn(column.getFilterValue())
+            }"`,
+          )
+          .replace('" "', '');
+
+  return (
+    <>
+      <Popover
+        keepMounted={columnDef.filterVariant === 'range-slider'}
+        onChange={setPopoverOpened}
+        onClose={() => setPopoverOpened(false)}
+        opened={popoverOpened}
+        position="top"
+        shadow="xl"
+        width={360}
+        withinPortal
+      >
+        <Transition
+          mounted={
+            columnFilterDisplayMode === 'popover' ||
+            (!!column.getFilterValue() && !isRangeFilter) ||
+            (isRangeFilter &&
+              (!!(column.getFilterValue() as [any, any])?.[0] ||
+                !!(column.getFilterValue() as [any, any])?.[1]))
+          }
+          transition="scale"
+        >
+          {() => (
+            <Popover.Target>
+              <Tooltip
+                disabled={popoverOpened}
+                label={filterTooltip}
+                multiline
+                w={filterTooltip.length > 40 ? 300 : undefined}
+                withinPortal
+              >
+                <ActionIcon
+                  aria-label={filterTooltip}
+                  className={clsx(
+                    'mrt-table-head-cell-filter-label-icon',
+                    classes.root,
+                  )}
+                  size={18}
+                  {...dataVariable('active', isFilterActive)}
+                  onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                    event.stopPropagation();
+                    if (columnFilterDisplayMode === 'popover') {
+                      setPopoverOpened((opened) => !opened);
+                    } else {
+                      setShowColumnFilters(true);
+                    }
+                    setTimeout(() => {
+                      const input = filterInputRefs.current[`${column.id}-0`];
+                      input?.focus();
+                      input?.select();
+                    }, 100);
+                  }}
+                  {...rest}
+                >
+                  <IconFilter size="100%" />
+                </ActionIcon>
+              </Tooltip>
+            </Popover.Target>
+          )}
+        </Transition>
+        {columnFilterDisplayMode === 'popover' && (
+          <Popover.Dropdown
+            onClick={(event) => event.stopPropagation()}
+            onKeyDown={(event) =>
+              event.key === 'Enter' && setPopoverOpened(false)
+            }
+            onMouseDown={(event) => event.stopPropagation()}
+          >
+            <MRT_TableHeadCellFilterContainer header={header} table={table} />
+          </Popover.Dropdown>
+        )}
+      </Popover>
+    </>
+  );
+};