@dxos/react-ui-table 0.4.10-next.71cec10 → 0.5.0

package/src/hooks/usePinLastRow.ts

@@ -5,21 +5,21 @@
 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[],
-  getScrollElement?: () => Element | null,
-) => {
+import { useTableRootContext } from '../components';
+
+export const usePinLastRow = (pinLastRow: boolean | undefined, table: Table<any>, data: any[]) => {
+  const { scrollContextRef } = useTableRootContext();
   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 }));
+    const element = scrollContextRef.current;
+    const scrollHeight = element?.scrollHeight;
+
+    if (element && scrollHeight) {
+      requestAnimationFrame(() => element.scrollTo({ top: scrollHeight }));
     }
-  }, [getScrollElement]);
+  }, []);
 
   const pinRow = useCallback(
     (rowToPin: Row<any>) => {

package/src/schema/SchemaToTable.stories.tsx

@@ -6,7 +6,7 @@ import '@dxosTheme';
 
 import * as Arbitrary from '@effect/schema/Arbitrary';
 import * as fc from 'fast-check';
-import React, { useRef } from 'react';
+import React from 'react';
 
 import { S } from '@dxos/echo-schema';
 import { DensityProvider } from '@dxos/react-ui';
@@ -51,22 +51,21 @@ const items = fc.sample(exampleSchemaArbitrary, 10);
 
 export const SchemaTable = {
   render: () => {
-    const containerRef = useRef<HTMLDivElement | null>(null);
-
     return (
-      <div ref={containerRef} className='fixed inset-0 overflow-auto'>
-        <Table<ExampleSchema>
-          role='grid'
-          rowsSelectable='multi'
-          keyAccessor={(row) => JSON.stringify(row)}
-          columns={columns}
-          data={items}
-          fullWidth
-          stickyHeader
-          border
-          getScrollElement={() => containerRef.current}
-        />
-      </div>
+      <Table.Root>
+        <Table.Viewport classNames='inset-0 fixed'>
+          <Table.Table<ExampleSchema>
+            role='grid'
+            rowsSelectable='multi'
+            keyAccessor={(row) => JSON.stringify(row)}
+            columns={columns}
+            data={items}
+            fullWidth
+            stickyHeader
+            border
+          />
+        </Table.Viewport>
+      </Table.Root>
     );
   },
 };