@kissesses/mantine-react-table-open 9.0.3

package/src/typings.d.ts

@@ -0,0 +1 @@
+declare module '*.module.css';

package/src/utils/column.utils.ts

@@ -0,0 +1,124 @@
+import { type Row } from '@tanstack/react-table';
+
+import {
+  type MRT_Column,
+  type MRT_ColumnDef,
+  type MRT_ColumnOrderState,
+  type MRT_DefinedColumnDef,
+  type MRT_DefinedTableOptions,
+  type MRT_FilterOption,
+  type MRT_RowData,
+} 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-ignore
+        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 (['checkbox', 'date', 'select'].includes(filterVariant || ''))
+    return 'equals';
+  return 'fuzzy';
+};

package/src/utils/displayColumn.utils.ts

@@ -0,0 +1,153 @@
+import {
+  type MRT_ColumnDef,
+  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>;
+}): MRT_ColumnDef<TData> {
+  const { defaultDisplayColumn, displayColumnDefOptions, localization } =
+    tableOptions;
+  return {
+    ...defaultDisplayColumn,
+    header: header ? localization[header]! : '',
+    size,
+    ...displayColumnDefOptions?.[id],
+    id,
+  };
+}
+
+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,
+  ];
+};

package/src/utils/row.utils.ts

@@ -0,0 +1,263 @@
+import { type ChangeEvent, type MouseEvent } from 'react';
+
+import { rankGlobalFuzzy } from '../fns/sortingFns';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import { parseFromValuesOrFunc } from './utils';
+
+export const getMRT_Rows = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+  all?: boolean,
+): MRT_Row<TData>[] => {
+  const {
+    getCenterRows,
+    getPrePaginationRowModel,
+    getRowModel,
+    getState,
+    getTopRows,
+    options: {
+      createDisplayMode,
+      enablePagination,
+      enableRowPinning,
+      manualPagination,
+      positionCreatingRow,
+      rowPinningDisplayMode,
+    },
+  } = table;
+  const { creatingRow, pagination } = getState();
+
+  const isRankingRows = getIsRankingRows(table);
+
+  let rows: MRT_Row<TData>[] = [];
+  if (!isRankingRows) {
+    rows =
+      !enableRowPinning || rowPinningDisplayMode?.includes('sticky')
+        ? all
+          ? getPrePaginationRowModel().rows
+          : getRowModel().rows
+        : getCenterRows();
+  } else {
+    // fuzzy ranking adjustments
+    rows = getPrePaginationRowModel().rows.sort((a, b) =>
+      rankGlobalFuzzy(a, b),
+    );
+    if (enablePagination && !manualPagination && !all) {
+      const start = pagination.pageIndex * pagination.pageSize;
+      rows = rows.slice(start, start + pagination.pageSize);
+    }
+    if (enableRowPinning && !rowPinningDisplayMode?.includes('sticky')) {
+      // "re-center-ize" the rows (no top or bottom pinned rows unless sticky)
+      rows = rows.filter((row) => !row.getIsPinned());
+    }
+  }
+  // row pinning adjustments
+  if (enableRowPinning && rowPinningDisplayMode?.includes('sticky')) {
+    const centerPinnedRowIds = rows
+      .filter((row) => row.getIsPinned())
+      .map((r) => r.id);
+
+    rows = [
+      ...getTopRows().filter((row) => !centerPinnedRowIds.includes(row.id)),
+      ...rows,
+    ];
+  }
+  // blank inserted creating row adjustments
+  if (
+    positionCreatingRow !== undefined &&
+    creatingRow &&
+    createDisplayMode === 'row'
+  ) {
+    const creatingRowIndex = !isNaN(+positionCreatingRow)
+      ? +positionCreatingRow
+      : positionCreatingRow === 'top'
+        ? 0
+        : rows.length;
+    rows = [
+      ...rows.slice(0, creatingRowIndex),
+      creatingRow,
+      ...rows.slice(creatingRowIndex),
+    ];
+  }
+
+  return rows;
+};
+
+export const getCanRankRows = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+) => {
+  const {
+    getState,
+    options: {
+      enableGlobalFilterRankedResults,
+      manualExpanding,
+      manualFiltering,
+      manualGrouping,
+      manualSorting,
+    },
+  } = table;
+  const { expanded, globalFilterFn } = getState();
+
+  return (
+    !manualExpanding &&
+    !manualFiltering &&
+    !manualGrouping &&
+    !manualSorting &&
+    enableGlobalFilterRankedResults &&
+    globalFilterFn === 'fuzzy' &&
+    expanded !== true &&
+    !Object.values(expanded).some(Boolean)
+  );
+};
+
+export const getIsRankingRows = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+) => {
+  const { globalFilter, sorting } = table.getState();
+
+  return (
+    getCanRankRows(table) &&
+    globalFilter &&
+    !Object.values(sorting).some(Boolean)
+  );
+};
+
+export const getIsRowSelected = <TData extends MRT_RowData>({
+  row,
+  table,
+}: {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}) => {
+  const {
+    options: { enableRowSelection },
+  } = table;
+
+  return (
+    row.getIsSelected() ||
+    (parseFromValuesOrFunc(enableRowSelection, row) &&
+      row.getCanSelectSubRows() &&
+      row.getIsAllSubRowsSelected())
+  );
+};
+
+export const getMRT_RowSelectionHandler =
+  <TData extends MRT_RowData>({
+    renderedRowIndex = 0,
+    row,
+    table,
+  }: {
+    renderedRowIndex?: number;
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+  }) =>
+  (
+    event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLTableRowElement>,
+    value?: boolean,
+  ) => {
+    const {
+      getState,
+      options: {
+        enableBatchRowSelection,
+        enableMultiRowSelection,
+        enableRowPinning,
+        manualPagination,
+        rowPinningDisplayMode,
+      },
+      refs: { lastSelectedRowId: lastSelectedRowId },
+    } = table;
+    const {
+      pagination: { pageIndex, pageSize },
+    } = getState();
+
+    const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
+
+    const wasCurrentRowChecked = getIsRowSelected({ row, table });
+
+    // toggle selection of this row
+    row.toggleSelected(value ?? !wasCurrentRowChecked);
+
+    const changedRowIds = new Set<string>([row.id]);
+
+    // if shift key is pressed, select all rows between last selected and this one
+    if (
+      enableBatchRowSelection &&
+      enableMultiRowSelection &&
+      (event as any).nativeEvent.shiftKey &&
+      lastSelectedRowId.current !== null
+    ) {
+      const rows = getMRT_Rows(table, true);
+
+      const lastIndex = rows.findIndex(
+        (r) => r.id === lastSelectedRowId.current,
+      );
+
+      if (lastIndex !== -1) {
+        const isLastIndexChecked = getIsRowSelected({
+          row: rows?.[lastIndex],
+          table,
+        });
+
+        const currentIndex = renderedRowIndex + paginationOffset;
+        const [start, end] =
+          lastIndex < currentIndex
+            ? [lastIndex, currentIndex]
+            : [currentIndex, lastIndex];
+
+        // toggle selection of all rows between last selected and this one
+        // but only if the last selected row is not the same as the current one
+        if (wasCurrentRowChecked !== isLastIndexChecked) {
+          for (let i = start; i <= end; i++) {
+            rows[i].toggleSelected(!wasCurrentRowChecked);
+            changedRowIds.add(rows[i].id);
+          }
+        }
+      }
+    }
+
+    // record the last selected row id
+    lastSelectedRowId.current = row.id;
+
+    // if all sub rows were selected, unselect them
+    if (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) {
+      row.subRows?.forEach((r) => r.toggleSelected(false));
+    }
+
+    if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {
+      changedRowIds.forEach((rowId) => {
+        const rowToTogglePin = table.getRow(rowId);
+        rowToTogglePin.pin(
+          !wasCurrentRowChecked //was not previously pinned or selected
+            ? rowPinningDisplayMode?.includes('bottom')
+              ? 'bottom'
+              : 'top'
+            : false,
+        );
+      });
+    }
+  };
+
+export const getMRT_SelectAllHandler =
+  <TData extends MRT_RowData>({ table }: { table: MRT_TableInstance<TData> }) =>
+  (
+    event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,
+    value?: boolean,
+    forceAll?: boolean,
+  ) => {
+    const {
+      options: { enableRowPinning, rowPinningDisplayMode, selectAllMode },
+      refs: { lastSelectedRowId },
+    } = table;
+
+    if (selectAllMode === 'all' || forceAll) {
+      table.toggleAllRowsSelected(value ?? (event as any).target.checked);
+    } else {
+      table.toggleAllPageRowsSelected(value ?? (event as any).target.checked);
+    }
+    if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {
+      table.setRowPinning({ bottom: [], top: [] });
+    }
+    lastSelectedRowId.current = null;
+  };

