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	~50KB 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

The grid ships as a standard custom element. Pick the install style that matches your setup.

With a bundler (Vite, webpack, etc.)
No build (CDN, single HTML file)

npm install @toolbox-web/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' },
];

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

Drop one <script> tag and you’re done — no bundler, no install. Everything is exposed on the global TbwGrid object.

<!DOCTYPE html>
<script src="https://unpkg.com/@toolbox-web/grid/umd/grid.umd.js"></script>

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

<script>
  const grid = TbwGrid.queryGrid('#my-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>

See the Getting Started guide for framework integration (React, Vue, Angular), declarative HTML, plugins, 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');
  if (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 publish machine-readable docs (llms.txt, llms-full.txt, and a Markdown companion for every page) so your assistant generates correct grid code grounded in the current API.

See AI-Assisted Development for what we publish, where it comes from, and how to wire it into your agentic workflow.

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 24+ 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://toolboxjs.com/llms-full.txt