react-wasm-table
  • English

      • Canvas: Box

      Box is a generic container: padding, margin, borderWidth, borderColor, backgroundColor. Children are drawn in the content rect in a vertical stack.

      • Box + Text / Box + Badge — single child with padding and border
      • Multi child — vertical stack (Text + Badge)
      • Box → Flex — Box wrapping Flex row (Text + Badge)
      • Border only — no background, border only
      • style prop — style object (individual props override)

      Grid API

      Code

      import { Grid, createColumnHelper, Box, Text } from "@ohah/react-wasm-table";

const helper = createColumnHelper<{ dept: string }>();

const columns = [
  helper.accessor("dept", {
    header: "Box + Text",
    size: 140,
    cell: (info) => (
      <Box padding={8} borderWidth={1} borderColor="#e0e0e0" backgroundColor="#fafafa">
        <Text value={info.getValue()} />
      </Box>
    ),
  }),
];

<Grid data={data} columns={columns} width={900} height={500} rowHeight={48} />;

      Table API Code

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

const helper = createColumnHelper<{ dept: string }>();

const columns = [
  helper.accessor("dept", {
    header: "Box + Text",
    size: 140,
    cell: (info) => (
      <Box padding={8} borderWidth={1} borderColor="#e0e0e0" backgroundColor="#fafafa">
        <Text value={info.getValue()} />
      </Box>
    ),
  }),
];

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

<Table table={table} width={900} height={500} rowHeight={48}>
  <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>;