Wasabi Table

English | 日本語

A fast, lightweight Excel-like table component built with Rust and WebAssembly, rendered on Canvas. Built for SaaS admin master list/edit screens — simple to start, optional depth via Tier 1/2/3 APIs.

Three tiers

| Tier | Use case | Example | |------|----------|---------| | 1 | Minimal grid (~30s) | WasabiTable.create(canvas) → setCellValue → render() | | 2 | App screens | Column schema, validation, createWasabiTableWithListeners | | 3 | Large data | dataSource.records, filter/sort, column resize |

See roadmap · Getting Started

Benchmark

Run live measurements on benchmark.html (100 rows – 1M records). Results vary by environment.

Project Structure

wasabi-table/
├── src/              # Rust core (compiled to WASM)
├── src-ts/           # TypeScript wrapper and listeners
├── dist/             # TypeScript build output
├── pkg/              # WASM build output (generated by npm run build)
├── e2e/              # Playwright E2E tests
├── examples/         # Usage examples and live demo
└── docs/             # Documentation

Features

• Canvas + WASM for high-performance rendering
• Excel-like interaction: cell selection, range selection, keyboard navigation
• Editing: inline editing, copy & paste, cut, undo/redo
• Filter & sort, conditional formatting, cell validation
• Column resize (header edge drag)
• Row selection (row header click), freeze columns (freeze_cols)
• Themes: light / dark

Quick Start

Prerequisites

• Node.js 18+
• Rust 1.70+
• wasm-pack

npm Package

npm install wasabi-table

Browser requirements: Modern browsers with ES Modules support (latest Chrome, Firefox, Safari, Edge). Does not run in Node.js alone (requires WASM + Canvas).

Build from Source

npm install
npm run build    # Generates pkg/ + dist/ (required on first clone)

Basic Usage

import { WasabiTable } from 'wasabi-table';

const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const table = await WasabiTable.create(canvas);

table.setCellValue(0, 0, 'Hello');
table.setCellValue(0, 1, 'World');
table.render();

Listener API (Formula Bar & Stats)

import { createWasabiTableWithListeners } from 'wasabi-table';

const { table, listeners } = await createWasabiTableWithListeners(
  canvas,
  { row_count: 50, col_count: 10 },
  {
    cellReferenceSelector: '#cellReference',
    formulaInputSelector: '#formulaInput',
    statsElementSelector: '#stats',
  }
);

Cell Context Menu

Right-click a cell to show the built-in context menu. The default actions are copy, cut, paste values, paste transposed, and paste skip empty.

const table = await WasabiTable.create(canvas, {
  contextMenu: {
    builtInActionLabels: {
      copy: 'Copy cell',
      cut: 'Move cell',
      'paste-values': 'Paste',
      'paste-transpose': 'Paste transposed',
      'paste-skip-empty': 'Paste without blanks',
    },
    actions: [
      {
        id: 'open-record',
        label: 'Open record',
        run: ({ cell, table }) => {
          console.log(cell.reference, table.getCellValue(cell.row, cell.col));
        },
      },
    ],
  },
});

Set contextMenu.builtInActions to a smaller action list, or to false when your app should provide only custom right-click actions. Use contextMenu.builtInActionLabels to rename the built-in actions without replacing their behavior.

Live Demo

• Online demo: https://masanori0209.github.io/wasabi-table/examples/npm-package/index.html (?lang=en / ?lang=ja)
• Benchmarks: https://masanori0209.github.io/wasabi-table/examples/npm-package/benchmark.html
• Local:

npm run build
npm run serve
# http://localhost:8501/examples/npm-package/index.html

Testing

# All tests (unit + Rust + E2E)
npm run test:all

# TypeScript unit tests
npm run test:unit

# E2E tests (auto-starts local server; saves video/trace on failure)
npm run test:e2e

# E2E with browser visible (recording enabled)
npm run test:e2e:record

# Open E2E report
npm run test:e2e:report

# Rust WASM browser tests (requires Firefox)
npm run test:rust

Development

npm run dev          # TypeScript watch mode
./build.sh           # Full WASM + TS build

Re-run npm run build:wasm or npm run build after changing Rust/WASM code.

Documentation

• Documentation index (product direction, roadmap, architecture)
• Getting Started · はじめに
• Core API · コア API
• Usage Examples · 使用例
• Choosing a grid · Browser support

Bundle size (approx.)

After npm run build (pre-gzip):

| Artifact | Size | |----------|------| | WASM (pkg/wasabi_table_bg.wasm) | ~1.2 MB | | JS wrapper (dist/) | ~250 KB |

WASM is cached after first load.

Out of scope for 1.0

• Formula engine (=SUM, etc.) — formula bar is a cell editor, not a spreadsheet engine
• Pivot, charts, cell merge, real-time collaboration
• SSR / Node-only runtime
• Official React package (docs + sample only)

See positioning.md.

Security

• Do not commit secrets such as API keys, tokens, or .env files
• See .env.example for local environment variable template
• Report vulnerabilities via GitHub Issues

License

MIT