@novastera-oss/material-react-table 4.0.0-beta.7

package/src/utils/cell.utils.ts

@@ -0,0 +1,234 @@
+import {
+  MRT_Header,
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import {
+  getMRT_RowSelectionHandler,
+  getMRT_SelectAllHandler,
+} from './row.utils';
+import { parseFromValuesOrFunc } from './utils';
+
+const isWinCtrlMacMeta = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
+  return (
+    (event.ctrlKey && navigator.platform.toLowerCase().includes('win')) ||
+    (event.metaKey && navigator.platform.toLowerCase().includes('mac'))
+  );
+};
+
+export const isCellEditable = <TData extends MRT_RowData>({
+  cell,
+  table,
+}: {
+  cell: MRT_Cell<TData>;
+  table: MRT_TableInstance<TData>;
+}) => {
+  const { enableEditing } = table.options;
+  const {
+    column: { columnDef },
+    row,
+  } = cell;
+  return (
+    !cell.getIsPlaceholder() &&
+    parseFromValuesOrFunc(enableEditing, row) &&
+    parseFromValuesOrFunc(columnDef.enableEditing, row) !== false
+  );
+};
+
+export const openEditingCell = <TData extends MRT_RowData>({
+  cell,
+  table,
+}: {
+  cell: MRT_Cell<TData>;
+  table: MRT_TableInstance<TData>;
+}) => {
+  const {
+    options: { editDisplayMode },
+    refs: { editInputRefs },
+  } = table;
+  const { column } = cell;
+
+  if (isCellEditable({ cell, table }) && editDisplayMode === 'cell') {
+    table.setEditingCell(cell);
+    queueMicrotask(() => {
+      const textField = editInputRefs.current?.[column.id];
+      if (textField) {
+        textField.focus();
+        textField.select?.();
+      }
+    });
+  }
+};
+
+export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
+  cell,
+  cellElements,
+  cellValue,
+  containerElement,
+  event,
+  header,
+  parentElement,
+  table,
+}: {
+  cell?: MRT_Cell<TData>;
+  header?: MRT_Header<TData>;
+  cellElements?: Array<HTMLTableCellElement>;
+  cellValue?: string;
+  containerElement?: HTMLTableElement;
+  event: React.KeyboardEvent<HTMLTableCellElement>;
+  parentElement?: HTMLTableRowElement;
+  table: MRT_TableInstance<TData>;
+}) => {
+  if (!table.options.enableKeyboardShortcuts) return;
+  if (event.isPropagationStopped()) return;
+  const currentCell = event.currentTarget;
+
+  if (cellValue && isWinCtrlMacMeta(event) && event.key === 'c') {
+    navigator.clipboard.writeText(cellValue);
+  } else if (['Enter', ' '].includes(event.key)) {
+    if (cell?.column?.id === 'mrt-row-select') {
+      event.preventDefault();
+      getMRT_RowSelectionHandler({
+        row: cell.row,
+        table,
+        //@ts-expect-error
+        staticRowIndex: +event.target.getAttribute('data-index'),
+      })(event as any);
+    } else if (
+      header?.column?.id === 'mrt-row-select' &&
+      table.options.enableSelectAll
+    ) {
+      event.preventDefault();
+      getMRT_SelectAllHandler({
+        table,
+      })(event as any);
+    } else if (
+      cell?.column?.id === 'mrt-row-expand' &&
+      (cell.row.getCanExpand() ||
+        table.options.renderDetailPanel?.({ row: cell.row, table }))
+    ) {
+      event.preventDefault();
+      cell.row.toggleExpanded();
+    } else if (
+      header?.column?.id === 'mrt-row-expand' &&
+      table.options.enableExpandAll
+    ) {
+      event.preventDefault();
+      table.toggleAllRowsExpanded();
+    } else if (cell?.column.id === 'mrt-row-pin') {
+      event.preventDefault();
+      cell.row.getIsPinned()
+        ? cell.row.pin(false)
+        : cell.row.pin(
+            table.options.rowPinningDisplayMode?.includes('bottom')
+              ? 'bottom'
+              : 'top',
+          );
+    } else if (header && isWinCtrlMacMeta(event)) {
+      const actionsButton = currentCell.querySelector(
+        `button[aria-label="${table.options.localization.columnActions}"]`,
+      );
+      if (actionsButton) {
+        (actionsButton as HTMLButtonElement).click();
+      }
+    } else if (header?.column?.getCanSort()) {
+      event.preventDefault();
+      header.column.toggleSorting();
+    }
+  } else if (
+    [
+      'ArrowRight',
+      'ArrowLeft',
+      'ArrowUp',
+      'ArrowDown',
+      'Home',
+      'End',
+      'PageUp',
+      'PageDown',
+    ].includes(event.key)
+  ) {
+    event.preventDefault();
+
+    const currentRow = parentElement || currentCell.closest('tr');
+    const tableElement = containerElement || currentCell.closest('table');
+    const allCells =
+      cellElements ||
+      Array.from(tableElement?.querySelectorAll('th, td') || []);
+    const currentCellIndex = allCells.indexOf(currentCell);
+
+    const currentIndex = parseInt(
+      currentCell.getAttribute('data-index') || '0',
+    );
+    let nextCell: HTMLElement | undefined = undefined;
+
+    //home/end first or last cell in row
+    const findEdgeCell = (rowIndex: 'c' | 'f' | 'l', edge: 'f' | 'l') => {
+      const row =
+        rowIndex === 'c'
+          ? currentRow
+          : rowIndex === 'f'
+            ? tableElement?.querySelector('tr')
+            : tableElement?.lastElementChild?.lastElementChild;
+      const rowCells = Array.from(row?.children || []);
+      const targetCell =
+        edge === 'f' ? rowCells[0] : rowCells[rowCells.length - 1];
+      return targetCell as HTMLElement;
+    };
+
+    //page up/down first or last cell in column
+    const findBottomTopCell = (columnIndex: number, edge: 'b' | 't') => {
+      const row =
+        edge === 't'
+          ? tableElement?.querySelector('tr')
+          : tableElement?.lastElementChild?.lastElementChild;
+      const rowCells = Array.from(row?.children || []);
+      const targetCell = rowCells[columnIndex];
+      return targetCell as HTMLElement;
+    };
+
+    const findAdjacentCell = (
+      columnIndex: number,
+      searchDirection: 'f' | 'b',
+    ) => {
+      const searchArray =
+        searchDirection === 'f'
+          ? allCells.slice(currentCellIndex + 1)
+          : allCells.slice(0, currentCellIndex).reverse();
+      return searchArray.find((cell) =>
+        cell.matches(`[data-index="${columnIndex}"]`),
+      ) as HTMLElement | undefined;
+    };
+
+    switch (event.key) {
+      case 'ArrowRight':
+        nextCell = findAdjacentCell(currentIndex + 1, 'f');
+        break;
+      case 'ArrowLeft':
+        nextCell = findAdjacentCell(currentIndex - 1, 'b');
+        break;
+      case 'ArrowUp':
+        nextCell = findAdjacentCell(currentIndex, 'b');
+        break;
+      case 'ArrowDown':
+        nextCell = findAdjacentCell(currentIndex, 'f');
+        break;
+      case 'Home':
+        nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'f' : 'c', 'f');
+        break;
+      case 'End':
+        nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'l' : 'c', 'l');
+        break;
+      case 'PageUp':
+        nextCell = findBottomTopCell(currentIndex, 't');
+        break;
+      case 'PageDown':
+        nextCell = findBottomTopCell(currentIndex, 'b');
+        break;
+    }
+
+    if (nextCell) {
+      nextCell.focus();
+    }
+  }
+};

