@kissesses/mantine-react-table-open 9.0.3

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

@@ -0,0 +1,34 @@
+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,129 @@
+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';
+
+export const useMRT_ColumnVirtualizer = <
+  TData extends MRT_RowData,
+  TScrollElement extends Element | Window = HTMLDivElement,
+  TItemElement extends Element = HTMLTableCellElement,
+>(
+  table: MRT_TableInstance<TData>,
+): MRT_ColumnVirtualizer | undefined => {
+  'use no memo';
+  const {
+    getLeftLeafColumns,
+    getRightLeafColumns,
+    getState,
+    getVisibleLeafColumns,
+    options: {
+      columnVirtualizerInstanceRef,
+      columnVirtualizerOptions,
+      enableColumnPinning,
+      enableColumnVirtualization,
+    },
+    refs: { 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: () => 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>;
+
+  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;
+};

package/src/hooks/useMRT_Effects.ts

@@ -0,0 +1,105 @@
+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>,
+) => {
+  'use no memo';
+  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;
+
+  const rerender = useReducer(() => ({}), {})[1];
+  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,95 @@
+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';
+
+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 => {
+  'use no memo';
+  const {
+    getRowModel,
+    getState,
+    options: {
+      enableRowVirtualization,
+      renderDetailPanel,
+      rowVirtualizerInstanceRef,
+      rowVirtualizerOptions,
+    },
+    refs: { 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: () => 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>;
+
+  rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems() as any;
+
+  if (rowVirtualizerInstanceRef) {
+    //@ts-ignore
+    rowVirtualizerInstanceRef.current = rowVirtualizer;
+  }
+
+  return rowVirtualizer;
+};

package/src/hooks/useMRT_Rows.ts

@@ -0,0 +1,46 @@
+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>[] => {
+  'use no memo';
+  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;
+};