GridStorm documentation

GridStorm is a headless, framework-agnostic data grid for large datasets: virtual scrolling, Excel-style formulas, composable plugins and accessibility features, with adapters for React, Vue, Angular and Svelte. This index links every published guide and reference page; each is rendered from the same Markdown that powers the interactive hub, so the text here is the canonical, readable version.

Start with Introduction and Quick start, then read the plugin system and API reference. The interactive playground and example applications are tools, not documentation, and are intentionally left out of search indexes.

API reference

Column Definitions — The ColumnDef<TData, TValue> interface defines how a column behaves, what data it displays, and what interactions it supports. Column definitions are passed via GridConfig.columns and can be updated at runtime via GridAp
GridApi — The GridApi<TData> is the runtime interface for interacting with a GridStorm grid. Obtain it from createGrid() as engine.api, from the onGridReady callback, or in React via the useGridApi() hook.
GridConfig — The GridConfig<TData> interface defines every option for creating a GridStorm grid instance. Pass it to createGrid() in vanilla TypeScript or as props to the <GridStorm> React component.
Row Nodes — Every row in a GridStorm grid is represented by a RowNode<TData> object. Row nodes wrap your data objects with metadata needed for rendering, selection, grouping, aggregation, and virtual scrolling.

Blog

Why Plugin-First Architecture Makes Data Grids Better — Most data grid libraries ship as monoliths. You import one package and get sorting, filtering, grouping, editing, clipboard support, and dozens of other features -- whether you use them or not. That bundle weight adds up
Runtime Theming with CSS Variables: No Build Step Required — Most data grids built before 2020 use SASS or LESS for theming. You define variables in a .scss file, compile to CSS, and ship the result. Changing a theme means rebuilding, or loading an entirely separate stylesheet at
GridStorm and AG Grid — evaluating a migration — Corrected September 15, 2026. Earlier versions of this page included unmeasured bundle sizes, outdated framework availability, a premium-plugin roadmap and inaccurate descriptions of AG Grid. Those claims have been withd

Core concepts

Architecture — GridStorm is built on a layered architecture that separates the data engine from rendering and framework integration. This separation enables framework-agnostic operation, deterministic testing, and the ability to swap o
Columns — Columns are the foundation of a GridStorm grid. Every column is described by a ColumnDef object that controls what data is displayed, how it is formatted, and what interactions are available.
DOM Renderer — The DOM renderer is the bridge between GridStorm's headless core engine and the browser. It reads state from the engine's store, creates and manages DOM elements, and handles user interactions like scrolling, clicking, a
Events & Commands — GridStorm uses two complementary systems for communication: the EventBus for notifications (something happened) and the CommandBus for mutations (make something happen). Events flow outward to inform you of state changes
Plugin System — GridStorm's plugin system is the primary extension mechanism for the grid. Every feature beyond the core engine -- sorting, filtering, editing, selection, grouping, clipboard -- is implemented as a plugin. You can write
Row Data — Row data is the array of objects that populates the grid. Each object in the array becomes one row, and the grid's column definitions determine which properties are displayed.
Store — GridStorm uses a lightweight reactive store purpose-built for grid state management. The store holds the entire GridState object and notifies subscribers whenever state changes. It supports batched updates to coalesce mu
Theming — GridStorm's visual appearance is controlled entirely through CSS custom properties (CSS variables). You can switch themes at runtime, create custom themes without a build step, and override individual design tokens witho

Framework adapters

Angular Adapter — The @gridstorm/angular package provides a standalone Angular component and an injectable service for integrating GridStorm into Angular applications. The component wraps the headless core engine and DOM renderer, bridges
React Adapter — The @gridstorm/react package provides a first-class React wrapper around the GridStorm headless engine. It includes the <GridStorm> component, reactive hooks powered by useSyncExternalStore, a portal system for rendering
Svelte Adapter — The @gridstorm/svelte package provides a Svelte 5 integration for the GridStorm headless engine. It includes the <GridStorm> component, reactive stores for grid state, and full TypeScript support with generic row typing.
Vanilla JavaScript — You can use GridStorm without any framework by combining @gridstorm/core (the headless engine) and @gridstorm/dom-renderer (the DOM rendering layer) directly. This is the most lightweight approach and works in any JavaSc
Vue Adapter — The @gridstorm/vue package provides a Vue 3 integration for the GridStorm headless engine. It includes the <GridStorm> component, reactive composables powered by Vue's reactivity system, and full TypeScript support with

Getting started

