Canvas components

Cell content is described with render instructions. The following components are supported (fully drawn on canvas); others are stubs (placeholder) for future use.

Supported components

Component	Description	Main props
Text	Single-line text	`value`, `style?`, `color?`, `fontWeight?`, `fontSize?`
Badge	Pill/chip with background	`value`, `style?`, `color?`, `backgroundColor?`, `borderRadius?`
Flex	Taffy-compatible flex container; lays out and draws children	`children`, `style?`, `flexDirection?`, `gap?`, `alignItems?`, `justifyContent?`
Box	Container: padding, margin, border; children in content rect (vertical stack)	`children?`, `style?`, `padding?`, `margin?`, `borderWidth?`, `backgroundColor?`
Stack	Row or column layout with gap	`children?`, `direction?` ("row" \| "column"), `gap?`, `style?`
Sparkline	Inline mini line chart from `data` (number[])	`data`, `style?`, `color?`, `strokeWidth?`, `variant?` ("line" \| "area")
Color	Centered square color swatch	`value` (hex), `borderRadius?`, `borderWidth?`, `borderColor?`
Tag	Outlined text (stroke border + text)	`value`, `color?`, `borderColor?`, `borderRadius?`, `fontSize?`
Rating	Filled ★ and empty ☆ stars	`value`, `max?`, `color?`, `emptyColor?`, `size?`
Chip	Filled pill with optional close button	`value`, `color?`, `backgroundColor?`, `borderRadius?`, `closable?`
Link	Text with link color, optional underline; opens URL on click	`value`, `href?`, `color?`, `underline?`, `fontSize?`

All support an optional style object; individual props override style when both are set.

Text and Badge

import React from "react";
import { import TextText, import BadgeBadge } from "@ohah/react-wasm-table";

// In a column render or as children of Flex/Box:
export const const Example: () => React.JSX.ElementExample = () => (
  <>
    <import TextText value: stringvalue="Hello" style: {
    color: string;
    fontWeight: string;
}
style={{ color: stringcolor: "#333", fontWeight: stringfontWeight: "bold" }} />
    <import BadgeBadge value: stringvalue="active" style: {
    backgroundColor: string;
    color: string;
}
style={{ backgroundColor: stringbackgroundColor: "#d1fae5", color: stringcolor: "#065f46" }} />
  </>
);

Flex (Taffy layout)

Flex accepts the same style surface as the layout engine: flexDirection, gap, alignItems, justifyContent, padding, margin, borderWidth, boxSizing, etc.

import React from "react";
import { import FlexFlex, import TextText, import BadgeBadge } from "@ohah/react-wasm-table";

export const const Example: () => React.JSX.ElementExample = () => (
  <import FlexFlex flexDirection: stringflexDirection="row" gap: numbergap={8} alignItems: stringalignItems="center">
    <import TextText value: stringvalue="Name" />
    <import BadgeBadge value: stringvalue="New" />
  </import FlexFlex>
);

Individual props override style:

import React from "react";
import { import FlexFlex, import TextText } from "@ohah/react-wasm-table";

export const const Example: () => React.JSX.ElementExample = () => (
  <import FlexFlex style: {
    flexDirection: string;
    gap: number;
}
style={{ flexDirection: stringflexDirection: "column", gap: numbergap: 8 }} flexDirection: stringflexDirection="row" gap: numbergap={4}>
    <import TextText value: stringvalue="Result: flexDirection = 'row', gap = 4" />
  </import FlexFlex>
);

Box and Stack

Box: Padding, margin, border; children stacked vertically in the content rect.
Stack: Row or column with gap; no padding from layout buffer.

import React from "react";
import { import BoxBox, import StackStack, import TextText } from "@ohah/react-wasm-table";

export const const Example: () => React.JSX.ElementExample = () => (
  <>
    <import BoxBox padding: numberpadding={8} borderWidth: numberborderWidth={1} borderColor: stringborderColor="#eee">
      <import TextText value: stringvalue="Inside box" />
    </import BoxBox>
    <import StackStack direction: stringdirection="row" gap: numbergap={8}>
      <import TextText value: stringvalue="A" />
      <import TextText value: stringvalue="B" />
    </import StackStack>
  </>
);

Sparkline

Inline mini chart from a numeric array. Drawn on canvas.

import React from "react";
import { import SparklineSparkline } from "@ohah/react-wasm-table";Cannot find module '@ohah/react-wasm-table' or its corresponding type declarations.

const const series: number[]series = [10, 20, 15, 30, 25, 40];

