@dxos/react-ui-table 0.4.10-main.dfa0529 → 0.4.10-main.e17362e

package/src/components/Table/Table.tsx

@@ -14,7 +14,6 @@ import {
   type RowSelectionState,
   getGroupedRowModel,
   getExpandedRowModel,
-  type Row,
 } from '@tanstack/react-table';
 import { useVirtualizer, type VirtualizerOptions } from '@tanstack/react-virtual';
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
@@ -178,7 +177,12 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
  */
 const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
   const { debug, classNames, getScrollElement, role, footer, grouping, fullWidth } = props;
-  const { table } = useTableContext<TData>();
+  const { table } = useTableContext();
+
+  const centerRows = table.getCenterRows();
+  const bottomRows = table.getBottomRows();
+
+  const rows = [...centerRows, ...bottomRows];
 
   if (debug) {
     return (
@@ -207,7 +211,7 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
             <VirtualizedTableContent getScrollElement={getScrollElement} />
           )
         ) : (
-          <UnvirtualizedTableContent />
+          <TableBody rows={rows} />
         )
       ) : (
         <GroupedTableContent />
@@ -218,32 +222,13 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
   );
 };
 
-const UnvirtualizedTableContent = () => {
-  const { table } = useTableContext();
-
-  const centerRows = table.getCenterRows();
-  const pinnedRows = table.getBottomRows();
-
-  const rows = [...centerRows, ...pinnedRows];
-
-  return <TableBody rows={rows} />;
-};
-
 const VirtualizedTableContent = ({
   getScrollElement,
 }: Pick<VirtualizerOptions<Element, Element>, 'getScrollElement'>) => {
   const { table } = useTableContext();
 
   const centerRows = table.getCenterRows();
-  let pinnedRows = [] as Row<unknown>[];
-
-  try {
-    // TODO(zan): Work out how to sync the row pinning with rendering
-    // This is a hack because the first call to this function after a row is deleted will throw an error
-    // because the row index is no longer in the table
-    // The pin last row hook updates the pinned row key after the row is deleted
-    pinnedRows = table.getBottomRows();
-  } catch (_) {} // Ignore error
+  const pinnedRows = table.getBottomRows();
 
   const { getTotalSize, getVirtualItems } = useVirtualizer({
     getScrollElement,

package/src/hooks/usePinLastRow.ts

@@ -2,63 +2,42 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Row, type Table } from '@tanstack/react-table';
-import { useCallback, useEffect, useState } from 'react';
+import { type Table } from '@tanstack/react-table';
+import { useEffect, useState } from 'react';
 
 export const usePinLastRow = (
   pinLastRow: boolean | undefined,
   table: Table<any>,
-  data: any[],
+  data: any,
   getScrollElement?: () => Element | null,
 ) => {
   const [pinnedRowKey, setPinnedRowKey] = useState<string>();
 
-  // Scrolls to the bottom of a scrollable element.
-  const scrollToBottom = useCallback(() => {
-    const scrollElement = getScrollElement?.();
-    if (scrollElement) {
-      requestAnimationFrame(() => scrollElement.scrollTo({ top: scrollElement.scrollHeight }));
+  useEffect(() => {
+    if (!pinLastRow) {
+      return;
     }
-  }, [getScrollElement]);
-
-  const pinRow = useCallback(
-    (rowToPin: Row<any>) => {
-      table.resetRowPinning();
-      rowToPin.pin('bottom');
-      setPinnedRowKey(rowToPin.id);
-    },
-    [table],
-  );
 
-  const clearRowPinning = useCallback(() => {
-    table.resetRowPinning();
-    setPinnedRowKey(undefined);
-  }, [table]);
-
-  // Define the logic for pinning the last row in a callback.
-  const pinLastRowCallback = useCallback(() => {
     const rows = table.getRowModel().rows;
+    const rowToPin = rows[rows.length - 1];
+    const rowId = rowToPin.id;
 
-    if (rows.length === 0) {
-      return clearRowPinning();
-    }
-
-    const lastRow = rows[rows.length - 1];
-    if (lastRow.id === pinnedRowKey) {
+    if (rowId === pinnedRowKey) {
       return;
     }
 
-    pinRow(lastRow);
+    table.resetRowPinning();
+    rowToPin.pin('bottom');
 
-    if (pinnedRowKey !== undefined) {
-      scrollToBottom();
-    }
-  }, [table, scrollToBottom, pinnedRowKey]);
+    const scrollElement = getScrollElement?.();
+    const isFirstRender = pinnedRowKey === undefined;
 
-  // Effect to handle pinning logic when data changes.
-  useEffect(() => {
-    if (pinLastRow) {
-      pinLastRowCallback();
+    if (scrollElement && !isFirstRender) {
+      requestAnimationFrame(() => {
+        scrollElement.scrollTo({ top: scrollElement.scrollHeight });
+      });
     }
-  }, [data, pinLastRow, pinLastRowCallback]);
+
+    setPinnedRowKey(rowId);
+  }, [pinLastRow, table, getScrollElement, pinnedRowKey, setPinnedRowKey, data]);
 };