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

package/src/hooks/useMRT_Effects.ts

@@ -0,0 +1,109 @@
+'use no memo';
+
+import { useEffect, useReducer, useRef } from 'react';
+
+import {
+  type MRT_RowData,
+  type MRT_SortingState,
+  type MRT_TableInstance,
+} from '../types';
+import { getDefaultColumnOrderIds } from '../utils/displayColumn.utils';
+import { getCanRankRows } from '../utils/row.utils';
+
+export const useMRT_Effects = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+  rerenderTable?: () => void,
+) => {
+  const {
+    getIsSomeRowsPinned,
+    getPrePaginationRowModel,
+    getState,
+    options: { enablePagination, enableRowPinning, rowCount },
+  } = table;
+  const {
+    columnOrder,
+    density,
+    globalFilter,
+    isFullScreen,
+    isLoading,
+    pagination,
+    showSkeletons,
+    sorting,
+  } = getState();
+
+  const totalColumnCount = table.options.columns.length;
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+
+  //`rerenderTable` also changes the table reference, which compiled consumer code needs
+  const rerenderSelf = useReducer(() => ({}), {})[1];
+  const rerender = rerenderTable ?? rerenderSelf;
+  const initialBodyHeight = useRef<string | undefined>(undefined);
+  const previousTop = useRef<number | undefined>(undefined);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      initialBodyHeight.current = document.body.style.height;
+    }
+  }, []);
+
+  //hide scrollbars when table is in full screen mode, preserve body scroll position after full screen exit
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      if (isFullScreen) {
+        previousTop.current = document.body.getBoundingClientRect().top; //save scroll position
+        document.body.style.height = '100dvh'; //hide page scrollbars when table is in full screen mode
+      } else {
+        document.body.style.height = initialBodyHeight.current as string;
+        if (!previousTop.current) return;
+        //restore scroll position
+        window.scrollTo({
+          behavior: 'instant',
+          top: -1 * (previousTop.current as number),
+        });
+      }
+    }
+  }, [isFullScreen]);
+
+  //recalculate column order when columns change or features are toggled on/off
+  useEffect(() => {
+    if (totalColumnCount !== columnOrder.length) {
+      table.setColumnOrder(getDefaultColumnOrderIds(table.options));
+    }
+  }, [totalColumnCount]);
+
+  //if page index is out of bounds, set it to the last page
+  useEffect(() => {
+    if (!enablePagination || isLoading || showSkeletons) return;
+    const { pageIndex, pageSize } = pagination;
+    const firstVisibleRowIndex = pageIndex * pageSize;
+    if (firstVisibleRowIndex >= totalRowCount && firstVisibleRowIndex > 0) {
+      table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
+    }
+  }, [totalRowCount]);
+
+  //turn off sort when global filter is looking for ranked results
+  const appliedSort = useRef<MRT_SortingState>(sorting);
+  useEffect(() => {
+    if (sorting.length) {
+      appliedSort.current = sorting;
+    }
+  }, [sorting]);
+
+  useEffect(() => {
+    if (!getCanRankRows(table)) return;
+    if (globalFilter) {
+      table.setSorting([]);
+    } else {
+      table.setSorting(() => appliedSort.current || []);
+    }
+  }, [globalFilter]);
+
+  //fix pinned row top style when density changes
+  useEffect(() => {
+    if (enableRowPinning && getIsSomeRowsPinned()) {
+      setTimeout(() => {
+        rerender();
+      }, 150);
+    }
+  }, [density]);
+};

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -0,0 +1,101 @@
+'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 } from 'react';
+
+import { type Range, useVirtualizer } from '@tanstack/react-virtual';
+
+import {
+  type MRT_DensityState,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_RowVirtualizer,
+  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_RowVirtualizer = <
+  TData extends MRT_RowData,
+  TScrollElement extends Element | Window = HTMLDivElement,
+  TItemElement extends Element = HTMLTableRowElement,
+>(
+  table: MRT_TableInstance<TData>,
+  rows?: MRT_Row<TData>[],
+): MRT_RowVirtualizer<TScrollElement, TItemElement> | undefined => {
+  const {
+    getRowModel,
+    getState,
+    options: {
+      enableRowVirtualization,
+      renderDetailPanel,
+      rowVirtualizerInstanceRef,
+      rowVirtualizerOptions,
+    },
+    refs: { scrollAreaViewportRef, tableContainerRef },
+  } = table;
+  const { density, draggingRow, expanded } = getState();
+
+  if (!enableRowVirtualization) return undefined;
+
+  const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
+    table,
+  });
+
+  const rowCount = rows?.length ?? getRowModel().rows.length;
+
+  const defaultRowHeightByDensity: Record<MRT_DensityState, number> = {
+    lg: 62.7,
+    md: 54.7,
+    sm: 48.7,
+    xl: 70.7,
+    xs: 42.7,
+  };
+
+  const normalRowHeight =
+    defaultRowHeightByDensity[density] ?? defaultRowHeightByDensity['md'];
+
+  const rowVirtualizer = useVirtualizer({
+    count: renderDetailPanel ? rowCount * 2 : rowCount,
+    estimateSize: (index) =>
+      renderDetailPanel && index % 2 === 1
+        ? expanded === true
+          ? 100
+          : 0
+        : normalRowHeight,
+    getScrollElement: () =>
+      scrollAreaViewportRef.current ?? tableContainerRef.current,
+    measureElement:
+      typeof window !== 'undefined' &&
+      navigator.userAgent.indexOf('Firefox') === -1
+        ? (element) => element?.getBoundingClientRect().height
+        : undefined,
+    overscan: 4,
+    rangeExtractor: useCallback(
+      (range: Range) => {
+        const current_index = getRowModel().rows.findIndex(
+          (row) => row.id === draggingRow?.id,
+        );
+
+        return extraIndexRangeExtractor(
+          range,
+          current_index >= 0 ? current_index : 0,
+        );
+      },
+      [draggingRow],
+    ),
+    ...rowVirtualizerProps,
+  }) as unknown as MRT_RowVirtualizer<TScrollElement, TItemElement>;
+
+  useMRT_VirtualizerScrollElement(rowVirtualizer);
+
+  rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems() as any;
+
+  if (rowVirtualizerInstanceRef) {
+    //@ts-ignore
+    rowVirtualizerInstanceRef.current = rowVirtualizer;
+  }
+
+  return rowVirtualizer;
+};

