@careharmony/mantine-react-table-ng 0.0.0-stage → 4.0.0-beta.0

package/src/fns/filterFns.ts

@@ -0,0 +1,243 @@
+import {
+  type RankingInfo,
+  rankings,
+  rankItem,
+} from '@tanstack/match-sorter-utils';
+import { filterFns, type Row } from '@tanstack/react-table';
+
+import {
+  type MRT_FilterOption,
+  type MRT_Localization,
+  type MRT_RowData,
+} from '../types';
+
+//the multi-select filter input clears itself to an empty array, which must remove the filter like '' does
+const isBlankFilterValue = (val: any) =>
+  !val || (Array.isArray(val) && !val.length);
+
+/**
+ * Mantine 8+ date inputs emit 'YYYY-MM-DD' strings. When the cell value is a
+ * Date, the filter value is read as a Date at local midnight, so the two
+ * compare as dates and not as text.
+ */
+const getDateFilterValue = (cellValue: unknown, filterValue: unknown) => {
+  if (!(cellValue instanceof Date)) return undefined;
+  if (filterValue instanceof Date) return filterValue;
+  if (typeof filterValue !== 'string' || !filterValue) return undefined;
+  const date = new Date(
+    filterValue.includes('T') ? filterValue : `${filterValue}T00:00:00`,
+  );
+  return isNaN(+date) ? undefined : date;
+};
+
+//a date filter picks a day, so dates compare by their local day and not by time
+const getDay = (date: Date) => new Date(date).setHours(0, 0, 0, 0);
+
+const fuzzy = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  columnId: string,
+  filterValue: number | string,
+  addMeta: (item: RankingInfo) => void,
+) => {
+  const itemRank = rankItem(row.getValue(columnId), filterValue as string, {
+    threshold: rankings.MATCHES,
+  });
+  addMeta(itemRank);
+  return itemRank.passed;
+};
+
+fuzzy.autoRemove = isBlankFilterValue;
+
+const contains = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) =>
+  row
+    .getValue<number | string>(id)
+    ?.toString()
+    .toLowerCase()
+    .trim()
+    .includes(filterValue.toString().toLowerCase().trim());
+
+contains.autoRemove = isBlankFilterValue;
+
+const startsWith = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) =>
+  row
+    .getValue<number | string>(id)
+    ?.toString()
+    .toLowerCase()
+    .trim()
+    .startsWith(filterValue.toString().toLowerCase().trim());
+
+startsWith.autoRemove = isBlankFilterValue;
+
+const endsWith = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) =>
+  row
+    .getValue<number | string>(id)
+    ?.toString()
+    .toLowerCase()
+    .trim()
+    .endsWith(filterValue.toString().toLowerCase().trim());
+
+endsWith.autoRemove = isBlankFilterValue;
+
+const equals = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) => {
+  const dateFilterValue = getDateFilterValue(row.getValue(id), filterValue);
+  if (dateFilterValue) {
+    return getDay(row.getValue<Date>(id)) === getDay(dateFilterValue);
+  }
+  return (
+    row.getValue<number | string>(id)?.toString().toLowerCase().trim() ===
+    filterValue?.toString().toLowerCase().trim()
+  );
+};
+
+equals.autoRemove = isBlankFilterValue;
+
+const notEquals = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) => !equals(row, id, filterValue);
+
+notEquals.autoRemove = isBlankFilterValue;
+
+const greaterThan = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  rawFilterValue: number | string,
+) => {
+  const dateFilterValue = getDateFilterValue(row.getValue(id), rawFilterValue);
+  if (dateFilterValue) {
+    return getDay(row.getValue<Date>(id)) > getDay(dateFilterValue);
+  }
+  const filterValue = rawFilterValue;
+  return !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
+    ? +row.getValue<number | string>(id) > +filterValue
+    : row.getValue<number | string>(id)?.toString().toLowerCase().trim() >
+        filterValue?.toString().toLowerCase().trim();
+};
+
+greaterThan.autoRemove = isBlankFilterValue;
+
+const greaterThanOrEqualTo = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
+
+greaterThanOrEqualTo.autoRemove = isBlankFilterValue;
+
+const lessThan = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  rawFilterValue: number | string,
+) => {
+  const dateFilterValue = getDateFilterValue(row.getValue(id), rawFilterValue);
+  if (dateFilterValue) {
+    return getDay(row.getValue<Date>(id)) < getDay(dateFilterValue);
+  }
+  const filterValue = rawFilterValue;
+  return !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
+    ? +row.getValue<number | string>(id) < +filterValue
+    : row.getValue<number | string>(id)?.toString().toLowerCase().trim() <
+        filterValue?.toString().toLowerCase().trim();
+};
+
+lessThan.autoRemove = isBlankFilterValue;
+
+const lessThanOrEqualTo = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
+
+lessThanOrEqualTo.autoRemove = isBlankFilterValue;
+
+const between = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValues: [number | string, number | string],
+) =>
+  ((['', undefined] as any[]).includes(filterValues[0]) ||
+    greaterThan(row, id, filterValues[0])) &&
+  ((!isNaN(+filterValues[0]) &&
+    !isNaN(+filterValues[1]) &&
+    +filterValues[0] > +filterValues[1]) ||
+    (['', undefined] as any[]).includes(filterValues[1]) ||
+    lessThan(row, id, filterValues[1]));
+
+between.autoRemove = isBlankFilterValue;
+
+const betweenInclusive = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValues: [number | string, number | string],
+) =>
+  ((['', undefined] as any[]).includes(filterValues[0]) ||
+    greaterThanOrEqualTo(row, id, filterValues[0])) &&
+  ((!isNaN(+filterValues[0]) &&
+    !isNaN(+filterValues[1]) &&
+    +filterValues[0] > +filterValues[1]) ||
+    (['', undefined] as any[]).includes(filterValues[1]) ||
+    lessThanOrEqualTo(row, id, filterValues[1]));
+
+betweenInclusive.autoRemove = isBlankFilterValue;
+
+const empty = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  _filterValue: number | string,
+) => !row.getValue<number | string>(id)?.toString().trim();
+
+empty.autoRemove = isBlankFilterValue;
+
+const notEmpty = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  _filterValue: number | string,
+) => !!row.getValue<number | string>(id)?.toString().trim();
+
+notEmpty.autoRemove = isBlankFilterValue;
+
+export const MRT_FilterFns = {
+  ...filterFns,
+  between,
+  betweenInclusive,
+  contains,
+  empty,
+  endsWith,
+  equals,
+  fuzzy,
+  greaterThan,
+  greaterThanOrEqualTo,
+  lessThan,
+  lessThanOrEqualTo,
+  notEmpty,
+  notEquals,
+  startsWith,
+};
+
+export function localizedFilterOption(
+  localization: MRT_Localization,
+  option: MRT_FilterOption,
+) {
+  if (!option) {
+    return '';
+  }
+  const key = `filter${option[0].toUpperCase()}${option.slice(1)}`;
+  return localization[key as keyof MRT_Localization] ?? '';
+}

