Table API

The main table component and column definition types.

Grid and Table

Two entry points are supported:

Grid — Renders a <canvas> and drives the full pipeline (adapter, WASM, canvas renderer). Use this for the standard canvas-based table.
Table — Headless table: no canvas, only structure (e.g. for SSR or custom rendering). Accepts the same data / columns-style props.

All examples below use Grid with object-based columns and data.

Basic usage

import { import GridGrid, import createColumnHelpercreateColumnHelper } from "@ohah/react-wasm-table";

type type Row = {
    name: string;
    age: number;
}
Row = { name: stringname: string; age: numberage: number };
const const helper: anyhelper = import createColumnHelpercreateColumnHelper<type Row = {
    name: string;
    age: number;
}
Row>();
const const columns: any[]columns = [
  const helper: anyhelper.accessor("name", { header: stringheader: "Name", size: numbersize: 200 }),
  const helper: anyhelper.accessor("age", { header: stringheader: "Age", size: numbersize: 100 }),
];
const const data: Row[]data: type Row = {
    name: string;
    age: number;
}
Row[] = [
  { name: stringname: "Alice", age: numberage: 30 },
  { name: stringname: "Bob", age: numberage: 25 },
];

function function App(): JSX.ElementApp() {
  return <import GridGrid data: Row[]data={const data: Row[]data} columns: any[]columns={const columns: any[]columns} width: numberwidth={600} height: numberheight={400} />;
}

Grid props

Prop	Type	Default	Description
`data`	`Record<string, unknown>[]`	required	Row data (array of objects)
`columns`	`ColumnDef[]`	required	Column definitions
`width`	`number`	required	Canvas width (px)
`height`	`number`	required	Canvas height (px)
`rowHeight`	`number`	`36`	Row height (px)
`headerHeight`	`number`	`40`	Header row height (px)
`theme`	`Partial<Theme>`	-	Theme overrides
`children`	`ReactNode`	-	Ignored when `columns` is provided

ColumnDef (object-based columns)

Prop	Type	Description
`id`	`string`	Column key
`width`	`number`	Width (px)
`minWidth`	`number`	Minimum width
`maxWidth`	`number`	Maximum width
`flexGrow`	`number`	Flex grow
`flexShrink`	`number`	Flex shrink
`header`	`string`	Header label
`align`	`"left" \| "center" \| "right"`	Cell alignment
`sortable`	`boolean`	Enable header sort
`editor`	`"text" \| "number" \| "select"`	In-cell editor type
`render`	`(value: unknown) => RenderInstruction`	Custom cell instruction

Custom cell rendering (render prop)

Return a RenderInstruction (e.g. text, badge, flex) from the column render (or JSX children). The canvas renderer draws accordingly.

import { import GridGrid, type import ColumnDefColumnDef } from "@ohah/react-wasm-table";

const const columns: ColumnDef[]columns: import ColumnDefColumnDef[] = [
  { id: stringid: "name", accessorKey: stringaccessorKey: "name", size: numbersize: 200, header: stringheader: "Name" },
  {
    id: stringid: "status",
    accessorKey: stringaccessorKey: "status",
    size: numbersize: 120,
    header: stringheader: "Status",
    cell: (info: any) => {
    type: string;
    value: string;
    style: {
        color: string;
        backgroundColor: string;
    };
}
cell: (info: anyinfo) => {
      const const value: anyvalue = info: anyinfo.getValue();
      return {
        type: stringtype: "badge",
        value: stringvalue: var String: StringConstructor
(value?: any) => string
Allows manipulation and formatting of text strings and determination and location of substrings within strings.String(const value: anyvalue),
        style: {
    color: string;
    backgroundColor: string;
}
style: {
          color: stringcolor: const value: anyvalue === "active" ? "#065f46" : "#374151",
          backgroundColor: stringbackgroundColor: const value: anyvalue === "active" ? "#d1fae5" : "#f3f4f6",
        },
      };
    },
  },
];

const const data: {
    id: number;
    name: string;
    status: string;
}[]
data = [
  { id: numberid: 1, name: stringname: "Alice", status: stringstatus: "active" },
  { id: numberid: 2, name: stringname: "Bob", status: stringstatus: "inactive" },
];

function function App(): JSX.ElementApp() {
  return <import GridGrid data: {
    id: number;
    name: string;
    status: string;
}[]
data={const data: {
    id: number;
    name: string;
    status: string;
}[]
data} columns: ColumnDef[]columns={const columns: ColumnDef[]columns} width: numberwidth={500} height: numberheight={400} />;
}

Sorting and filtering

Sorting: Set sortable: true on columns. Click header to cycle none → asc → desc → none. State is internal (ref) so scroll stays fast.
Filtering: Use columnFilters / onColumnFiltersChange (controlled) or initialState.columnFilters (uncontrolled). Global filter: globalFilter / onGlobalFilterChange.

Supported instruction types for cells: text, badge, flex, box, stack, sparkline, and stubs (see Canvas components).

#Table API

#Grid and Table

#Basic usage

#Grid props

#ColumnDef (object-based columns)

#Custom cell rendering (render prop)