WasabiTable

MOD-G0 INTRO

Practical guide for npm users.

MOD-G1 Three integration tiers

Start minimal and add depth only when you need it.

MOD-G2 Quick start

You need a canvas and a bundler.

import { WasabiTable } from 'wasabi-table';

const canvas = document.getElementById('grid');
const table = await WasabiTable.create(canvas, {
  row_count: 20,
  col_count: 8,
});

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

import { createWasabiTableWithListeners } from 'wasabi-table';

const { table, listeners } = await createWasabiTableWithListeners(
  canvas,
  { row_count: 50, col_count: 10 },
  {
    cellReferenceSelector: '#cellRef',
    formulaInputSelector: '#formula',
    statsElementSelector: '#stats',
  },
  { enableValidation: true, enableIMESupport: true }
);

table.setColumnHeaders(JSON.stringify([
  { name: 'email', display_name: 'Email', field_type: 'EmailField', width: 200, order: 0, is_visible: true },
]));

table.setEventHandlers({
  onCellChange: (pos, oldVal, newVal) => console.log(pos, oldVal, newVal),
});

import { WasabiTable } from 'wasabi-table';

const records = [
  { id: 1, name: 'Alice', team: 'A' },
  { id: 2, name: 'Bob', team: 'B' },
  // ... millions of rows OK — viewport sync only
];

const table = await WasabiTable.create(canvas, {
  dataSource: {
    records,
    columns: [
      { field: 'id', header: 'ID', width: 60 },
      { field: 'name', header: 'Name', width: 120 },
      { field: 'team', header: 'Team', width: 80 },
    ],
  },
  freeze_cols: 1,
});

table.addFilterCondition({
  columnIndex: 2,
  fieldType: 'CharField',
  operator: 'equals',
  value: 'A',
  isActive: true,
});
table.setSortCondition({
  columnIndex: 1,
  fieldType: 'CharField',
  direction: 'asc',
});
table.render();

<canvas id="grid" width="800" height="400"></canvas>
<div id="cellRef">A1</div>
<input id="formula" type="text" />
<div id="stats"></div>

<script type="module">
  import { createWasabiTableWithListeners } from 'wasabi-table';
  // ... init as above
</script>

MOD-G3 What you can use

Feature checklist.

MOD-G4 Code examples

Pick your stack.

MOD-G5 React & SPA notes

• useEffect init
• Strict Mode
• Resize
• react-example.tsx

MOD-G6 Field types

Pass field_type in setColumnHeaders.

CharField

max_length

EmailField

email

IntegerField

min/max

DecimalField

digits

DateField

calendar

TimeField

HH:MM

BooleanField

bool

MenuField

choices

MOD-G7 Browser requirements

Modern browsers with WASM.