Installation — GridStorm is distributed as a set of scoped npm packages. Install only the packages your project needs.
Introduction — GridStorm is a TypeScript data grid with a headless engine, a DOM renderer and optional plugins. Virtual scrolling limits the number of rendered rows. Performance depends on cell complexity, data operations, device and b
Quick Start — This guide walks you through the fastest path to a working GridStorm data grid. You will install the packages, define columns and data, and render a fully functional grid with sorting.

Guides

Accessibility — GridStorm follows WAI-ARIA grid and table patterns to provide a fully accessible data grid experience. The DOM renderer applies ARIA roles and attributes automatically, and the keyboard manager handles navigation without
Custom Plugins — GridStorm's plugin system is the primary extension mechanism for both the data grid and the PDF toolkit. Plugins register command handlers, listen to events, manage their own state slices, and contribute custom cell rend
Integration Guide — This guide covers adding GridStorm to your existing project, loading data from APIs, handling large datasets, and configuring TypeScript. Whether you use React with Vite, Next.js, or vanilla TypeScript, the setup follows
MCP Server — The @gridstorm/mcp-server package exposes GridStorm's grid, PDF, and AI capabilities as tools that AI agents can invoke through the Model Context Protocol. This lets Claude, GPT, and other AI assistants create grids, sor
Migration from AG Grid — verification checklist — Corrected September 15, 2026. This guide replaces earlier unverified drop-in API mappings and size/pricing claims. GridStorm is not established here as a drop-in replacement for AG Grid. A successful migration means pres
PDF Toolkit — GridStorm's PDF toolkit provides a headless PDF engine with a pluggable parser, a DOM-based renderer, and a rich plugin ecosystem for text extraction, form filling, document intelligence, and PII detection. The architect
Performance — GridStorm is designed to handle large datasets efficiently through virtual scrolling, DOM recycling, batched state updates, and column virtualization. This guide covers the built-in optimizations and patterns you should

Plugins