package/src/utils/column.utils.ts

@@ -0,0 +1,209 @@
+import { useMemo } from 'react';
+import { type Row } from '@tanstack/react-table';
+import {
+  type DropdownOption,
+  type MRT_Column,
+  type MRT_ColumnDef,
+  type MRT_ColumnOrderState,
+  type MRT_DefinedColumnDef,
+  type MRT_DefinedTableOptions,
+  type MRT_FilterOption,
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+
+export const getColumnId = <TData extends MRT_RowData>(
+  columnDef: MRT_ColumnDef<TData>,
+): string =>
+  columnDef.id ?? columnDef.accessorKey?.toString?.() ?? columnDef.header;
+
+export const getAllLeafColumnDefs = <TData extends MRT_RowData>(
+  columns: MRT_ColumnDef<TData>[],
+): MRT_ColumnDef<TData>[] => {
+  const allLeafColumnDefs: MRT_ColumnDef<TData>[] = [];
+  const getLeafColumns = (cols: MRT_ColumnDef<TData>[]) => {
+    cols.forEach((col) => {
+      if (col.columns) {
+        getLeafColumns(col.columns);
+      } else {
+        allLeafColumnDefs.push(col);
+      }
+    });
+  };
+  getLeafColumns(columns);
+  return allLeafColumnDefs;
+};
+
+export const prepareColumns = <TData extends MRT_RowData>({
+  columnDefs,
+  tableOptions,
+}: {
+  columnDefs: MRT_ColumnDef<TData>[];
+  tableOptions: MRT_DefinedTableOptions<TData>;
+}): MRT_DefinedColumnDef<TData>[] => {
+  const {
+    aggregationFns = {},
+    defaultDisplayColumn,
+    filterFns = {},
+    sortingFns = {},
+    state: { columnFilterFns = {} } = {},
+  } = tableOptions;
+  return columnDefs.map((columnDef) => {
+    //assign columnId
+    if (!columnDef.id) columnDef.id = getColumnId(columnDef);
+    //assign columnDefType
+    if (!columnDef.columnDefType) columnDef.columnDefType = 'data';
+    if (columnDef.columns?.length) {
+      columnDef.columnDefType = 'group';
+      //recursively prepare columns if this is a group column
+      columnDef.columns = prepareColumns({
+        columnDefs: columnDef.columns,
+        tableOptions,
+      });
+    } else if (columnDef.columnDefType === 'data') {
+      //assign aggregationFns if multiple aggregationFns are provided
+      if (Array.isArray(columnDef.aggregationFn)) {
+        const aggFns = columnDef.aggregationFn as string[];
+        columnDef.aggregationFn = (
+          columnId: string,
+          leafRows: Row<TData>[],
+          childRows: Row<TData>[],
+        ) =>
+          aggFns.map((fn) =>
+            aggregationFns[fn]?.(columnId, leafRows, childRows),
+          );
+      }
+
+      //assign filterFns
+      if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
+        columnDef.filterFn =
+          filterFns[columnFilterFns[columnDef.id]] ?? filterFns.fuzzy;
+        (columnDef as MRT_DefinedColumnDef<TData>)._filterFn =
+          columnFilterFns[columnDef.id];
+      }
+
+      //assign sortingFns
+      if (Object.keys(sortingFns).includes(columnDef.sortingFn as string)) {
+        // @ts-expect-error
+        columnDef.sortingFn = sortingFns[columnDef.sortingFn];
+      }
+    } else if (columnDef.columnDefType === 'display') {
+      columnDef = {
+        ...(defaultDisplayColumn as MRT_ColumnDef<TData>),
+        ...columnDef,
+      };
+    }
+    return columnDef;
+  }) as MRT_DefinedColumnDef<TData>[];
+};
+
+export const reorderColumn = <TData extends MRT_RowData>(
+  draggedColumn: MRT_Column<TData>,
+  targetColumn: MRT_Column<TData>,
+  columnOrder: MRT_ColumnOrderState,
+): MRT_ColumnOrderState => {
+  if (draggedColumn.getCanPin()) {
+    draggedColumn.pin(targetColumn.getIsPinned());
+  }
+  const newColumnOrder = [...columnOrder];
+  newColumnOrder.splice(
+    newColumnOrder.indexOf(targetColumn.id),
+    0,
+    newColumnOrder.splice(newColumnOrder.indexOf(draggedColumn.id), 1)[0],
+  );
+  return newColumnOrder;
+};
+
+export const getDefaultColumnFilterFn = <TData extends MRT_RowData>(
+  columnDef: MRT_ColumnDef<TData>,
+): MRT_FilterOption => {
+  const { filterVariant } = columnDef;
+  if (filterVariant === 'multi-select') return 'arrIncludesSome';
+  if (filterVariant?.includes('range')) return 'betweenInclusive';
+  if (filterVariant === 'select' || filterVariant === 'checkbox')
+    return 'equals';
+  return 'fuzzy';
+};
+
+export const getColumnFilterInfo = <TData extends MRT_RowData>({
+  header,
+  table,
+}: {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}) => {
+  const {
+    options: { columnFilterModeOptions },
+  } = table;
+  const { column } = header;
+  const { columnDef } = column;
+  const { filterVariant } = columnDef;
+
+  const isDateFilter = !!(
+    filterVariant?.startsWith('date') || filterVariant?.startsWith('time')
+  );
+  const isAutocompleteFilter = filterVariant === 'autocomplete';
+  const isRangeFilter =
+    filterVariant?.includes('range') ||
+    ['between', 'betweenInclusive', 'inNumberRange'].includes(
+      columnDef._filterFn,
+    );
+  const isSelectFilter = filterVariant === 'select';
+  const isMultiSelectFilter = filterVariant === 'multi-select';
+  const isTextboxFilter =
+    ['autocomplete', 'text'].includes(filterVariant!) ||
+    (!isSelectFilter && !isMultiSelectFilter);
+  const currentFilterOption = columnDef._filterFn;
+
+  const allowedColumnFilterOptions =
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
+
+  const facetedUniqueValues = column.getFacetedUniqueValues();
+
+  return {
+    allowedColumnFilterOptions,
+    currentFilterOption,
+    facetedUniqueValues,
+    isAutocompleteFilter,
+    isDateFilter,
+    isMultiSelectFilter,
+    isRangeFilter,
+    isSelectFilter,
+    isTextboxFilter,
+  } as const;
+};
+
+export const useDropdownOptions = <TData extends MRT_RowData>({
+  header,
+  table,
+}: {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}): DropdownOption[] | undefined => {
+  const { column } = header;
+  const { columnDef } = column;
+  const {
+    facetedUniqueValues,
+    isAutocompleteFilter,
+    isMultiSelectFilter,
+    isSelectFilter,
+  } = getColumnFilterInfo({ header, table });
+
+  return useMemo<DropdownOption[] | undefined>(
+    () =>
+      columnDef.filterSelectOptions ??
+      ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
+      facetedUniqueValues
+        ? Array.from(facetedUniqueValues.keys())
+            .filter((value) => value !== null && value !== undefined)
+            .sort((a, b) => a.localeCompare(b))
+        : undefined),
+    [
+      columnDef.filterSelectOptions,
+      facetedUniqueValues,
+      isMultiSelectFilter,
+      isSelectFilter,
+    ],
+  );
+};

