@kissesses/mantine-react-table-open 9.0.3

package/src/components/head/MRT_TableHeadCellGrabHandle.tsx

@@ -0,0 +1,81 @@
+import { type DragEvent, type RefObject } from 'react';
+
+import { type ActionIconProps } 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 { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+
+interface Props<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends ActionIconProps {
+  column: MRT_Column<TData, TValue>;
+  table: MRT_TableInstance<TData>;
+  tableHeadCellRef: RefObject<HTMLTableCellElement | null>;
+}
+
+export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
+  column,
+  table,
+  tableHeadCellRef,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: { enableColumnOrdering, mantineColumnDragHandleProps },
+    setColumnOrder,
+    setDraggingColumn,
+    setHoveredColumn,
+  } = table;
+  const { columnDef } = column;
+  const { columnOrder, draggingColumn, hoveredColumn } = getState();
+
+  const arg = { column, table };
+  const actionIconProps = {
+    ...parseFromValuesOrFunc(mantineColumnDragHandleProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineColumnDragHandleProps, arg),
+    ...rest,
+  };
+
+  const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
+    actionIconProps?.onDragStart?.(event);
+    setDraggingColumn(column);
+    event.dataTransfer.setDragImage(
+      tableHeadCellRef.current as HTMLElement,
+      0,
+      0,
+    );
+  };
+
+  const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
+    actionIconProps?.onDragEnd?.(event);
+    if (hoveredColumn?.id === 'drop-zone') {
+      column.toggleGrouping();
+    } else if (
+      enableColumnOrdering &&
+      hoveredColumn &&
+      hoveredColumn?.id !== draggingColumn?.id
+    ) {
+      setColumnOrder(
+        reorderColumn(column, hoveredColumn as MRT_Column<TData>, columnOrder),
+      );
+    }
+    setDraggingColumn(null);
+    setHoveredColumn(null);
+  };
+
+  return (
+    <MRT_GrabHandleButton
+      actionIconProps={actionIconProps}
+      onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
+      table={table}
+    />
+  );
+};

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

@@ -0,0 +1,44 @@
+.root {
+  --resize-handle-thickness: 4px;
+  background: var(--mantine-color-placeholder);
+  border-radius: 2px;
+  cursor: col-resize;
+  height: 24px;
+  position: absolute;
+  width: var(--resize-handle-thickness);
+  &:hover {
+    background: var(--mantine-primary-color-filled-hover);
+  }
+  &:active {
+    background: var(--mantine-primary-color-filled);
+  }
+  transform: var(--mrt-transform);
+}
+
+.root-ltr {
+  right: 0px;
+  margin-right: -10px;
+  &:global(.md) {
+    margin-right: -16px;
+  }
+  &:global(.xl) {
+    margin-right: -22px;
+  }
+}
+
+.root-rtl {
+  left: 0px;
+  margin-left: -10px;
+  &:global(.md) {
+    margin-left: -16px;
+  }
+  &:global(.xl) {
+    margin-left: -22px;
+  }
+}
+
+.root-hide {
+  &:active {
+    opacity: 0;
+  }
+}

package/src/components/head/MRT_TableHeadCellResizeHandle.tsx

@@ -0,0 +1,67 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TableHeadCellResizeHandle.module.css';
+
+import { Box, type BoxProps } from '@mantine/core';
+
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData> extends BoxProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: { columnResizeDirection, columnResizeMode },
+    setColumnSizingInfo,
+  } = table;
+  const { density } = getState();
+  const { column } = header;
+  const handler = header.getResizeHandler();
+
+  const offset =
+    column.getIsResizing() && columnResizeMode === 'onEnd'
+      ? `translateX(${
+          (columnResizeDirection === 'rtl' ? -1 : 1) *
+          (getState().columnSizingInfo.deltaOffset ?? 0)
+        }px)`
+      : undefined;
+
+  return (
+    <Box
+      onDoubleClick={() => {
+        setColumnSizingInfo((old) => ({
+          ...old,
+          isResizingColumn: false,
+        }));
+        column.resetSize();
+      }}
+      onMouseDown={handler}
+      onTouchStart={handler}
+      role="separator"
+      {...rest}
+      __vars={{ '--mrt-transform': offset, ...rest.__vars }}
+      className={clsx(
+        'mrt-table-head-cell-resize-handle',
+        classes.root,
+        classes[`root-${columnResizeDirection}`],
+        !header.subHeaders.length &&
+          columnResizeMode === 'onChange' &&
+          classes['root-hide'],
+        density,
+        rest.className,
+      )}
+    />
+  );
+};

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