package/src/utils/style.utils.ts

@@ -0,0 +1,32 @@
+import { type MantineTheme } from '@mantine/core';
+
+import { type MantineShade } from '../types';
+
+export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
+
+export const getPrimaryShade = (theme: MantineTheme): number =>
+  typeof theme.primaryShade === 'number'
+    ? theme.primaryShade
+    : (theme.primaryShade?.dark ?? 7);
+
+export const getPrimaryColor = (
+  theme: MantineTheme,
+  shade?: MantineShade,
+): string => theme.colors[theme.primaryColor][shade ?? getPrimaryShade(theme)];
+
+export function dataVariable(
+  name: string,
+  value: boolean | number | string | undefined,
+) {
+  const key = `data-${name}`;
+  switch (typeof value) {
+    case 'boolean':
+      return value ? { [key]: '' } : null;
+    case 'number':
+      return { [key]: `${value}` };
+    case 'string':
+      return { [key]: value };
+    default:
+      return null;
+  }
+}

package/src/utils/tanstack.helpers.ts

@@ -0,0 +1,66 @@
+import { type JSX, type ReactNode } from 'react';
+
+import {
+  createRow as _createRow,
+  flexRender as _flexRender,
+  type Renderable,
+} from '@tanstack/react-table';
+
+import {
+  type MRT_ColumnHelper,
+  type MRT_DisplayColumnDef,
+  type MRT_GroupColumnDef,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import { getAllLeafColumnDefs, getColumnId } from './column.utils';
+
+export const flexRender = _flexRender as (
+  Comp: Renderable<any>,
+  props: any,
+) => JSX.Element | ReactNode;
+
+export function createMRTColumnHelper<
+  TData extends MRT_RowData,
+>(): MRT_ColumnHelper<TData> {
+  return {
+    accessor: (accessor, column) => {
+      return typeof accessor === 'function'
+        ? ({
+            ...column,
+            accessorFn: accessor,
+          } as any)
+        : {
+            ...column,
+            accessorKey: accessor,
+          };
+    },
+    display: (column) => column as MRT_DisplayColumnDef<TData>,
+    group: (column) => column as MRT_GroupColumnDef<TData>,
+  };
+}
+
+export const createRow = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+  originalRow?: TData,
+  rowIndex = -1,
+  depth = 0,
+  subRows?: MRT_Row<TData>[],
+  parentId?: string,
+): MRT_Row<TData> =>
+  _createRow(
+    table as any,
+    'mrt-row-create',
+    originalRow ??
+      Object.assign(
+        {},
+        ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
+          [getColumnId(col)]: '',
+        })),
+      ),
+    rowIndex,
+    depth,
+    subRows as any,
+    parentId,
+  ) as MRT_Row<TData>;

package/src/utils/utils.ts

@@ -0,0 +1,4 @@
+export const parseFromValuesOrFunc = <T, U>(
+  fn: ((arg: U) => T) | T | undefined,
+  arg: U,
+): T | undefined => (fn instanceof Function ? fn(arg) : fn);

package/src/utils/virtualization.utils.ts

@@ -0,0 +1,19 @@
+import { defaultRangeExtractor, type Range } from '@tanstack/react-virtual';
+
+export const extraIndexRangeExtractor = (
+  range: Range,
+  draggingIndex?: number,
+) => {
+  const newIndexes = defaultRangeExtractor(range);
+  if (draggingIndex === undefined) return newIndexes;
+  if (
+    draggingIndex >= 0 &&
+    draggingIndex < Math.max(range.startIndex - range.overscan, 0)
+  ) {
+    newIndexes.unshift(draggingIndex);
+  }
+  if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
+    newIndexes.push(draggingIndex);
+  }
+  return newIndexes;
+};