export const const Example: () => React.JSX.ElementExample = () => (
  <import SparklineSparkline data: number[]data={const series: number[]series} variant: stringvariant="line" color: stringcolor="#2563eb" strokeWidth: numberstrokeWidth={2} />
);

Color, Tag, Rating, Chip, Link

import React from "react";
import { import ColorColor, import TagTag, import RatingRating, import ChipChip, import LinkLink } from "@ohah/react-wasm-table";

export const const Example: () => React.JSX.ElementExample = () => (
  <>
    <import ColorColor value: stringvalue="#e53935" borderRadius: numberborderRadius={4} />
    <import TagTag value: stringvalue="frontend" color: stringcolor="#1565c0" borderColor: stringborderColor="#1565c0" />
    <import RatingRating value: numbervalue={4} max: numbermax={5} color: stringcolor="#f59e0b" />
    <import ChipChip value: stringvalue="React" backgroundColor: stringbackgroundColor="#1976d2" color: stringcolor="#fff" />
    <import LinkLink value: stringvalue="Docs" href: stringhref="https://example.com" underline: trueunderline />
  </>
);

Event handlers

All canvas components support HTMLElement-like event handlers via the CanvasEventHandlers interface. Events fire per-component with a GridCellEvent containing cell coordinates and the native MouseEvent.

Handler	Fires when
`onClick`	Component cell is clicked
`onDoubleClick`	Component cell is double-clicked
`onMouseDown`	Mouse button pressed on component cell
`onMouseUp`	Mouse button released on component cell
`onMouseEnter`	Cursor enters a component cell
`onMouseLeave`	Cursor leaves a component cell

Execution order

Event handlers follow DOM semantics with a 3-level execution order:

Component-level — onClick on the component (element handler)
Grid-level — onCellClick prop on the Grid (parent/bubbling)
Renderer default action — e.g., Link opens URL

Calling e.preventDefault() at any level stops the levels below it.

Example

import React from "react";
import { import LinkLink, import ChipChip, type import GridCellEventGridCellEvent } from "@ohah/react-wasm-table";

export const const Example: () => React.JSX.ElementExample = () => (
  <>
    {/* preventDefault() blocks the Link renderer from opening the URL */}
    <import LinkLink
      value: stringvalue="Click me"
      href: stringhref="https://example.com"
      onClick: (e: any) => voidonClick={(e: anye) => {
        e: anye.preventDefault();
        var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.
@sincev0 .1.100log("clicked link at", e: anye.cell);
      }}
    />

    {/* Hover events */}
    <import ChipChip
      value: stringvalue="Hover me"
      backgroundColor: stringbackgroundColor="#e3f2fd"
      color: stringcolor="#1565c0"
      onMouseEnter: (e: any) => voidonMouseEnter={(e: anye) => var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.
@sincev0 .1.100log("enter", e: anye.cell)}
      onMouseLeave: (e: any) => voidonMouseLeave={(e: anye) => var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.
@sincev0 .1.100log("leave", e: anye.cell)}
    />

    {/* Multiple events on one component */}
    <import ChipChip
      value: stringvalue="All events"
      backgroundColor: stringbackgroundColor="#e8f5e9"
      color: stringcolor="#2e7d32"
      onClick: (e: any) => voidonClick={(e: anye) => var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.
@sincev0 .1.100log("click", e: anye.cell)}
      onDoubleClick: (e: any) => voidonDoubleClick={(e: anye) => var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.
@sincev0 .1.100log("dblclick", e: anye.cell)}
      onMouseDown: (e: any) => voidonMouseDown={(e: anye) => var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.
@sincev0 .1.100log("mousedown", e: anye.cell)}
      onMouseUp: (e: any) => voidonMouseUp={(e: anye) => var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.
@sincev0 .1.100log("mouseup", e: anye.cell)}
    />
  </>
);

Interactive components

The following components integrate with DOM overlays for user interaction:

Component	Description	Main props
Avatar	Circular avatar with image or initials	`value`, `src?`, `size?`, `borderRadius?`, `color?`
DatePicker	Date input with DOM overlay picker	`value`, `onChange?`, `format?`, `style?`
Dropdown	Select input with DOM overlay dropdown	`value`, `options`, `onChange?`, `style?`

#Canvas components

#Supported components

#Text and Badge

#Flex (Taffy layout)

#Box and Stack

#Sparkline

#Color, Tag, Rating, Chip, Link

#Event handlers

#Execution order

#Example

#Interactive components