@@ -0,0 +1,22 @@
+.sort-icon {
+  transition: all 150ms ease;
+  --ai-size: var(--ai-size-xs);
+  --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-sorted] {
+    color: var(--mantine-primary-color-filled);
+  }
+  margin-left: 1px;
+}
+
+.multi-sort-indicator {
+  --indicator-size: rem(16px);
+  --indicator-color: transparent;
+  --indicator-text-color: var(--mantine-color-bright);
+  height: var(--indicator-size);
+}

package/src/components/head/MRT_TableHeadCellSortLabel.tsx

@@ -0,0 +1,89 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TableHeadCellSortLabel.module.css';
+
+import {
+  ActionIcon,
+  type ActionIconProps,
+  Indicator,
+  Tooltip,
+} from '@mantine/core';
+
+import type { MRT_Header, MRT_RowData, 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_TableHeadCellSortLabel = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: {
+      icons: { IconArrowsSort, IconSortAscending, IconSortDescending },
+      localization,
+    },
+  } = table;
+  const column = header.column;
+  const { columnDef } = column;
+  const { sorting } = getState();
+  const sorted = column.getIsSorted();
+  const sortIndex = column.getSortIndex();
+
+  const sortTooltip = sorted
+    ? sorted === 'desc'
+      ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
+      : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
+    : column.getNextSortingOrder() === 'desc'
+      ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
+      : localization.sortByColumnAsc.replace('{column}', columnDef.header);
+
+  const SortActionButton = (
+    <ActionIcon
+      aria-label={sortTooltip}
+      {...dataVariable('sorted', sorted)}
+      {...rest}
+      className={clsx(
+        'mrt-table-head-sort-button',
+        classes['sort-icon'],
+        rest.className,
+      )}
+    >
+      {sorted === 'desc' ? (
+        <IconSortDescending size="100%" />
+      ) : sorted === 'asc' ? (
+        <IconSortAscending size="100%" />
+      ) : (
+        <IconArrowsSort size="100%" />
+      )}
+    </ActionIcon>
+  );
+
+  return (
+    <Tooltip label={sortTooltip} openDelay={1000} withinPortal>
+      {sorting.length < 2 || sortIndex === -1 ? (
+        SortActionButton
+      ) : (
+        <Indicator
+          classNames={{
+            root: clsx(
+              'mrt-table-head-multi-sort-indicator',
+              classes['multi-sort-indicator'],
+            ),
+          }}
+          inline
+          label={sortIndex + 1}
+          offset={4}
+        >
+          {SortActionButton}
+        </Indicator>
+      )}
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,12 @@
+.root {
+  background-color: var(--mrt-base-background-color);
+  display: table-row;
+  &.layout-mode-grid {
+    display: flex;
+  }
+}
+
+.sticky {
+  position: sticky;
+  top: 0;
+}

package/src/components/head/MRT_TableHeadRow.tsx

@@ -0,0 +1,87 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TableHeadRow.module.css';
+
+import { Box, TableTr, type TableTrProps } from '@mantine/core';
+
+import { MRT_TableHeadCell } from './MRT_TableHeadCell';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_Header,
+  type MRT_HeaderGroup,
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends TableTrProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  headerGroup: MRT_HeaderGroup<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadRow = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  headerGroup,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: { enableStickyHeader, layoutMode, mantineTableHeadRowProps },
+  } = table;
+  const { isFullScreen } = getState();
+
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
+
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(mantineTableHeadRowProps, {
+      headerGroup,
+      table,
+    }),
+    ...rest,
+  };
+
+  return (
+    <TableTr
+      {...tableRowProps}
+      className={clsx(
+        classes.root,
+        (enableStickyHeader || isFullScreen) && classes.sticky,
+        layoutMode?.startsWith('grid') && classes['layout-mode-grid'],
+        tableRowProps?.className,
+      )}
+    >
+      {virtualPaddingLeft ? (
+        <Box component="th" display="flex" w={virtualPaddingLeft} />
+      ) : null}
+      {(virtualColumns ?? headerGroup.headers).map(
+        (headerOrVirtualHeader, renderedHeaderIndex) => {
+          let header = headerOrVirtualHeader as MRT_Header<TData>;
+          if (columnVirtualizer) {
+            renderedHeaderIndex = (headerOrVirtualHeader as MRT_VirtualItem)
+              .index;
+            header = headerGroup.headers[renderedHeaderIndex];
+          }
+
+          return (
+            <MRT_TableHeadCell
+              columnVirtualizer={columnVirtualizer}
+              header={header}
+              key={header.id}
+              renderedHeaderIndex={renderedHeaderIndex}
+              table={table}
+            />
+          );
+        },
+      )}
+      {virtualPaddingRight ? (
+        <Box component="th" display="flex" w={virtualPaddingRight} />
+      ) : null}
+    </TableTr>
+  );
+};