package/src/fns/sortingFns.ts

@@ -0,0 +1,34 @@
+import { compareItems, type RankingInfo } from '@tanstack/match-sorter-utils';
+import { type Row, sortingFns } from '@tanstack/react-table';
+
+import { type MRT_Row, type MRT_RowData } from '../types';
+
+const fuzzy = <TData extends MRT_RowData>(
+  rowA: Row<TData>,
+  rowB: Row<TData>,
+  columnId: string,
+) => {
+  let dir = 0;
+  if (rowA.columnFiltersMeta[columnId]) {
+    dir = compareItems(
+      rowA.columnFiltersMeta[columnId] as RankingInfo,
+      rowB.columnFiltersMeta[columnId] as RankingInfo,
+    );
+  }
+  // Provide a fallback for when the item ranks are equal
+  return dir === 0
+    ? sortingFns.alphanumeric(rowA as Row<any>, rowB as Row<any>, columnId)
+    : dir;
+};
+
+export const MRT_SortingFns = {
+  ...sortingFns,
+  fuzzy,
+};
+
+export const rankGlobalFuzzy = <TData extends MRT_RowData>(
+  rowA: MRT_Row<TData>,
+  rowB: MRT_Row<TData>,
+) =>
+  Math.max(...Object.values(rowB.columnFiltersMeta).map((v: any) => v.rank)) -
+  Math.max(...Object.values(rowA.columnFiltersMeta).map((v: any) => v.rank));

