# @toolbox-web/grid > A high-performance, framework-agnostic data grid built with pure TypeScript and native Web Components. Zero runtime dependencies. Works in vanilla JS, React, Angular, Vue, Svelte, and any JavaScript environment. This is a **Web Component** (``) that works natively in all frameworks without wrappers (optional adapter packages for React, Angular, and Vue add JSX/template/slot renderers). Configuration uses a **single source of truth** pattern via the `gridConfig` property. Capabilities are enabled through tree-shakeable `features` (declarative, recommended) or `plugins` (manual class instantiation). The grid uses **light DOM** (not Shadow DOM) for CSS cascade and accessibility. **Every documentation page has a plain-markdown companion**: append `.md` to any docs URL (e.g. `/grid/getting-started.md`) to fetch a lean, self-contained Markdown rendering with demo code inlined. All links below already use that `.md` form. **Agent rules (read before generating code):** - **RULE 0 — prefer one `gridConfig` object** over fragmented props/inputs/attributes. Reserve props for reactive `rows` and the imperative `ref`/handle. The same `GridConfig` is portable across vanilla, React, Angular, Vue. - **Inside React/Vue/Angular, default to framework-native renderers/editors** (JSX renderers, Vue slots/components, Angular template/component renderers). Do NOT default to plain `HTMLElement` renderers unless the user explicitly asks for framework-agnostic/vanilla code. - **Default to features in `gridConfig.features`**, not manual plugin instances. Treat `plugins: [new ...Plugin()]` as advanced/exceptional (custom-plugin development or tightly-scoped imperative needs). - **In React/Vue/Angular, configure features through `gridConfig.features` by default**. Per-feature props/inputs/directives are supported, but they are shorthand for tiny examples. - **Side-effect imports are always required** even when using `gridConfig.features.X` (`import '@toolbox-web/grid/features/selection'`). Vanilla JS must also `import '@toolbox-web/grid'`. - **Height is required** (`tbw-grid { height: 400px; }`) — the grid renders at zero height without it. - **Editing is opt-in** — `editable: true` throws unless the editing feature/plugin is loaded. - **Plugin order/compat:** `Clipboard` needs `Selection`; `UndoRedo` needs `Editing`. `GroupingRows`/`Tree`/`Pivot` are mutually exclusive. - **Use `cell-activate`** (pointer + keyboard, cancelable) for click-to-open, not `cell-click`/`row-click` (pointer-only). Don't add `SelectionPlugin` just to make a row clickable. - Light DOM (no Shadow DOM); em-based sizing (scale via `font-size`); `await grid.ready()` for post-render work. - **Large file?** If the corpus is too large to fetch in one pass, download the right variant locally and grep for the topic. Pick the smallest file that covers your stack: `llms-full-angular.txt` (Angular), `llms-full-react.txt` (React), `llms-full-vue.txt` (Vue), `llms-full-vanilla.txt` (plain JS/TS), or `llms-full.txt` (all frameworks). Example: `curl -L https://toolboxjs.com/llms-full-angular.txt -o llms-full-angular.txt && rg -n 'your keyword' llms-full-angular.txt`. Send only the matching slices. **Re-download at least weekly** — these files are regenerated on every docs build and a stale copy may reference removed APIs or wrong import paths. **Where to look (task → page).** Fetch the ONE page that answers the question before reaching for a corpus file. Paths are relative to `https://toolboxjs.com`: | The user wants to… | Read | |---|---| | Install and render a first grid | `/grid/getting-started.md` | | Define columns, formatting, sorting, sizing | `/grid/core.md` | | See an exact config option or type signature | `/grid/api-reference.md`, then `llms-api.txt` | | Pick a plugin / check plugin compatibility | `/grid/plugins.md` | | Load data from a server, paginate, infinite-scroll | `/grid/plugins/server-side.md` | | Edit cells, validate input, custom editors | `/grid/plugins/editing.md` | | Filter or search | `/grid/plugins/filtering.md` | | Group, aggregate, pivot, or show a tree | `/grid/plugins/grouping-rows.md`, `/grid/plugins/pivot.md`, `/grid/plugins/tree.md` | | Restyle, theme, or use dark mode | `/grid/guides/theming.md` | | Fix a blank / zero-height grid | `/grid/guides/troubleshooting.md` | | Understand a `TBW###` console message | `/grid/errors.md` | | Make it fast with large datasets | `/grid/guides/performance.md` | | Wire it up in React / Vue / Angular | `/grid/{react,vue,angular}/getting-started.md` | | Handle SSR, CSP, browser support, or i18n | `/grid/guides/platform.md` | | Write tests against the grid | `/grid/guides/automated-testing.md` | | Build a custom plugin | `/grid/plugin-development/custom-plugins.md` | For the full directives and copy-paste recipes, see `llms-full.txt`. ## Core Documentation - [Introduction](https://toolboxjs.com/grid/introduction.md): A high-performance, framework-agnostic data grid web component for JavaScript, React, Angular, and Vue. Zero dependencies, 100k+ rows, virtualized rendering. - [Getting Started](https://toolboxjs.com/grid/getting-started.md): Install @toolbox-web/grid and render your first grid in under a minute. Covers npm, CDN, ES modules, declarative HTML, and full framework integration for Vanilla JS, React, Vue, and Angular. - [AI-Assisted Development](https://toolboxjs.com/grid/ai.md): Machine-readable docs for @toolbox-web/grid — llms.txt, llms-full.txt, and per-page Markdown companions that let GitHub Copilot, Cursor, Claude, and other agents generate correct grid code. - [Core Features](https://toolboxjs.com/grid/core.md): Interactive playground, configuration, rendering, loading states, variable row heights, events, methods, and more for @toolbox-web/grid. - [Demos](https://toolboxjs.com/grid/demos.md): Full-featured demo applications showcasing @toolbox-web/grid with 15+ plugins, custom editors, master-detail, and more. - [Architecture](https://toolboxjs.com/grid/architecture.md): Internal architecture of @toolbox-web/grid — configuration system, render scheduler, virtualization, plugin lifecycle, and light DOM design. - [API Reference](https://toolboxjs.com/grid/api-reference.md): Complete reference for the component — properties, methods, events, CSS custom properties, keyboard shortcuts, declarative configuration, and accessibility. - [Error & Warning Reference](https://toolboxjs.com/grid/errors.md): Complete reference for all diagnostic codes emitted by @toolbox-web/grid. Each code links to an explanation and resolution steps. - [Compared to Other Grids](https://toolboxjs.com/grid/comparison.md): How @toolbox-web/grid stacks up against AG Grid, Tabulator, and SlickGrid — features, bundle size, and a live performance benchmark you can run in your browser. - [Changelog](https://toolboxjs.com/grid/changelog.md): Release history for @toolbox-web/grid — features, fixes, and breaking changes by version. Curated automatically by release-please. - [Plugins Overview](https://toolboxjs.com/grid/plugins.md): Overview of all @toolbox-web/grid plugins — editing, selection, filtering, grouping, export, and more. Tree-shakeable, individually importable. ## Guides - [Accessibility](https://toolboxjs.com/grid/guides/accessibility.md): How @toolbox-web/grid implements WAI-ARIA grid patterns, keyboard navigation, screen reader support, and high contrast mode. - [Automated testing](https://toolboxjs.com/grid/guides/automated-testing.md): Write reliable Playwright, Cypress, and WebdriverIO tests against @toolbox-web/grid using its stable CSS classes, data attributes, ARIA roles, and ready() / 'render' event lifecycle hooks. - [Common Patterns](https://toolboxjs.com/grid/guides/common-patterns.md): Practical recipes for combining grid features. Covers data browsing, editable grids, master-detail, grouping, export, and more. - [Migrating from v1 to v2](https://toolboxjs.com/grid/guides/migration.md): Complete migration guide for upgrading @toolbox-web/grid and its framework adapters from v1 to v2. - [Migrating from v2 to v3](https://toolboxjs.com/grid/guides/migration-v3.md): Breaking changes in @toolbox-web/grid v3 — the shell is now opt-in, and the v2.x deprecated API has been removed. - [Multi-version coexistence](https://toolboxjs.com/grid/guides/multi-version.md): How @toolbox-web/grid lets two different grid versions live on one page — useful for micro-frontends and gradual upgrades. - [Performance](https://toolboxjs.com/grid/guides/performance.md): Optimize @toolbox-web/grid for large datasets — virtualization tuning, bundle optimization, rendering best practices, and benchmarks. - [Platform Support](https://toolboxjs.com/grid/guides/platform.md): Browser support matrix, security & CSP guidance, server-side rendering, and internationalization for @toolbox-web/grid. - [Production Checklist](https://toolboxjs.com/grid/guides/production-checklist.md): A scannable pre-launch checklist for shipping @toolbox-web/grid to production. Each item links to the deep guide. - [Theming](https://toolboxjs.com/grid/guides/theming.md): Customize @toolbox-web/grid with CSS custom properties — colors, spacing, typography, dark mode, pre-built themes, and cascade layers. - [Touch Input](https://toolboxjs.com/grid/guides/touch-input.md): How @toolbox-web/grid works on touch devices — gesture map, long-press interactions, hit-target sizing, and known browser quirks. - [Troubleshooting](https://toolboxjs.com/grid/guides/troubleshooting.md): Solutions to common issues when working with @toolbox-web/grid — height and virtualization problems, performance tuning, plugin conflicts, and framework adapter development. ## Plugins - [Clipboard Plugin](https://toolboxjs.com/grid/plugins/clipboard.md): Copy and paste grid data with Excel-compatible clipboard support. - [Column Virtualization Plugin](https://toolboxjs.com/grid/plugins/column-virtualization.md): Improve performance for grids with many columns by only rendering visible columns. - [Context Menu Plugin](https://toolboxjs.com/grid/plugins/context-menu.md): Add right-click context menus to the grid with customizable items. - [Editing Plugin](https://toolboxjs.com/grid/plugins/editing.md): Enable inline cell editing with built-in and custom editors. - [Export Plugin](https://toolboxjs.com/grid/plugins/export.md): Export grid data to CSV or other formats. - [Filtering Plugin](https://toolboxjs.com/grid/plugins/filtering.md): Add column-level filtering with built-in filter panel and custom filters. - [Column Grouping Plugin](https://toolboxjs.com/grid/plugins/grouping-columns.md): Group columns visually under shared parent headers. - [Row Grouping Plugin](https://toolboxjs.com/grid/plugins/grouping-rows.md): Group rows by column values with expandable groups. - [Master-Detail Plugin](https://toolboxjs.com/grid/plugins/master-detail.md): Show expandable detail rows beneath data rows. - [Multi-Sort Plugin](https://toolboxjs.com/grid/plugins/multi-sort.md): Sort by multiple columns with shift-click support. - [Pinned Columns Plugin](https://toolboxjs.com/grid/plugins/pinned-columns.md): Pin columns to the left or right side of the grid. - [Pinned Rows (Status Bar) Plugin](https://toolboxjs.com/grid/plugins/pinned-rows.md): Pin summary or custom rows to the top or bottom of the grid. - [Pivot Table Plugin](https://toolboxjs.com/grid/plugins/pivot.md): Transform row data into a cross-tabulation (pivot table) layout. - [Print Plugin](https://toolboxjs.com/grid/plugins/print.md): Print the grid contents with configurable page settings. - [Column Reorder Plugin](https://toolboxjs.com/grid/plugins/reorder-columns.md): Allow users to reorder columns by drag and drop. - [Responsive Plugin](https://toolboxjs.com/grid/plugins/responsive.md): Automatically adapt the grid layout for different screen sizes. - [Row Drag-Drop Plugin](https://toolboxjs.com/grid/plugins/row-drag-drop.md): Drag rows within a single grid (reorder) and across grids that share a drop zone. - [Selection Plugin](https://toolboxjs.com/grid/plugins/selection.md): Cell, row, and range selection with full keyboard support, conditional selection, and checkbox mode. - [Server-Side Plugin](https://toolboxjs.com/grid/plugins/server-side.md): Connect the grid to server-side data sources with virtual scrolling. - [Shell Plugin](https://toolboxjs.com/grid/plugins/shell.md): Wrap the grid with a header bar (title + toolbar) and a collapsible tool-panel sidebar. - [Sticky Rows Plugin](https://toolboxjs.com/grid/plugins/sticky-rows.md): Pin selected data rows below the header as the user scrolls past them. - [Tooltip Plugin](https://toolboxjs.com/grid/plugins/tooltip.md): Display popover tooltips for truncated header and cell text, with per-column overrides. - [Tree Plugin](https://toolboxjs.com/grid/plugins/tree.md): Display hierarchical data as an expandable tree. - [Undo/Redo Plugin](https://toolboxjs.com/grid/plugins/undo-redo.md): Add undo/redo support for cell edits. - [Column Visibility Plugin](https://toolboxjs.com/grid/plugins/visibility.md): Allow users to toggle column visibility via a panel. ## Plugin Development - [Plugin Development](https://toolboxjs.com/grid/plugin-development.md): Build plugins that extend @toolbox-web/grid — lifecycle hooks, manifests, communication, feature registration, and bundling. - [Plugin Architecture](https://toolboxjs.com/grid/plugin-development/architecture.md): How the @toolbox-web/grid plugin system works internally — lifecycle, hooks, communication, manifests, validated properties, and the feature registry. - [Custom Plugins](https://toolboxjs.com/grid/plugin-development/custom-plugins.md): Build custom plugins for @toolbox-web/grid — lifecycle hooks, communication, queries, manifests, testing, and complete examples. ## Framework Adapters - [Framework Adapters](https://toolboxjs.com/grid/framework-adapters.md): How React, Angular, and Vue adapters let @toolbox-web/grid render framework-native components as cells, editors, and tool panels. - [Framework Adapter Architecture](https://toolboxjs.com/grid/framework-adapters/architecture.md): How the @toolbox-web/grid framework-adapter system intercepts grid rendering to mount React, Angular, and Vue components in cells, editors, and tool panels. ## Angular - [Base Classes for Editors & Filter Panels](https://toolboxjs.com/grid/angular/base-classes.md): BaseGridEditor, BaseGridEditorCVA, BaseOverlayEditor, and BaseFilterPanel — reusable base classes for custom Angular editors and filter panels. - [Changelog](https://toolboxjs.com/grid/angular/changelog.md): Release history for @toolbox-web/grid-angular — features, fixes, and breaking changes by version. Curated automatically by release-please. - [Angular Integration](https://toolboxjs.com/grid/angular/getting-started.md): Install and configure @toolbox-web/grid-angular — feature inputs, renderers, editors, events, inject functions, and Angular-specific patterns. - [Reactive Forms Integration](https://toolboxjs.com/grid/angular/reactive-forms.md): Bind @toolbox-web/grid to Angular FormArray — cell-level validation, dirty tracking, lazy form binding, and automatic validation styling. ## React - [Changelog](https://toolboxjs.com/grid/react/changelog.md): Release history for @toolbox-web/grid-react — features, fixes, and breaking changes by version. Curated automatically by release-please. - [React Integration](https://toolboxjs.com/grid/react/getting-started.md): Install and configure @toolbox-web/grid-react — feature props, JSX renderers, editors, hooks, and event handling. ## Vue - [Changelog](https://toolboxjs.com/grid/vue/changelog.md): Release history for @toolbox-web/grid-vue — features, fixes, and breaking changes by version. Curated automatically by release-please. - [Vue Integration](https://toolboxjs.com/grid/vue/getting-started.md): Install and configure @toolbox-web/grid-vue — feature props, slot renderers, editors, composables, and event handling. ## API Reference The complete generated TypeDoc reference (589 symbols) is indexed separately to keep this file small: [API Reference Index](https://toolboxjs.com/llms-api.txt). Every symbol has a plain-markdown companion — fetch it from that index, or append `.md` to any symbol's page URL. - **Core** — 91 symbols - **Plugins** — 213 symbols - **Plugin Development** — 32 symbols - **Framework Adapters** — 5 symbols - **Angular Adapter** — 116 symbols - **React Adapter** — 79 symbols - **Vue Adapter** — 53 symbols ## Optional - [Full documentation](https://toolboxjs.com/llms-full.txt): Guide, plugin and adapter pages inlined into one file for one-shot ingestion (a few non-implementation pages such as the changelogs are omitted; they remain linked above). - [Full documentation — React](https://toolboxjs.com/llms-full-react.txt): The full corpus scoped to React; code examples are narrowed to React and the Vue/Angular adapter pages are omitted. - [Full documentation — Vue](https://toolboxjs.com/llms-full-vue.txt): The full corpus scoped to Vue; code examples are narrowed to Vue and the React/Angular adapter pages are omitted. - [Full documentation — Angular](https://toolboxjs.com/llms-full-angular.txt): The full corpus scoped to Angular; code examples are narrowed to Angular and the React/Vue adapter pages are omitted. - [Full documentation — Vanilla](https://toolboxjs.com/llms-full-vanilla.txt): The full corpus scoped to vanilla TypeScript/JavaScript; the React, Vue and Angular adapter pages are omitted. - [API Reference Index](https://toolboxjs.com/llms-api.txt): Every generated TypeDoc symbol linked to its plain-markdown companion.