@kissesses/mantine-react-table-open 9.0.3

package/src/components/inputs/MRT_GlobalFilterTextInput.tsx

@@ -0,0 +1,141 @@
+import clsx from 'clsx';
+
+import classes from './MRT_GlobalFilterTextInput.module.css';
+
+import { useEffect, useRef, useState } from 'react';
+
+import {
+  ActionIcon,
+  Collapse,
+  Menu,
+  TextInput,
+  type TextInputProps,
+  Tooltip,
+} from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
+
+interface Props<TData extends MRT_RowData> extends TextInputProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_GlobalFilterTextInput = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: {
+      enableGlobalFilterModes,
+      icons: { IconSearch, IconX },
+      localization,
+      mantineSearchTextInputProps,
+      manualFiltering,
+      positionGlobalFilter,
+    },
+    refs: { searchInputRef },
+    setGlobalFilter,
+  } = table;
+  const { globalFilter, showGlobalFilter } = getState();
+
+  const textFieldProps = {
+    ...parseFromValuesOrFunc(mantineSearchTextInputProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const isMounted = useRef(false);
+  const [searchValue, setSearchValue] = useState(globalFilter ?? '');
+
+  const [debouncedSearchValue] = useDebouncedValue(
+    searchValue,
+    manualFiltering ? 500 : 250,
+  );
+
+  useEffect(() => {
+    setGlobalFilter(debouncedSearchValue || undefined);
+  }, [debouncedSearchValue]);
+
+  const handleClear = () => {
+    setSearchValue('');
+    setGlobalFilter(undefined);
+  };
+
+  useEffect(() => {
+    if (isMounted.current) {
+      if (globalFilter === undefined) {
+        handleClear();
+      } else {
+        setSearchValue(globalFilter);
+      }
+    }
+    isMounted.current = true;
+  }, [globalFilter]);
+
+  return (
+    <Collapse className={classes.collapse} expanded={showGlobalFilter}>
+      {enableGlobalFilterModes && (
+        <Menu withinPortal>
+          <Menu.Target>
+            <ActionIcon
+              aria-label={localization.changeSearchMode}
+              color="gray"
+              size="sm"
+              variant="transparent"
+            >
+              <IconSearch />
+            </ActionIcon>
+          </Menu.Target>
+          <MRT_FilterOptionMenu onSelect={handleClear} table={table} />
+        </Menu>
+      )}
+      <TextInput
+        leftSection={!enableGlobalFilterModes && <IconSearch />}
+        mt={0}
+        mx={positionGlobalFilter !== 'left' ? 'mx' : undefined}
+        onChange={(event) => setSearchValue(event.target.value)}
+        placeholder={localization.search}
+        rightSection={
+          <ActionIcon
+            aria-label={localization.clearSearch}
+            color="gray"
+            disabled={!searchValue?.length}
+            hidden={!searchValue}
+            onClick={handleClear}
+            size="sm"
+            style={{
+              visibility: !searchValue ? 'hidden' : undefined,
+            }}
+            variant="transparent"
+          >
+            <Tooltip label={localization.clearSearch} withinPortal>
+              <IconX />
+            </Tooltip>
+          </ActionIcon>
+        }
+        value={searchValue ?? ''}
+        variant="filled"
+        {...textFieldProps}
+        className={clsx(
+          'mrt-global-filter-text-input',
+          classes.root,
+          textFieldProps?.className,
+        )}
+        ref={(node) => {
+          if (node) {
+            searchInputRef.current = node;
+            if (textFieldProps?.ref) {
+              // @ts-ignore
+              textFieldProps.ref = node;
+            }
+          }
+        }}
+      />
+    </Collapse>
+  );
+};

package/src/components/inputs/MRT_SelectCheckbox.tsx

@@ -0,0 +1,137 @@
+import { type MouseEvent } from 'react';
+
+import {
+  Checkbox,
+  type CheckboxProps,
+  Radio,
+  type RadioProps,
+  Switch,
+  type SwitchProps,
+  Tooltip,
+} from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import {
+  getIsRowSelected,
+  getMRT_RowSelectionHandler,
+  getMRT_SelectAllHandler,
+} from '../../utils/row.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends CheckboxProps {
+  renderedRowIndex?: number;
+  row?: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
+  renderedRowIndex = 0,
+  row,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: {
+      enableMultiRowSelection,
+      localization,
+      mantineSelectAllCheckboxProps,
+      mantineSelectCheckboxProps,
+      selectAllMode,
+      selectDisplayMode,
+    },
+  } = table;
+  const { density, isLoading } = getState();
+
+  const selectAll = !row;
+
+  const allRowsSelected = selectAll
+    ? selectAllMode === 'page'
+      ? table.getIsAllPageRowsSelected()
+      : table.getIsAllRowsSelected()
+    : undefined;
+
+  const isChecked = selectAll
+    ? allRowsSelected
+    : getIsRowSelected({ row, table });
+
+  const checkboxProps = {
+    ...(selectAll
+      ? parseFromValuesOrFunc(mantineSelectAllCheckboxProps, { table })
+      : parseFromValuesOrFunc(mantineSelectCheckboxProps, {
+          row,
+          table,
+        })),
+    ...rest,
+  };
+
+  const onSelectionChange = row
+    ? getMRT_RowSelectionHandler({
+        renderedRowIndex,
+        row,
+        table,
+      })
+    : undefined;
+
+  const onSelectAllChange = getMRT_SelectAllHandler({ table });
+
+  const commonProps = {
+    'aria-label': selectAll
+      ? localization.toggleSelectAll
+      : localization.toggleSelectRow,
+    checked: isChecked,
+    disabled:
+      isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
+    onChange: (event) => {
+      event.stopPropagation();
+      if (selectAll) {
+        onSelectAllChange(event);
+      } else {
+        onSelectionChange!(event);
+      }
+    },
+    size: density === 'xs' ? 'sm' : 'md',
+    ...checkboxProps,
+    onClick: (e: MouseEvent<HTMLInputElement>) => {
+      e.stopPropagation();
+      checkboxProps?.onClick?.(e);
+    },
+    title: undefined,
+  } as CheckboxProps & RadioProps & SwitchProps;
+
+  return (
+    <Tooltip
+      label={
+        checkboxProps?.title ??
+        (selectAll
+          ? localization.toggleSelectAll
+          : localization.toggleSelectRow)
+      }
+      openDelay={1000}
+      withinPortal
+    >
+      <span>
+        {selectDisplayMode === 'switch' ? (
+          <Switch {...commonProps} />
+        ) : selectDisplayMode === 'radio' ||
+          enableMultiRowSelection === false ? (
+          <Radio {...commonProps} />
+        ) : (
+          <Checkbox
+            indeterminate={
+              !isChecked && selectAll
+                ? table.getIsSomeRowsSelected()
+                : row?.getIsSomeSelected() && row.getCanSelectSubRows()
+            }
+            {...commonProps}
+          />
+        )}
+      </span>
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,7 @@
+.left {
+  transform: rotate(90deg);
+}
+
+.right {
+  transform: rotate(-90deg);
+}

package/src/components/menus/MRT_ColumnActionMenu.tsx

@@ -0,0 +1,287 @@
+import classes from './MRT_ColumnActionMenu.module.css';
+
+import { ActionIcon, Menu, type MenuProps, Tooltip } from '@mantine/core';
+
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends MenuProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: {
+      columnFilterDisplayMode,
+      enableColumnFilters,
+      enableColumnPinning,
+      enableColumnResizing,
+      enableGrouping,
+      enableHiding,
+      enableSorting,
+      enableSortingRemoval,
+      icons: {
+        IconArrowAutofitContent,
+        IconBoxMultiple,
+        IconClearAll,
+        IconColumns,
+        IconDotsVertical,
+        IconEyeOff,
+        IconFilter,
+        IconFilterOff,
+        IconPinned,
+        IconPinnedOff,
+        IconSortAscending,
+        IconSortDescending,
+      },
+      localization,
+      mantineColumnActionsButtonProps,
+      renderColumnActionsMenuItems,
+    },
+    refs: { filterInputRefs },
+    setColumnOrder,
+    setColumnSizingInfo,
+    setShowColumnFilters,
+    toggleAllColumnsVisible,
+  } = table;
+  const { column } = header;
+  const { columnDef } = column;
+  const { columnSizing, columnVisibility } = getState();
+
+  const arg = { column, table };
+  const actionIconProps = {
+    ...parseFromValuesOrFunc(mantineColumnActionsButtonProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineColumnActionsButtonProps, arg),
+  };
+
+  const handleClearSort = () => {
+    column.clearSorting();
+  };
+
+  const handleSortAsc = () => {
+    column.toggleSorting(false);
+  };
+
+  const handleSortDesc = () => {
+    column.toggleSorting(true);
+  };
+
+  const handleResetColumnSize = () => {
+    setColumnSizingInfo((old) => ({ ...old, isResizingColumn: false }));
+    column.resetSize();
+  };
+
+  const handleHideColumn = () => {
+    column.toggleVisibility(false);
+  };
+
+  const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
+    column.pin(pinDirection);
+  };
+
+  const handleGroupByColumn = () => {
+    column.toggleGrouping();
+    setColumnOrder((old: any) => ['mrt-row-expand', ...old]);
+  };
+
+  const handleClearFilter = () => {
+    column.setFilterValue('');
+  };
+
+  const handleFilterByColumn = () => {
+    setShowColumnFilters(true);
+    setTimeout(() => filterInputRefs.current[`${column.id}-0`]?.focus(), 100);
+  };
+
+  const handleShowAllColumns = () => {
+    toggleAllColumnsVisible(true);
+  };
+
+  const internalColumnMenuItems = (
+    <>
+      {enableSorting && column.getCanSort() && (
+        <>
+          {enableSortingRemoval !== false && (
+            <Menu.Item
+              disabled={!column.getIsSorted()}
+              leftSection={<IconClearAll />}
+              onClick={handleClearSort}
+            >
+              {localization.clearSort}
+            </Menu.Item>
+          )}
+          <Menu.Item
+            disabled={column.getIsSorted() === 'asc'}
+            leftSection={<IconSortAscending />}
+            onClick={handleSortAsc}
+          >
+            {localization.sortByColumnAsc?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
+          </Menu.Item>
+          <Menu.Item
+            disabled={column.getIsSorted() === 'desc'}
+            leftSection={<IconSortDescending />}
+            onClick={handleSortDesc}
+          >
+            {localization.sortByColumnDesc?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
+          </Menu.Item>
+          {(enableColumnFilters || enableGrouping || enableHiding) && (
+            <Menu.Divider key={3} />
+          )}
+        </>
+      )}
+      {enableColumnFilters &&
+        columnFilterDisplayMode !== 'popover' &&
+        column.getCanFilter() && (
+          <>
+            <Menu.Item
+              disabled={!column.getFilterValue()}
+              leftSection={<IconFilterOff />}
+              onClick={handleClearFilter}
+            >
+              {localization.clearFilter}
+            </Menu.Item>
+            <Menu.Item
+              leftSection={<IconFilter />}
+              onClick={handleFilterByColumn}
+            >
+              {localization.filterByColumn?.replace(
+                '{column}',
+                String(columnDef.header),
+              )}
+            </Menu.Item>
+            {(enableGrouping || enableHiding) && <Menu.Divider key={2} />}
+          </>
+        )}
+      {enableGrouping && column.getCanGroup() && (
+        <>
+          <Menu.Item
+            leftSection={<IconBoxMultiple />}
+            onClick={handleGroupByColumn}
+          >
+            {localization[
+              column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn'
+            ]?.replace('{column}', String(columnDef.header))}
+          </Menu.Item>
+          {enableColumnPinning && <Menu.Divider />}
+        </>
+      )}
+      {enableColumnPinning && column.getCanPin() && (
+        <>
+          <Menu.Item
+            disabled={column.getIsPinned() === 'left' || !column.getCanPin()}
+            leftSection={<IconPinned className={classes.left} />}
+            onClick={() => handlePinColumn('left')}
+          >
+            {localization.pinToLeft}
+          </Menu.Item>
+          <Menu.Item
+            disabled={column.getIsPinned() === 'right' || !column.getCanPin()}
+            leftSection={<IconPinned className={classes.right} />}
+            onClick={() => handlePinColumn('right')}
+          >
+            {localization.pinToRight}
+          </Menu.Item>
+          <Menu.Item
+            disabled={!column.getIsPinned()}
+            leftSection={<IconPinnedOff />}
+            onClick={() => handlePinColumn(false)}
+          >
+            {localization.unpin}
+          </Menu.Item>
+          {enableHiding && <Menu.Divider />}
+        </>
+      )}
+      {enableColumnResizing && column.getCanResize() && (
+        <Menu.Item
+          disabled={!columnSizing[column.id]}
+          key={0}
+          leftSection={<IconArrowAutofitContent />}
+          onClick={handleResetColumnSize}
+        >
+          {localization.resetColumnSize}
+        </Menu.Item>
+      )}
+      {enableHiding && (
+        <>
+          <Menu.Item
+            disabled={!column.getCanHide()}
+            key={0}
+            leftSection={<IconEyeOff />}
+            onClick={handleHideColumn}
+          >
+            {localization.hideColumn?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
+          </Menu.Item>
+          <Menu.Item
+            disabled={
+              !Object.values(columnVisibility).filter((visible) => !visible)
+                .length
+            }
+            key={1}
+            leftSection={<IconColumns />}
+            onClick={handleShowAllColumns}
+          >
+            {localization.showAllColumns?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
+          </Menu.Item>
+        </>
+      )}
+    </>
+  );
+
+  return (
+    <Menu closeOnItemClick position="bottom-start" withinPortal {...rest}>
+      <Tooltip
+        label={actionIconProps?.title ?? localization.columnActions}
+        openDelay={1000}
+        withinPortal
+      >
+        <Menu.Target>
+          <ActionIcon
+            aria-label={localization.columnActions}
+            color="gray"
+            size="sm"
+            variant="subtle"
+            {...actionIconProps}
+          >
+            <IconDotsVertical size="100%" />
+          </ActionIcon>
+        </Menu.Target>
+      </Tooltip>
+      <Menu.Dropdown>
+        {columnDef.renderColumnActionsMenuItems?.({
+          column,
+          internalColumnMenuItems,
+          table,
+        }) ??
+          renderColumnActionsMenuItems?.({
+            column,
+            internalColumnMenuItems,
+            table,
+          }) ??
+          internalColumnMenuItems}
+      </Menu.Dropdown>
+    </Menu>
+  );
+};

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

@@ -0,0 +1,6 @@
+.symbol {
+  font-size: var(--mantine-font-size-xl);
+  text-align: center;
+  width: 2ch;
+  transform: translateY(-0.1em);
+}