Accessibility (WCAG 2.1 AA) — @gridstorm/plugin-a11y adds a complete WCAG 2.1 AA compliance layer on top of the DOM renderer's existing ARIA attributes. It provides live screen reader announcements, skip navigation links, high-contrast CSS, and keybo
Aggregation — The Aggregation plugin computes aggregate values for group rows by walking the group tree bottom-up. It supports built-in functions (sum, avg, count, min, max, first, last), custom aggregation functions, and automatic re
AI — The AI plugin adds intelligent data interaction to GridStorm. It includes a natural language query parser that converts plain English into filter/sort operations (regex-based, no API key required), statistical anomaly de
Cell Range — The Cell Range plugin adds spreadsheet-style range selection to GridStorm. Users can click and drag to select rectangular cell ranges, use a fill handle to auto-fill adjacent cells with detected patterns (number sequence
Charts — The Charts plugin provides two capabilities: an inline 'chart' cell renderer for embedding SVG bar, line, pie, and scatter charts directly in grid cells, and a standalone chart state management system for creating charts
Clipboard Pro (Excel-Compatible) — @gridstorm/plugin-clipboard-pro is a drop-in replacement for @gridstorm/plugin-clipboard that adds true Excel-compatible copy/paste: range-aware selection, advanced TSV parsing, automatic type coercion, paste validation,
Clipboard — The Clipboard plugin enables copy, cut, and paste operations on grid data. It uses the browser Clipboard API, serializes data as tab-separated values (TSV) for spreadsheet compatibility, and responds to standard keyboard
Column Auto-Size — The Column Auto-Size plugin calculates optimal column widths based on cell content using a character-width heuristic. Since GridStorm uses a headless architecture, content width is estimated from average character propor
Column Pinning — The Column Pinning plugin enables columns to be fixed to the left or right edge of the grid. Pinned columns remain visible as the user scrolls horizontally. The plugin enforces configurable limits on the number of pinned
Column Reorder — The Column Reorder plugin enables column rearrangement by dragging header cells. It supports locking columns in place via lockPosition, preventing cross-zone dragging for pinned columns, and swapping columns programmatic
Column Resize — The Column Resize plugin adds drag handles to column header borders. You can drag to resize columns, and double-click the handle to auto-size a column to fit its content. It supports min/max width constraints and two res
Conditional Formatting — The Conditional Formatting plugin lets you visually highlight cells based on their values. It supports 18 condition types including color scales, data bars, icon sets, top/bottom N, duplicates, and standard comparisons.
Context Menu — The Context Menu plugin provides right-click menus on grid cells and rows. It supports built-in default items, fully custom menu items with icons and keyboard shortcuts, nested submenus, conditional visibility/disabled s
Editing — The Editing plugin provides inline cell editing with built-in editors for text, number, and select fields. It manages the full editing lifecycle (start, value change, stop/commit/cancel), supports undo/redo history, and
Excel Export — The Excel Export plugin provides CSV and Excel XML export capabilities for GridStorm grids. It supports exporting all displayed rows or only selected rows, includes configurable column selection, custom cell and header p
Filtering — The Filtering plugin provides column-level filtering and a global quick filter. It registers command handlers for setting, clearing, and querying filters while the core engine handles the actual predicate evaluation via
Formula Engine (Excel-Compatible) — @gridstorm/plugin-formula-engine extends @gridstorm/plugin-formula with 42 additional Excel-compatible functions, named ranges, and array formula support. Together they give GridStorm a formula engine on par with Handson
Formula — The Formula plugin brings spreadsheet-style calculations to GridStorm. It includes a full tokenizer, parser, and evaluator pipeline supporting 34 built-in functions (SUM, IF, VLOOKUP, AVERAGE, and more). A dependency gra
Grouping — The Grouping plugin organizes flat row data into a hierarchical tree by grouping on one or more column values. Group rows can be expanded and collapsed, and the plugin respects active filters and sort models when buildin
Master Detail — The Master Detail plugin provides expandable detail rows beneath master rows. When a master row is expanded, a detail row is inserted below it with configurable height. The plugin supports async data fetching, detail row
Pagination — The Pagination plugin provides client-side pagination with full page navigation commands, configurable page sizes, and a page size selector. It manages the pagination state slice and resets to page 0 when the page size c
PDF Export — The PDF Export plugin generates downloadable PDF files from your GridStorm grid. It produces formatted tables with column headers, automatic page breaks, and configurable page size and orientation. Value formatters defin
Pivoting — The Pivoting plugin transforms row-grouped data into dynamic columns, producing spreadsheet-style pivot tables. It scans distinct values from pivot columns and generates secondary columns for each unique value, applying
Plugin System — GridStorm's plugin system is the mechanism through which all grid features are delivered. Sorting, filtering, selection, editing, and every other capability is implemented as a plugin. This architecture keeps the core en
Row Pinning — The Row Pinning plugin allows you to pin specific rows to the top or bottom of the grid as floating rows. Pinned rows stay visible regardless of scroll position and are managed through commands and plugin state. A config
Row Reorder — The Row Reorder plugin enables drag-and-drop row repositioning. It uses event delegation and CSS pseudo-elements for compatibility with virtual scrolling, shows a visual drop indicator during drag, and persists custom ro
Selection — The Selection plugin provides row selection with support for single select, multi-select (Ctrl+Click), range select (Shift+Click), and programmatic selection. It also manages cell focus for keyboard navigation.
Sorting — The Sorting plugin provides single and multi-column sorting through header click interactions. It manages the sort model state and cycles through configurable sort directions (ascending, descending, unsorted).
Sparklines — The Sparklines plugin renders compact SVG charts directly inside grid cells. It supports line, bar, area, and win/loss chart types and is configured through column definitions using cell renderer parameters. Each sparkli
Server-Side Row Model (SSRM) — The Server-Side Row Model plugin delegates data loading to a remote server. Instead of loading all rows into the browser, it fetches blocks on demand as the user scrolls, and automatically refetches when sort or filter s
State Persistence — The State Persistence plugin captures a snapshot of your grid's column widths, sort model, filter model, pagination, column order, and scroll position, then persists it to localStorage or a custom storage backend. Change
Status Bar — The Status Bar plugin renders a summary panel below the grid showing aggregation values such as sum, average, min, max, and count. It recalculates automatically when the row selection changes and can display statistics f
Streaming — The Streaming plugin enables real-time data feeds into your grid. It batches incoming updates to maintain smooth rendering performance, provides cell flash animations to highlight changes, and supports a pluggable adapte
Time Travel — The Time Travel plugin provides full state history management for your grid. It captures snapshots on every state change, supports unlimited undo/redo, named checkpoints for marking important states, state diffing to vis
Tree Data — The Tree Data plugin enables hierarchical row display in your GridStorm grid. It supports both nested data structures (via a childrenField) and flat data with parent references (via getParentId). Rows can be expanded and
Validation — The Validation plugin enforces data integrity by validating cell values against configurable rules. It ships with 12 built-in validator types covering common patterns (email, phone, URL, range, regex) and supports cross-