package/src/components/inputs/MRT_EditCellTextInput.tsx

@@ -0,0 +1,218 @@
+import { type FocusEvent, type KeyboardEvent, useState } from 'react';
+
+import {
+  MultiSelect,
+  type MultiSelectProps,
+  Select,
+  type SelectProps,
+  TextInput,
+  type TextInputProps,
+} from '@mantine/core';
+
+import {
+  type HTMLPropsRef,
+  type MRT_Cell,
+  type MRT_CellValue,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface PropsTextInput<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends TextInputProps {
+  cell: MRT_Cell<TData, TValue>;
+  table: MRT_TableInstance<TData>;
+}
+
+interface PropsSelect<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends SelectProps {
+  cell: MRT_Cell<TData, TValue>;
+  table: MRT_TableInstance<TData>;
+}
+
+interface PropsMultiSelect<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends MultiSelectProps {
+  cell: MRT_Cell<TData, TValue>;
+  table: MRT_TableInstance<TData>;
+}
+
+type MRT_TextInputProps = HTMLPropsRef<HTMLInputElement> & TextInputProps;
+type MRT_SelectProps = HTMLPropsRef<HTMLInputElement> & SelectProps;
+type MRT_MultiSelectProps = HTMLPropsRef<HTMLInputElement> & MultiSelectProps;
+
+export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
+  cell,
+  table,
+  ...rest
+}: PropsMultiSelect<TData> | PropsSelect<TData> | PropsTextInput<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: {
+      createDisplayMode,
+      editDisplayMode,
+      mantineEditSelectProps,
+      mantineEditTextInputProps,
+    },
+    refs: { editInputRefs },
+    setCreatingRow,
+    setEditingCell,
+    setEditingRow,
+  } = table;
+  const { column, row } = cell;
+  const { columnDef } = column;
+  const { creatingRow, editingRow } = getState();
+
+  const isCreating = creatingRow?.id === row.id;
+  const isEditing = editingRow?.id === row.id;
+  const isSelectEdit = columnDef.editVariant === 'select';
+  const isMultiSelectEdit = columnDef.editVariant === 'multi-select';
+
+  const [value, setValue] = useState(() => cell.getValue<any>());
+
+  const arg = { cell, column, row, table };
+  const textInputProps = {
+    ...parseFromValuesOrFunc(mantineEditTextInputProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineEditTextInputProps, arg),
+    ...rest,
+  } as MRT_TextInputProps;
+
+  const selectProps = {
+    ...parseFromValuesOrFunc(mantineEditSelectProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineEditSelectProps, arg),
+    ...rest,
+  };
+
+  const saveInputValueToRowCache = (newValue: null | string) => {
+    //@ts-ignore
+    row._valuesCache[column.id] = newValue;
+    if (isCreating) {
+      setCreatingRow(row);
+    } else if (isEditing) {
+      setEditingRow(row);
+    }
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    textInputProps.onBlur?.(event);
+    saveInputValueToRowCache(value);
+    setEditingCell(null);
+  };
+
+  const handleEnterKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    textInputProps.onKeyDown?.(event);
+    if (event.key === 'Enter') {
+      editInputRefs.current[cell.id]?.blur();
+    }
+  };
+
+  if (columnDef.Edit) {
+    return columnDef.Edit?.({ cell, column, row, table });
+  }
+
+  const commonProps = {
+    disabled: parseFromValuesOrFunc(columnDef.enableEditing, row) === false,
+    label: ['custom', 'modal'].includes(
+      (isCreating ? createDisplayMode : editDisplayMode) as string,
+    )
+      ? column.columnDef.header
+      : undefined,
+    name: cell.id,
+    onClick: (e: any) => {
+      e.stopPropagation();
+      textInputProps?.onClick?.(e);
+    },
+    placeholder: !['custom', 'modal'].includes(
+      (isCreating ? createDisplayMode : editDisplayMode) as string,
+    )
+      ? columnDef.header
+      : undefined,
+    value,
+    variant: editDisplayMode === 'table' ? 'unstyled' : 'default',
+  } as const;
+
+  if (isSelectEdit) {
+    return (
+      <Select
+        {...commonProps}
+        searchable
+        value={value as any}
+        {...(selectProps as MRT_SelectProps)}
+        onBlur={handleBlur}
+        onChange={(value, option) => {
+          (selectProps as MRT_SelectProps).onChange?.(value as any, option);
+          setValue(value);
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          selectProps?.onClick?.(e);
+        }}
+        ref={(node) => {
+          if (node) {
+            editInputRefs.current[cell.id] = node;
+            if (selectProps.ref && typeof selectProps.ref !== 'function') {
+              selectProps.ref.current = node;
+            }
+          }
+        }}
+      />
+    );
+  }
+
+  if (isMultiSelectEdit) {
+    return (
+      <MultiSelect
+        {...commonProps}
+        searchable
+        value={value}
+        {...(selectProps as MRT_MultiSelectProps)}
+        onBlur={handleBlur}
+        onChange={(newValue) => {
+          (selectProps as MRT_MultiSelectProps).onChange?.(value as any);
+          setValue(newValue);
+          // Save if not in focus, otherwise it will be handled by onBlur
+          if (document.activeElement === editInputRefs.current[cell.id]) return;
+          saveInputValueToRowCache(newValue as any);
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          selectProps?.onClick?.(e);
+        }}
+        ref={(node) => {
+          if (node) {
+            editInputRefs.current[cell.id] = node;
+            if (selectProps.ref && typeof selectProps.ref !== 'function') {
+              selectProps.ref.current = node;
+            }
+          }
+        }}
+      />
+    );
+  }
+
+  return (
+    <TextInput
+      {...commonProps}
+      onKeyDown={handleEnterKeyDown}
+      value={value ?? ''}
+      {...textInputProps}
+      onBlur={handleBlur}
+      onChange={(event) => {
+        textInputProps.onChange?.(event);
+        setValue(event.target.value);
+      }}
+      onClick={(event) => {
+        event.stopPropagation();
+        textInputProps?.onClick?.(event);
+      }}
+      ref={(node) => {
+        if (node) {
+          editInputRefs.current[cell.id] = node;
+          if (textInputProps.ref && typeof textInputProps.ref !== 'function') {
+            textInputProps.ref.current = node;
+          }
+        }
+      }}
+    />
+  );
+};

