A Griddy AI prototype

src/Griddy/rendering/VirtualBody.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from 'react'
+
+import { CSS } from '../core/constants'
+import { useGriddyStore } from '../core/GriddyStore'
+import styles from '../styles/griddy.module.css'
+import { TableRow } from './TableRow'
+
+export function VirtualBody() {
+  const table = useGriddyStore((s) => s._table)
+  const virtualizer = useGriddyStore((s) => s._virtualizer)
+  const setTotalRows = useGriddyStore((s) => s.setTotalRows)
+
+  const rows = table?.getRowModel().rows
+  const virtualRows = virtualizer?.getVirtualItems()
+  const totalSize = virtualizer?.getTotalSize() ?? 0
+
+  // Sync row count to store for keyboard navigation bounds
+  useEffect(() => {
+    if (rows) {
+      setTotalRows(rows.length)
+    }
+  }, [rows?.length, setTotalRows])
+
+  if (!table || !virtualizer || !rows || !virtualRows) return null
+
+  return (
+    <div
+      className={styles[CSS.tbody]}
+      role="rowgroup"
+      style={{
+        height: totalSize,
+        position: 'relative',
+        width: '100%',
+      }}
+    >
+      {virtualRows.map((virtualRow) => {
+        const row = rows[virtualRow.index]
+        if (!row) return null
+
+        return (
+          <TableRow
+            key={row.id}
+            row={row}
+            size={virtualRow.size}
+            start={virtualRow.start}
+          />
+        )
+      })}
+    </div>
+  )
+}