react-wasm-table
  • English

      • Getting Started

      Install the package and render a minimal grid in a few lines.

      Installation

      npm
      yarn
      pnpm
      bun
      deno
      npm add @ohah/react-wasm-table

      Quick Start

      Use createColumnHelper and the Grid component with data and columns:

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

type 
      type Row = {
    name: string;
    age: number;
}
      Row       = { 
      name: string
      name      : string; 
      age: number
      age      : number };      

const 
      const helper: any
      helper       = 
      import createColumnHelper
      createColumnHelper      <
      type Row = {
    name: string;
    age: number;
}
      Row      >();      
const 
      const columns: any[]
      columns       = [      
  
      const helper: any
      helper      .accessor("name", { 
      header: string
      header      : "Name", 
      size: number
      size      : 200 }),      
  
      const helper: any
      helper      .accessor("age", { 
      header: string
      header      : "Age", 
      size: number
      size      : 100 }),      
];

const 
      const data: Row[]
      data      : 
      type Row = {
    name: string;
    age: number;
}
      Row      [] = [      
  { 
      name: string
      name      : "Alice", 
      age: number
      age      : 30 },      
  { 
      name: string
      name      : "Bob", 
      age: number
      age      : 25 },      
];

function 
      function App(): JSX.Element
      App      () {      
  return <
      import Grid
      Grid       
      data: Row[]
      data      ={
      const data: Row[]
      data      } 
      columns: any[]
      columns      ={
      const columns: any[]
      columns      } 
      width: number
      width      ={600} 
      height: number
      height      ={400} />;      
}

      Object-based columns

      You can also define columns as a plain array (no JSX). When you pass columns, JSX children are ignored:

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

const 
      const columns: ColumnDef[]
      columns      : 
      import ColumnDef
      ColumnDef      [] = [      
  { 
      id: string
      id      : "name", 
      accessorKey: string
      accessorKey      : "name", 
      size: number
      size      : 200, 
      header: string
      header      : "Name", 
      enableSorting: boolean
      enableSorting      : true },      
  {
    
      id: string
      id      : "price",      
    
      accessorKey: string
      accessorKey      : "price",      
    
      size: number
      size      : 100,      
    
      header: string
      header      : "Price",      
    
      align: string
      align      : "right",      
    
      enableSorting: boolean
      enableSorting      : true,      
  },
];

const 
      const data: {
    id: number;
    name: string;
    price: number;
}[]
      data       = [      
  { 
      id: number
      id      : 1, 
      name: string
      name      : "Alice", 
      price: number
      price      : 100 },      
  { 
      id: number
      id      : 2, 
      name: string
      name      : "Bob", 
      price: number
      price      : 200 },      
];

function 
      function App(): JSX.Element
      App      () {      
  return <
      import Grid
      Grid       
      data: {
    id: number;
    name: string;
    price: number;
}[]
      data      ={
      const data: {
    id: number;
    name: string;
    price: number;
}[]
      data      } 
      columns: ColumnDef[]
      columns      ={
      const columns: ColumnDef[]
      columns      } 
      width: number
      width      ={800} 
      height: number
      height      ={600} />;      
}

      Next steps

      • Architecture — how the React headless API, JS adapter, WASM core, and canvas renderer fit together
      • API Reference — Grid and Table props
      • Canvas components — Text, Badge, Flex, Box, Stack, Sparkline for cell content