@witqq/spreadsheet

Canvas-based spreadsheet & datagrid engine for React, Vue, Angular — zero dependencies

---

A high-performance spreadsheet and datagrid engine built on Canvas 2D with zero external dependencies. Renders 100K+ rows at 60fps with full editing, selection, undo/redo, clipboard, sorting, filtering, frozen panes, merged cells, formulas, and real-time collaboration.

Official wrappers for React, Vue 3, and Angular. Embeddable widget bundle under 36KB gzip.

✨ Features

Category	Features
Rendering	Canvas 2D multi-layer pipeline, 100K+ rows at 60fps, progressive loading
Editing	Inline editor, undo/redo (100 steps), clipboard (TSV + HTML), autofill
Data	Sort (multi-column), filter (14 operators), frozen panes, merged cells
Plugins	Formulas, conditional formatting, collaboration (OT), Excel I/O, context menu
Theming	Light/dark built-in, fully customizable via WitTheme
Accessibility	WCAG 2.1 AA: role=grid, aria-live, keyboard-only, print support
Frameworks	React, Vue 3, Angular, vanilla JS widget (<36KB gzip)

🚀 Quick Start

npm install @witqq/spreadsheet @witqq/spreadsheet-react

import { WitTable } from '@witqq/spreadsheet-react';

const columns = [
  { id: 'name', header: 'Name', width: 200 },
  { id: 'value', header: 'Value', width: 120, type: 'number' },
];

const data = [
  { name: 'Alpha', value: 100 },
  { name: 'Beta', value: 200 },
];

function App() {
  return <WitTable columns={columns} data={data} />;
}

Vue, Angular, vanilla JS? See framework guides: Vue 3 · Angular · Widget

⚡ Performance

Metric	Value
Init time (10K rows, 41 cols)	~120ms
Init time (100K rows)	~350ms
Scroll FPS	60fps stable
Widget bundle	<36KB gzip
Core bundle	Zero external deps
Memory (100K rows)	~45MB

📦 Packages

Package	Description
@witqq/spreadsheet	Canvas engine (core)
@witqq/spreadsheet-react	React wrapper
@witqq/spreadsheet-vue	Vue 3 wrapper
@witqq/spreadsheet-angular	Angular wrapper
@witqq/spreadsheet-widget	Embeddable IIFE/UMD bundle
@witqq/spreadsheet-plugins	Official plugins

📖 Documentation

Full documentation with interactive demos at spreadsheet.witqq.dev

• Getting Started — Installation, quick start, configuration
• Guides — Selection, sorting, filtering, frozen panes, and more
• Plugins — Formulas, collaboration, Excel I/O
• API Reference — WitEngine, types, cell types
• Migration from Handsontable — Side-by-side API mapping

🛠 Development

npm install          # Install dependencies
npm run dev          # Start dev server (Docker, port 3150)
npm run build        # Build all packages
npm run test         # Unit tests (Vitest)
npm run test:e2e     # E2E tests (Playwright)
npm run typecheck    # TypeScript check
npm run lint         # ESLint

📄 License

BSL 1.1 — Free for non-commercial use. Commercial use requires a paid license. Converts to Apache 2.0 on 2030-03-01.

🤝 Contributing

See CONTRIBUTING.md for guidelines.

📬 Contact

• Website: spreadsheet.witqq.dev
• Email: [email protected]
• Issues: GitHub Issues