package/src/components/inputs/MRT_FilterCheckBox.module.css

@@ -0,0 +1,4 @@
+.root {
+  font-weight: normal;
+  margin-top: 8px;
+}

package/src/components/inputs/MRT_FilterCheckbox.tsx

@@ -0,0 +1,79 @@
+import clsx from 'clsx';
+
+import classes from './MRT_FilterCheckBox.module.css';
+
+import { Checkbox, type CheckboxProps, Tooltip } from '@mantine/core';
+
+import {
+  type MRT_CellValue,
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends CheckboxProps {
+  column: MRT_Column<TData, TValue>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
+  column,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: { localization, mantineFilterCheckboxProps },
+  } = table;
+  const { density } = getState();
+  const { columnDef } = column;
+
+  const arg = { column, table };
+  const checkboxProps = {
+    ...parseFromValuesOrFunc(mantineFilterCheckboxProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineFilterCheckboxProps, arg),
+    ...rest,
+  } as CheckboxProps;
+
+  const filterLabel = localization.filterByColumn?.replace(
+    '{column}',
+    columnDef.header,
+  );
+
+  const value = column.getFilterValue();
+
+  return (
+    <Tooltip
+      label={checkboxProps?.title ?? filterLabel}
+      openDelay={1000}
+      withinPortal
+    >
+      <Checkbox
+        checked={value === 'true'}
+        className={clsx('mrt-filter-checkbox', classes.root)}
+        indeterminate={value === undefined}
+        label={checkboxProps.title ?? filterLabel}
+        size={density === 'xs' ? 'sm' : 'md'}
+        {...checkboxProps}
+        onChange={(e) => {
+          column.setFilterValue(
+            column.getFilterValue() === undefined
+              ? 'true'
+              : column.getFilterValue() === 'true'
+                ? 'false'
+                : undefined,
+          );
+          checkboxProps?.onChange?.(e);
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          checkboxProps?.onClick?.(e);
+        }}
+        title={undefined}
+      />
+    </Tooltip>
+  );
+};