@dxos/react-ui-table 0.4.10-main.c42bfdb → 0.4.10-main.c75170d

package/src/components/Table/Table.tsx

@@ -14,6 +14,7 @@ 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';
@@ -177,12 +178,7 @@ 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();
-
-  const centerRows = table.getCenterRows();
-  const bottomRows = table.getBottomRows();
-
-  const rows = [...centerRows, ...bottomRows];
+  const { table } = useTableContext<TData>();
 
   if (debug) {
     return (
@@ -211,7 +207,7 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
             <VirtualizedTableContent getScrollElement={getScrollElement} />
           )
         ) : (
-          <TableBody rows={rows} />
+          <UnvirtualizedTableContent />
         )
       ) : (
         <GroupedTableContent />
@@ -222,13 +218,32 @@ 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();
-  const pinnedRows = table.getBottomRows();
+  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 { getTotalSize, getVirtualItems } = useVirtualizer({
     getScrollElement,

package/src/hooks/usePinLastRow.ts

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

package/src/schema/SchemaToTable.stories.tsx

@@ -5,10 +5,10 @@
 import '@dxosTheme';
 
 import * as Arbitrary from '@effect/schema/Arbitrary';
-import * as S from '@effect/schema/Schema';
 import * as fc from 'fast-check';
 import React, { useRef } from 'react';
 
+import { S } from '@dxos/echo-schema';
 import { DensityProvider } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 

package/src/schema/schema.test.ts

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as S from '@effect/schema/Schema';
 import { expect } from 'chai';
 
+import { S } from '@dxos/echo-schema';
 import { describe, test } from '@dxos/test';
 
 import { classifySchemaProperties } from './schema';

package/src/schema/schema.ts

@@ -2,26 +2,54 @@
 // Copyright 2024 DXOS.org
 //
 
-import { AST } from '@effect/schema';
+import * as AST from '@effect/schema/AST';
 import type * as S from '@effect/schema/Schema';
 
 import { type ColumnType } from './types';
 
 export type ClassifiedColumnType = ColumnType | 'display';
 
+// TODO(burdon): Rename getX? and return typed array?
+export const classifySchemaProperties = (schema: S.Schema<any, any>): [string, ClassifiedColumnType][] => {
+  const recurse = (node: AST.AST, path: string[], acc: [string, ClassifiedColumnType][]) => {
+    const properties = AST.getPropertySignatures(node);
+    properties.forEach((prop) => {
+      const propName = prop.name.toString();
+
+      if (prop.isOptional) {
+        const unwrappedAst = unwrapOptionProperty(prop);
+        if (isStruct(unwrappedAst)) {
+          return recurse(unwrappedAst, [...path, propName], acc);
+        }
+      }
+
+      if (isStruct(prop.type)) {
+        recurse(prop.type, [...path, propName], acc);
+      } else {
+        acc.push([path.concat(propName).join('.'), propertyToColumn(prop)]);
+      }
+    });
+
+    return acc;
+  };
+
+  return recurse(schema.ast, [], []);
+};
+
+const isStruct = (node: AST.AST) => AST.isTypeLiteral(node);
+
 const isOptionalUnion = (prop: AST.PropertySignature) => AST.isUnion(prop.type) && prop.isOptional;
 
 const unwrapOptionProperty = (prop: AST.PropertySignature) => {
   if (!isOptionalUnion(prop)) {
-    throw new Error('Not an optional property');
+    throw new Error(`Not an optional property: ${String(prop.name)}`);
   }
 
   if (!AST.isUnion(prop.type)) {
-    throw new Error('Not a union type');
+    throw new Error(`Not a union type: ${String(prop.name)}`);
   }
 
   const [type, _undefinedCase] = prop.type.types;
-
   return type;
 };
 
@@ -54,40 +82,11 @@ const typeToColumn = (type: AST.AST): ClassifiedColumnType => {
   return 'display';
 };
 
-const propertyToColumn = (property: AST.PropertySignature): ClassifiedColumnType => {
-  let type = property.type;
-
-  if (property.isOptional) {
-    type = unwrapOptionProperty(property);
+const propertyToColumn = (prop: AST.PropertySignature): ClassifiedColumnType => {
+  let type = prop.type;
+  if (prop.isOptional) {
+    type = unwrapOptionProperty(prop);
   }
 
   return typeToColumn(type);
 };
-
-const isStruct = (node: AST.AST) => AST.isTypeLiteral(node);
-
-export const classifySchemaProperties = (schema: S.Schema<any, any>) => {
-  const recurse = (node: AST.AST, path: string[], acc: [string, ClassifiedColumnType][]) => {
-    const properties = AST.getPropertySignatures(node);
-    properties.forEach((prop) => {
-      const propName = prop.name.toString();
-
-      if (prop.isOptional) {
-        const unwrappedAst = unwrapOptionProperty(prop);
-        if (isStruct(unwrappedAst)) {
-          return recurse(unwrappedAst, [...path, propName], acc);
-        }
-      }
-
-      if (isStruct(prop.type)) {
-        recurse(prop.type, [...path, propName], acc);
-      } else {
-        acc.push([path.concat(propName).join('.'), propertyToColumn(prop)]);
-      }
-    });
-
-    return acc;
-  };
-
-  return recurse(schema.ast, [], []);
-};

package/src/schema/schemaToColumns.ts

@@ -2,9 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import type * as S from '@effect/schema/Schema';
 import { type ColumnDef } from '@tanstack/react-table';
 
+import type { S } from '@dxos/echo-schema';
+
 import { classifySchemaProperties } from './schema';
 import { createColumnBuilder } from '../helpers';