package/src/hooks/useMRT_Rows.ts

@@ -0,0 +1,47 @@
+'use no memo';
+
+import { useMemo } from 'react';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import { getMRT_Rows } from '../utils/row.utils';
+
+export const useMRT_Rows = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+): MRT_Row<TData>[] => {
+  const {
+    getRowModel,
+    getState,
+    options: { data, enableGlobalFilterRankedResults, positionCreatingRow },
+  } = table;
+  const {
+    creatingRow,
+    expanded,
+    globalFilter,
+    pagination,
+    rowPinning,
+    sorting,
+  } = getState();
+
+  const rows = useMemo(
+    () => getMRT_Rows(table),
+    [
+      creatingRow,
+      data,
+      enableGlobalFilterRankedResults,
+      expanded,
+      getRowModel().rows,
+      globalFilter,
+      pagination.pageIndex,
+      pagination.pageSize,
+      positionCreatingRow,
+      rowPinning,
+      sorting,
+    ],
+  );
+
+  return rows;
+};

package/src/hooks/useMRT_TableInstance.ts

@@ -0,0 +1,320 @@
+'use no memo';
+
+import { useMemo, useRef, useState } from 'react';
+
+import { useReactTable } from '@tanstack/react-table';
+
+import {
+  type MRT_Cell,
+  type MRT_Column,
+  type MRT_ColumnDef,
+  type MRT_ColumnFilterFnsState,
+  type MRT_ColumnOrderState,
+  type MRT_ColumnSizingInfoState,
+  type MRT_DefinedTableOptions,
+  type MRT_DensityState,
+  type MRT_FilterOption,
+  type MRT_GroupingState,
+  type MRT_PaginationState,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+  type MRT_TableInstance,
+  type MRT_TableState,
+  type MRT_Updater,
+} from '../types';
+import {
+  getAllLeafColumnDefs,
+  getColumnId,
+  getDefaultColumnFilterFn,
+  prepareColumns,
+} from '../utils/column.utils';
+import {
+  getDefaultColumnOrderIds,
+  showRowActionsColumn,
+  showRowDragColumn,
+  showRowExpandColumn,
+  showRowNumbersColumn,
+  showRowPinningColumn,
+  showRowSelectionColumn,
+  showRowSpacerColumn,
+} from '../utils/displayColumn.utils';
+import { createRow } from '../utils/tanstack.helpers';
+import { getMRT_RowActionsColumnDef } from './display-columns/getMRT_RowActionsColumnDef';
+import { getMRT_RowDragColumnDef } from './display-columns/getMRT_RowDragColumnDef';
+import { getMRT_RowExpandColumnDef } from './display-columns/getMRT_RowExpandColumnDef';
+import { getMRT_RowNumbersColumnDef } from './display-columns/getMRT_RowNumbersColumnDef';
+import { getMRT_RowPinningColumnDef } from './display-columns/getMRT_RowPinningColumnDef';
+import { getMRT_RowSelectColumnDef } from './display-columns/getMRT_RowSelectColumnDef';
+import { getMRT_RowSpacerColumnDef } from './display-columns/getMRT_RowSpacerColumnDef';
+import { useMRT_Effects } from './useMRT_Effects';
+
+/**
+ * The MRT hook that wraps the TanStack useReactTable hook and adds additional functionality
+ * @param definedTableOptions - table options with proper defaults set
+ * @param rerender - re-renders the owner of the table instance and changes the table reference
+ * @returns the MRT table instance
+ */
+export const useMRT_TableInstance = <TData extends MRT_RowData>(
+  definedTableOptions: MRT_DefinedTableOptions<TData>,
+  rerender?: () => void,
+): MRT_TableInstance<TData> => {
+  const lastSelectedRowId = useRef<null | string>(null);
+  const bottomToolbarRef = useRef<HTMLDivElement>(null);
+  const editInputRefs = useRef<Record<string, HTMLInputElement>>({});
+  const filterInputRefs = useRef<Record<string, HTMLInputElement>>({});
+  const scrollAreaViewportRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const tableHeadCellRefs = useRef<Record<string, HTMLTableCellElement>>({});
+  const tablePaperRef = useRef<HTMLDivElement>(null);
+  const topToolbarRef = useRef<HTMLDivElement>(null);
+  const tableHeadRef = useRef<HTMLTableSectionElement>(null);
+  const tableFooterRef = useRef<HTMLTableSectionElement>(null);
+
+  //transform initial state with proper column order
+  const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
+    const initState = definedTableOptions.initialState ?? {};
+    initState.columnOrder =
+      initState.columnOrder ??
+      getDefaultColumnOrderIds({
+        ...definedTableOptions,
+        state: {
+          ...definedTableOptions.initialState,
+          ...definedTableOptions.state,
+        },
+      } as MRT_StatefulTableOptions<TData>);
+    initState.globalFilterFn = definedTableOptions.globalFilterFn ?? 'fuzzy';
+    return initState;
+  }, []);
+
+  definedTableOptions.initialState = initialState;
+
+  const [creatingRow, _setCreatingRow] = useState<MRT_Row<TData> | null>(
+    initialState.creatingRow ?? null,
+  );
+  const [columnFilterFns, setColumnFilterFns] =
+    useState<MRT_ColumnFilterFnsState>(() =>
+      Object.assign(
+        {},
+        ...getAllLeafColumnDefs(
+          definedTableOptions.columns as MRT_ColumnDef<TData>[],
+        ).map((col) => ({
+          [getColumnId(col)]:
+            col.filterFn instanceof Function
+              ? (col.filterFn.name ?? 'custom')
+              : (col.filterFn ??
+                initialState?.columnFilterFns?.[getColumnId(col)] ??
+                getDefaultColumnFilterFn(col)),
+        })),
+      ),
+    );
+  const [columnOrder, onColumnOrderChange] = useState<MRT_ColumnOrderState>(
+    initialState.columnOrder ?? [],
+  );
+  const [columnSizingInfo, onColumnSizingInfoChange] =
+    useState<MRT_ColumnSizingInfoState>(
+      initialState.columnSizingInfo ?? ({} as MRT_ColumnSizingInfoState),
+    );
+  const [density, setDensity] = useState<MRT_DensityState>(
+    initialState?.density ?? 'md',
+  );
+  const [draggingColumn, setDraggingColumn] =
+    useState<MRT_Column<TData> | null>(initialState.draggingColumn ?? null);
+  const [draggingRow, setDraggingRow] = useState<MRT_Row<TData> | null>(
+    initialState.draggingRow ?? null,
+  );
+  const [editingCell, setEditingCell] = useState<MRT_Cell<TData> | null>(
+    initialState.editingCell ?? null,
+  );
+  const [editingRow, setEditingRow] = useState<MRT_Row<TData> | null>(
+    initialState.editingRow ?? null,
+  );
+  const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(
+    initialState.globalFilterFn ?? 'fuzzy',
+  );
+  const [grouping, onGroupingChange] = useState<MRT_GroupingState>(
+    initialState.grouping ?? [],
+  );
+  const [hoveredColumn, setHoveredColumn] = useState<null | Partial<
+    MRT_Column<TData>
+  >>(initialState.hoveredColumn ?? null);
+  const [hoveredRow, setHoveredRow] = useState<null | Partial<MRT_Row<TData>>>(
+    initialState.hoveredRow ?? null,
+  );
+  const [isFullScreen, setIsFullScreen] = useState<boolean>(
+    initialState?.isFullScreen ?? false,
+  );
+  const [pagination, onPaginationChange] = useState<MRT_PaginationState>(
+    initialState?.pagination ?? { pageIndex: 0, pageSize: 10 },
+  );
+  const [showAlertBanner, setShowAlertBanner] = useState<boolean>(
+    initialState?.showAlertBanner ?? false,
+  );
+  const [showColumnFilters, setShowColumnFilters] = useState<boolean>(
+    initialState?.showColumnFilters ?? false,
+  );
+  const [showGlobalFilter, setShowGlobalFilter] = useState<boolean>(
+    initialState?.showGlobalFilter ?? false,
+  );
+  const [showToolbarDropZone, setShowToolbarDropZone] = useState<boolean>(
+    initialState?.showToolbarDropZone ?? false,
+  );
+
+  definedTableOptions.state = {
+    columnFilterFns,
+    columnOrder,
+    columnSizingInfo,
+    creatingRow,
+    density,
+    draggingColumn,
+    draggingRow,
+    editingCell,
+    editingRow,
+    globalFilterFn,
+    grouping,
+    hoveredColumn,
+    hoveredRow,
+    isFullScreen,
+    pagination,
+    showAlertBanner,
+    showColumnFilters,
+    showGlobalFilter,
+    showToolbarDropZone,
+    ...definedTableOptions.state,
+  };
+
+  //The table options now include all state needed to help determine column visibility and order logic
+  const statefulTableOptions =
+    definedTableOptions as MRT_StatefulTableOptions<TData>;
+
+  //don't recompute columnDefs while resizing column or dragging column/row
+  const columnDefsRef = useRef<MRT_ColumnDef<TData>[]>([]);
+  statefulTableOptions.columns =
+    statefulTableOptions.state.columnSizingInfo.isResizingColumn ||
+    statefulTableOptions.state.draggingColumn ||
+    statefulTableOptions.state.draggingRow
+      ? columnDefsRef.current
+      : prepareColumns({
+          columnDefs: [
+            ...([
+              showRowPinningColumn(statefulTableOptions) &&
+                getMRT_RowPinningColumnDef(statefulTableOptions),
+              showRowDragColumn(statefulTableOptions) &&
+                getMRT_RowDragColumnDef(statefulTableOptions),
+              showRowActionsColumn(statefulTableOptions) &&
+                getMRT_RowActionsColumnDef(statefulTableOptions),
+              showRowExpandColumn(statefulTableOptions) &&
+                getMRT_RowExpandColumnDef(statefulTableOptions),
+              showRowSelectionColumn(statefulTableOptions) &&
+                getMRT_RowSelectColumnDef(statefulTableOptions),
+              showRowNumbersColumn(statefulTableOptions) &&
+                getMRT_RowNumbersColumnDef(statefulTableOptions),
+            ].filter(Boolean) as MRT_ColumnDef<TData>[]),
+            ...statefulTableOptions.columns,
+            ...([
+              showRowSpacerColumn(statefulTableOptions) &&
+                getMRT_RowSpacerColumnDef(statefulTableOptions),
+            ].filter(Boolean) as MRT_ColumnDef<TData>[]),
+          ],
+          tableOptions: statefulTableOptions,
+        });
+  columnDefsRef.current = statefulTableOptions.columns;
+
+  //if loading, generate blank rows to show skeleton loaders
+  statefulTableOptions.data = useMemo(
+    () =>
+      (statefulTableOptions.state.isLoading ||
+        statefulTableOptions.state.showSkeletons) &&
+      !statefulTableOptions.data.length
+        ? [
+            ...Array(
+              Math.min(statefulTableOptions.state.pagination.pageSize, 20),
+            ).fill(null),
+          ].map(() =>
+            Object.assign(
+              //`prepareColumns` skips a custom accessorFn for rows with this key
+              { [Symbol.for('mrt-skeleton-row')]: true },
+              ...getAllLeafColumnDefs(statefulTableOptions.columns).map(
+                (col) => ({
+                  [getColumnId(col)]: null,
+                }),
+              ),
+            ),
+          )
+        : statefulTableOptions.data,
+    [
+      statefulTableOptions.data,
+      statefulTableOptions.state.isLoading,
+      statefulTableOptions.state.showSkeletons,
+    ],
+  );
+
+  //@ts-ignore
+  const table = useReactTable({
+    onColumnOrderChange,
+    onColumnSizingInfoChange,
+    onGroupingChange,
+    onPaginationChange,
+    ...statefulTableOptions,
+    globalFilterFn: statefulTableOptions.filterFns?.[globalFilterFn ?? 'fuzzy'],
+  }) as MRT_TableInstance<TData>;
+
+  table.refs = {
+    bottomToolbarRef,
+    editInputRefs,
+    filterInputRefs,
+    lastSelectedRowId,
+    scrollAreaViewportRef,
+    searchInputRef,
+    tableContainerRef,
+    tableFooterRef,
+    tableHeadCellRefs,
+    tableHeadRef,
+    tablePaperRef,
+    topToolbarRef,
+  };
+
+  table.setCreatingRow = (row: MRT_Updater<MRT_Row<TData> | null | true>) => {
+    let _row = row;
+    if (row === true) {
+      _row = createRow(table);
+    }
+    if (statefulTableOptions?.onCreatingRowChange) {
+      statefulTableOptions.onCreatingRowChange(_row as MRT_Row<TData> | null);
+    } else {
+      _setCreatingRow(_row as MRT_Row<TData> | null);
+    }
+  };
+  table.setColumnFilterFns =
+    statefulTableOptions.onColumnFilterFnsChange ?? setColumnFilterFns;
+  table.setDensity = statefulTableOptions.onDensityChange ?? setDensity;
+  table.setDraggingColumn =
+    statefulTableOptions.onDraggingColumnChange ?? setDraggingColumn;
+  table.setDraggingRow =
+    statefulTableOptions.onDraggingRowChange ?? setDraggingRow;
+  table.setEditingCell =
+    statefulTableOptions.onEditingCellChange ?? setEditingCell;
+  table.setEditingRow =
+    statefulTableOptions.onEditingRowChange ?? setEditingRow;
+  table.setGlobalFilterFn =
+    statefulTableOptions.onGlobalFilterFnChange ?? setGlobalFilterFn;
+  table.setHoveredColumn =
+    statefulTableOptions.onHoveredColumnChange ?? setHoveredColumn;
+  table.setHoveredRow =
+    statefulTableOptions.onHoveredRowChange ?? setHoveredRow;
+  table.setIsFullScreen =
+    statefulTableOptions.onIsFullScreenChange ?? setIsFullScreen;
+  table.setShowAlertBanner =
+    statefulTableOptions.onShowAlertBannerChange ?? setShowAlertBanner;
+  table.setShowColumnFilters =
+    statefulTableOptions.onShowColumnFiltersChange ?? setShowColumnFilters;
+  table.setShowGlobalFilter =
+    statefulTableOptions.onShowGlobalFilterChange ?? setShowGlobalFilter;
+  table.setShowToolbarDropZone =
+    statefulTableOptions.onShowToolbarDropZoneChange ?? setShowToolbarDropZone;
+
+  useMRT_Effects(table, rerender);
+
+  return table;
+};