react-wasm-table
  • 한국어

      • Scrollbar

      Native browser scrollbar rendered via an overlay DOM div with overflow: scroll. The scrollbar syncs bidirectionally with canvas wheel events.

      overflowY:

      Vertical Scroll (500 rows)

      overflowY="auto" — many rows in a fixed-height viewport.

      Grid API — Canvas (WASM/Taffy)

      No Scroll (8 rows, auto)

      overflowY="auto" with few rows — scrollbar hidden because content fits.

      Canvas (WASM/Taffy)

      Always Visible (scroll)

      overflowY="scroll" — scrollbar always visible even when content fits.

      Canvas (WASM/Taffy)

      Many Columns (8 cols, 500 rows)

      Wide content with many columns in a narrow viewport.

      Canvas (WASM/Taffy)

      Code

      import { Grid, type CssOverflow } from "@ohah/react-wasm-table";

const [overflowY, setOverflowY] = useState<CssOverflow>("auto");

// overflowY: "auto" | "scroll" | "hidden" | "visible"
<Grid data={data} columns={columns} width={550} height={520} overflowY={overflowY} />;

      Table API Code

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

const [overflowY, setOverflowY] = useState<CssOverflow>("auto");

const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });

<Table table={table} width={550} height={520} overflowY={overflowY}>
  <Thead>
    {table.getHeaderGroups().map((hg) => (
      <Tr key={hg.id}>
        {hg.headers.map((h) => (
          <Th key={h.id} colSpan={h.colSpan}>
            {h.isPlaceholder ? null : 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>;