Table Component API (TanStack-compatible)

Uses useReactTable + flexRender + structural components (<Table>, <Thead>, <Tbody>,<Tr>, <Th>, <Td>) — identical to TanStack Table's API pattern, but rendering on canvas.

Features demonstrated:

useReactTable() — TanStack-compatible table instance
flexRender() — resolve header/cell render functions
<Table table={table}> — instance-driven rendering
table.getHeaderGroups() — declarative header iteration
row.getVisibleCells() — cell-level access
onSortingChange: setSorting — updater pattern (direct useState setter)
onColumnSizingChange: setColumnSizing — column resize with updater
Sorting and resize events do not conflict (resizeJustEnded guard)

Code

import {
  Table,
  useReactTable,
  flexRender,
  createColumnHelper,
  getCoreRowModel,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
} from "@ohah/react-wasm-table";

const [sorting, setSorting] = useState([]);
const [columnSizing, setColumnSizing] = useState({});

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  state: { sorting, columnSizing },
  // TanStack updater pattern: pass useState setter directly
  onSortingChange: setSorting,
  onColumnSizingChange: setColumnSizing,
});

<Table table={table} width={800} height={500}>
  <Thead>
    {table.getHeaderGroups().map((hg) => (
      <Tr key={hg.id}>
        {hg.headers.map((h) => (
          <Th key={h.id} colSpan={h.colSpan}>
            {flexRender(h.column.columnDef.header, h.getContext())}
          </Th>
        ))}
      </Tr>
    ))}
  </Thead>
  <Tbody>
    {table.getRowModel().rows.map((row) => (
      <Tr key={row.id}>
        {row.getVisibleCells().map((cell) => (
          <Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
        ))}
      </Tr>
    ))}
  </Tbody>
</Table>;

Table Component API (TanStack-compatible)

#Code

Code