package/src/utils/displayColumn.utils.ts

@@ -0,0 +1,152 @@
+import {
+  type MRT_DefinedTableOptions,
+  type MRT_DisplayColumnIds,
+  type MRT_Localization,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../types';
+import { getAllLeafColumnDefs, getColumnId } from './column.utils';
+
+export function defaultDisplayColumnProps<TData extends MRT_RowData>({
+  header,
+  id,
+  size,
+  tableOptions,
+}: {
+  header?: keyof MRT_Localization;
+  id: MRT_DisplayColumnIds;
+  size: number;
+  tableOptions: MRT_DefinedTableOptions<TData>;
+}) {
+  const { defaultDisplayColumn, displayColumnDefOptions, localization } =
+    tableOptions;
+  return {
+    ...defaultDisplayColumn,
+    header: header ? localization[header]! : '',
+    size,
+    ...displayColumnDefOptions?.[id],
+    id,
+  } as const;
+}
+
+export const showRowPinningColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): boolean => {
+  const { enableRowPinning, rowPinningDisplayMode } = tableOptions;
+  return !!(enableRowPinning && !rowPinningDisplayMode?.startsWith('select'));
+};
+
+export const showRowDragColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): boolean => {
+  const { enableRowDragging, enableRowOrdering } = tableOptions;
+  return !!(enableRowDragging || enableRowOrdering);
+};
+
+export const showRowExpandColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): boolean => {
+  const {
+    enableExpanding,
+    enableGrouping,
+    renderDetailPanel,
+    state: { grouping },
+  } = tableOptions;
+  return !!(
+    enableExpanding ||
+    (enableGrouping && grouping?.length) ||
+    renderDetailPanel
+  );
+};
+
+export const showRowActionsColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): boolean => {
+  const {
+    createDisplayMode,
+    editDisplayMode,
+    enableEditing,
+    enableRowActions,
+    state: { creatingRow },
+  } = tableOptions;
+  return !!(
+    enableRowActions ||
+    (creatingRow && createDisplayMode === 'row') ||
+    (enableEditing && ['modal', 'row'].includes(editDisplayMode ?? ''))
+  );
+};
+
+export const showRowSelectionColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): boolean => !!tableOptions.enableRowSelection;
+
+export const showRowNumbersColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): boolean => !!tableOptions.enableRowNumbers;
+
+export const showRowSpacerColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): boolean => tableOptions.layoutMode === 'grid-no-grow';
+
+export const getLeadingDisplayColumnIds = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+) =>
+  [
+    showRowPinningColumn(tableOptions) && 'mrt-row-pin',
+    showRowDragColumn(tableOptions) && 'mrt-row-drag',
+    tableOptions.positionActionsColumn === 'first' &&
+      showRowActionsColumn(tableOptions) &&
+      'mrt-row-actions',
+    tableOptions.positionExpandColumn === 'first' &&
+      showRowExpandColumn(tableOptions) &&
+      'mrt-row-expand',
+    showRowSelectionColumn(tableOptions) && 'mrt-row-select',
+    showRowNumbersColumn(tableOptions) && 'mrt-row-numbers',
+  ].filter(Boolean) as MRT_DisplayColumnIds[];
+
+export const getTrailingDisplayColumnIds = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+) =>
+  [
+    tableOptions.positionActionsColumn === 'last' &&
+      showRowActionsColumn(tableOptions) &&
+      'mrt-row-actions',
+    tableOptions.positionExpandColumn === 'last' &&
+      showRowExpandColumn(tableOptions) &&
+      'mrt-row-expand',
+    showRowSpacerColumn(tableOptions) && 'mrt-row-spacer',
+  ].filter(Boolean) as MRT_DisplayColumnIds[];
+
+export const getDefaultColumnOrderIds = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+  reset = false,
+) => {
+  const {
+    state: { columnOrder: currentColumnOrderIds = [] },
+  } = tableOptions;
+
+  const leadingDisplayColIds: string[] =
+    getLeadingDisplayColumnIds(tableOptions);
+  const trailingDisplayColIds: string[] =
+    getTrailingDisplayColumnIds(tableOptions);
+
+  const defaultColumnDefIds = getAllLeafColumnDefs(tableOptions.columns).map(
+    (columnDef) => getColumnId(columnDef),
+  );
+
+  let allLeafColumnDefIds = reset
+    ? defaultColumnDefIds
+    : Array.from(new Set([...currentColumnOrderIds, ...defaultColumnDefIds]));
+
+  allLeafColumnDefIds = allLeafColumnDefIds.filter(
+    (colId) =>
+      !leadingDisplayColIds.includes(colId) &&
+      !trailingDisplayColIds.includes(colId),
+  );
+
+  return [
+    ...leadingDisplayColIds,
+    ...allLeafColumnDefIds,
+    ...trailingDisplayColIds,
+  ];
+};