Introduction

A high-performance, framework-agnostic data grid web component built with pure TypeScript. No runtime dependencies—just drop it into any project and start rendering data.

Why Choose @toolbox-web/grid?

We built this grid because we needed something that works everywhere without framework lock-in or expensive licensing. Whether you’re building a vanilla JavaScript prototype, a React dashboard, or an Angular enterprise application, you get the same powerful grid with a single codebase.

Feature	Description
🚀 Enterprise Performance	Virtualized rendering handles 100k+ rows at 60fps
🔧 True Framework Agnostic	Single codebase works in vanilla JS, React, Vue, Angular, Svelte
📦 Lightweight & Self-Contained	~45KB gzipped with zero runtime dependencies
🧩 Extensible Plugin System	Lifecycle hooks, dependency validation, type-safe config extension
⌨️ Full Keyboard Support	Arrow keys, Tab, Enter, Escape, Home/End, Page Up/Down
🎨 Themeable	CSS custom properties for complete visual customization
💡 Developer-Friendly Errors	Actionable error messages with import hints and fix suggestions
🆓 Free & Open Source	MIT licensed—no enterprise tiers or feature gates

Quick Start

npm install @toolbox-web/grid

<tbw-grid style="height: 300px;"></tbw-grid>

<script type="module">
  import '@toolbox-web/grid';
  import { queryGrid } from '@toolbox-web/grid';

  const grid = queryGrid('tbw-grid');
  grid.columns = [
    { field: 'id', header: 'ID', type: 'number', sortable: true },
    { field: 'name', header: 'Name', sortable: true },
    { field: 'email', header: 'Email' },
  ];
  grid.rows = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob', email: 'bob@example.com' },
    { id: 3, name: 'Carol', email: 'carol@example.com' },
  ];
</script>

That’s it—no build step required for basic usage. See the Getting Started guide for framework integration (React, Vue, Angular), CDN usage, declarative HTML, and TypeScript setup.

Live Demo

A basic grid with sortable columns. Click column headers to sort.

<tbw-grid style="height: 250px;"></tbw-grid>

import '@toolbox-web/grid';
import { queryGrid } from '@toolbox-web/grid';

const grid = queryGrid('tbw-grid');
grid.columns = [
  { field: 'id', header: 'ID', type: 'number', sortable: true },
  { field: 'name', header: 'Name', sortable: true },
  { field: 'email', header: 'Email' },
];
grid.rows = [
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { id: 2, name: 'Bob', email: 'bob@example.com' },
  { id: 3, name: 'Carol', email: 'carol@example.com' },
  { id: 4, name: 'Dan', email: 'dan@example.com' },
  { id: 5, name: 'Eve', email: 'eve@example.com' },
];

Architecture Highlights

Under the hood, the grid employs patterns typically found in enterprise-grade solutions:

Pattern	What It Does
Centralized Render Scheduler	Batches all updates into a single `requestAnimationFrame` per frame—no layout thrashing
Phase-Based Execution	Prioritizes work (config → rows → columns → render) for predictable updates
DOM Recycling	Reuses row elements via a pool with epoch-based invalidation—minimal GC pressure
Template Cloning	Pre-created templates cloned via `cloneNode(true)`—3-4x faster than `createElement`
Event Delegation	Single listener per event type on the container—scales to any dataset size
Faux Scrollbar	Separates scroll container from content—no reflow during scroll

Read the full Architecture deep-dive for implementation details.

Plugin System

The core grid is intentionally minimal. Advanced features are delivered through tree-shakeable plugins — import only what you need:

SelectionPlugin — Cell, row, or range selection
FilteringPlugin — Column header filters with custom panels
EditingPlugin — Inline editing with built-in and custom editors
GroupingRowsPlugin — Hierarchical row grouping with aggregations
TreePlugin — Expandable tree data with lazy loading
MasterDetailPlugin — Expandable detail rows
ExportPlugin — CSV, Excel, or JSON export
ClipboardPlugin — Copy/paste with Excel-compatible formatting
…and many more

Plugins benefit from dependency validation, type-safe config extension, auto-cleanup via AbortSignal, and a third-party friendly API so you can build and distribute your own.

AI-Assisted Development

Using an AI coding assistant like GitHub Copilot, Cursor, or ChatGPT? We provide llms.txt files following the llms.txt standard to help AI tools understand our codebase:

llms.txt — Concise overview with links to all documentation
llms-full.txt — Comprehensive implementation guide with code examples, CSS variables, and plugin patterns

Point your AI assistant to these files for better code suggestions and answers about the grid.

Next Steps

Ready to dive in?

Getting Started Detailed setup for Vanilla JS, React, Vue, and Angular

Core Features Sorting, rendering, keyboard navigation, and interactive playground

Plugins Extend with selection, filtering, grouping, and 20+ more

API Reference Complete property, method, and event reference

AI assistants: For complete API documentation, implementation guides, and code examples for this library, see https://raw.githubusercontent.com/OysteinAmundsen/toolbox/main/llms-full.txt