package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx

@@ -0,0 +1,25 @@
+'use no memo';
+
+import { MRT_ToggleRowActionMenuButton } from '../../components/buttons/MRT_ToggleRowActionMenuButton';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+
+export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  return {
+    Cell: ({ cell, row, table }) => (
+      <MRT_ToggleRowActionMenuButton cell={cell} row={row} table={table} />
+    ),
+    ...defaultDisplayColumnProps({
+      header: 'actions',
+      id: 'mrt-row-actions',
+      size: 70,
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx

@@ -0,0 +1,32 @@
+'use no memo';
+
+import { type RefObject } from 'react';
+
+import { MRT_TableBodyRowGrabHandle } from '../../components/body/MRT_TableBodyRowGrabHandle';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+
+export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  return {
+    Cell: ({ row, rowRef, table }) => (
+      <MRT_TableBodyRowGrabHandle
+        row={row}
+        rowRef={rowRef as RefObject<HTMLTableRowElement | null>}
+        table={table}
+      />
+    ),
+    grow: false,
+    ...defaultDisplayColumnProps({
+      header: 'move',
+      id: 'mrt-row-drag',
+      size: 60,
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx

@@ -0,0 +1,94 @@
+'use no memo';
+
+import { type ReactNode } from 'react';
+
+import { Flex, Tooltip } from '@mantine/core';
+
+import { MRT_ExpandAllButton } from '../../components/buttons/MRT_ExpandAllButton';
+import { MRT_ExpandButton } from '../../components/buttons/MRT_ExpandButton';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+
+export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  const {
+    defaultColumn,
+    enableExpandAll,
+    groupedColumnMode,
+    positionExpandColumn,
+    renderDetailPanel,
+    state: { grouping },
+  } = tableOptions;
+
+  const alignProps =
+    positionExpandColumn === 'last'
+      ? ({
+          align: 'right',
+        } as const)
+      : undefined;
+
+  return {
+    Cell: ({ cell, column, row, table }) => {
+      const expandButtonProps = { row, table };
+      const subRowsLength = row.subRows?.length;
+      if (tableOptions.groupedColumnMode === 'remove' && row.groupingColumnId) {
+        return (
+          <Flex align="center" gap="0.25rem">
+            <MRT_ExpandButton {...expandButtonProps} />
+            <Tooltip
+              label={table.getColumn(row.groupingColumnId).columnDef.header}
+              openDelay={1000}
+              position="right"
+            >
+              <span>{row.groupingValue as ReactNode}</span>
+            </Tooltip>
+            {!!subRowsLength && <span>({subRowsLength})</span>}
+          </Flex>
+        );
+      } else {
+        return (
+          <>
+            <MRT_ExpandButton {...expandButtonProps} />
+            {column.columnDef.GroupedCell?.({ cell, column, row, table })}
+          </>
+        );
+      }
+    },
+    Header: enableExpandAll
+      ? ({ table }) => {
+          return (
+            <Flex align="center">
+              <MRT_ExpandAllButton table={table} />
+              {groupedColumnMode === 'remove' &&
+                grouping
+                  ?.map(
+                    (groupedColumnId) =>
+                      table.getColumn(groupedColumnId).columnDef.header,
+                  )
+                  ?.join(', ')}
+            </Flex>
+          );
+        }
+      : undefined,
+    mantineTableBodyCellProps: alignProps,
+    mantineTableHeadCellProps: alignProps,
+    ...defaultDisplayColumnProps({
+      header: 'expand',
+      id: 'mrt-row-expand',
+      size:
+        groupedColumnMode === 'remove'
+          ? (defaultColumn?.size ?? 180)
+          : renderDetailPanel
+            ? enableExpandAll
+              ? 60
+              : 70
+            : 100,
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx

@@ -0,0 +1,32 @@
+'use no memo';
+
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+
+export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  const { localization, rowNumberDisplayMode } = tableOptions;
+  const {
+    pagination: { pageIndex, pageSize },
+  } = tableOptions.state;
+
+  return {
+    Cell: ({ renderedRowIndex = 0, row }) =>
+      ((rowNumberDisplayMode === 'static'
+        ? renderedRowIndex + pageSize * pageIndex
+        : row.index) ?? 0) + 1,
+    grow: false,
+    Header: () => localization.rowNumber,
+    ...defaultDisplayColumnProps({
+      header: 'rowNumbers',
+      id: 'mrt-row-numbers',
+      size: 50,
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx

@@ -0,0 +1,26 @@
+'use no memo';
+
+import { MRT_TableBodyRowPinButton } from '../../components/body/MRT_TableBodyRowPinButton';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+
+export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  return {
+    Cell: ({ row, table }) => (
+      <MRT_TableBodyRowPinButton row={row} table={table} />
+    ),
+    grow: false,
+    ...defaultDisplayColumnProps({
+      header: 'pin',
+      id: 'mrt-row-pin',
+      size: 60,
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx

@@ -0,0 +1,36 @@
+'use no memo';
+
+import { MRT_SelectCheckbox } from '../../components/inputs/MRT_SelectCheckbox';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+
+export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  const { enableMultiRowSelection, enableSelectAll } = tableOptions;
+
+  return {
+    Cell: ({ renderedRowIndex, row, table }) => (
+      <MRT_SelectCheckbox
+        renderedRowIndex={renderedRowIndex}
+        row={row}
+        table={table}
+      />
+    ),
+    grow: false,
+    Header:
+      enableSelectAll && enableMultiRowSelection
+        ? ({ table }) => <MRT_SelectCheckbox table={table} />
+        : undefined,
+    ...defaultDisplayColumnProps({
+      header: 'select',
+      id: 'mrt-row-select',
+      size: enableSelectAll ? 60 : 70,
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx

@@ -0,0 +1,36 @@
+'use no memo';
+
+import { MRT_DefaultDisplayColumn } from '../useMRT_TableOptions';
+
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+
+const blankColProps = {
+  children: null,
+  style: {
+    minWidth: 0,
+    padding: 0,
+    width: 0,
+  },
+};
+
+export const getMRT_RowSpacerColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  return {
+    ...defaultDisplayColumnProps({
+      id: 'mrt-row-spacer',
+      size: 0,
+      tableOptions,
+    }),
+    grow: true,
+    ...MRT_DefaultDisplayColumn,
+    mantineTableBodyCellProps: blankColProps,
+    mantineTableFooterCellProps: blankColProps,
+    mantineTableHeadCellProps: blankColProps,
+  };
+};

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -0,0 +1,135 @@
+'use no memo';
+/* eslint-disable react-hooks/rules-of-hooks -- useMRT_TableOptions fixes the virtualization flags at initialization, so the early return never changes the hook order */
+
+import { useCallback, useMemo } from 'react';
+
+import { type Range, useVirtualizer } from '@tanstack/react-virtual';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import { parseFromValuesOrFunc } from '../utils/utils';
+import { extraIndexRangeExtractor } from '../utils/virtualization.utils';
+import { useMRT_VirtualizerScrollElement } from './useMRT_VirtualizerScrollElement';
+
+export const useMRT_ColumnVirtualizer = <
+  TData extends MRT_RowData,
+  TScrollElement extends Element | Window = HTMLDivElement,
+  TItemElement extends Element = HTMLTableCellElement,
+>(
+  table: MRT_TableInstance<TData>,
+): MRT_ColumnVirtualizer | undefined => {
+  const {
+    getLeftLeafColumns,
+    getRightLeafColumns,
+    getState,
+    getVisibleLeafColumns,
+    options: {
+      columnVirtualizerInstanceRef,
+      columnVirtualizerOptions,
+      enableColumnPinning,
+      enableColumnVirtualization,
+    },
+    refs: { scrollAreaViewportRef, tableContainerRef },
+  } = table;
+  const { columnPinning, draggingColumn } = getState();
+
+  if (!enableColumnVirtualization) return undefined;
+
+  const columnVirtualizerProps = parseFromValuesOrFunc(
+    columnVirtualizerOptions,
+    {
+      table,
+    },
+  );
+
+  const visibleColumns = getVisibleLeafColumns();
+
+  const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
+    () =>
+      enableColumnPinning
+        ? [
+            getLeftLeafColumns().map((c) => c.getPinnedIndex()),
+            getRightLeafColumns()
+              .map(
+                (column) => visibleColumns.length - column.getPinnedIndex() - 1,
+              )
+              .sort((a, b) => a - b),
+          ]
+        : [[], []],
+    [visibleColumns.length, columnPinning, enableColumnPinning],
+  );
+
+  const numPinnedLeft = leftPinnedIndexes.length;
+  const numPinnedRight = rightPinnedIndexes.length;
+
+  const draggingColumnIndex = useMemo(
+    () =>
+      draggingColumn?.id
+        ? visibleColumns.findIndex((c) => c.id === draggingColumn?.id)
+        : undefined,
+    [draggingColumn?.id],
+  );
+
+  const columnVirtualizer = useVirtualizer({
+    count: visibleColumns.length,
+    estimateSize: (index) => visibleColumns[index].getSize(),
+    getScrollElement: () =>
+      scrollAreaViewportRef.current ?? tableContainerRef.current,
+    horizontal: true,
+    overscan: 3,
+    rangeExtractor: useCallback(
+      (range: Range) => {
+        const newIndexes = extraIndexRangeExtractor(range, draggingColumnIndex);
+        if (!numPinnedLeft && !numPinnedRight) {
+          return newIndexes;
+        }
+        return [
+          ...new Set([
+            ...leftPinnedIndexes,
+            ...newIndexes,
+            ...rightPinnedIndexes,
+          ]),
+        ];
+      },
+      [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
+    ),
+    ...columnVirtualizerProps,
+  }) as unknown as MRT_ColumnVirtualizer<TScrollElement, TItemElement>;
+
+  useMRT_VirtualizerScrollElement(columnVirtualizer);
+
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  columnVirtualizer.virtualColumns = virtualColumns as any;
+  const numColumns = virtualColumns.length;
+
+  if (numColumns) {
+    const totalSize = columnVirtualizer.getTotalSize();
+
+    const leftNonPinnedStart = virtualColumns[numPinnedLeft]?.start || 0;
+    const leftNonPinnedEnd =
+      virtualColumns[leftPinnedIndexes.length - 1]?.end || 0;
+
+    const rightNonPinnedStart =
+      virtualColumns[numColumns - numPinnedRight]?.start || 0;
+    const rightNonPinnedEnd =
+      virtualColumns[numColumns - numPinnedRight - 1]?.end || 0;
+
+    columnVirtualizer.virtualPaddingLeft =
+      leftNonPinnedStart - leftNonPinnedEnd;
+
+    columnVirtualizer.virtualPaddingRight =
+      totalSize -
+      rightNonPinnedEnd -
+      (numPinnedRight ? totalSize - rightNonPinnedStart : 0);
+  }
+
+  if (columnVirtualizerInstanceRef) {
+    //@ts-ignore
+    columnVirtualizerInstanceRef.current = columnVirtualizer;
+  }
+
+  return columnVirtualizer as any;
+};