GridCraft Documentation

Explore by category

What is GridCraft?

GridCraft is a data grid library for Angular 22+. Signals-native, fully standalone, zoneless-ready, and built without a single external runtime dependency. One component handles everything from infinite scroll to real-time streaming to drill-down grouping — all wired up with Angular's reactive primitives.

Why it exists

Most Angular data grids fall into one of two categories: heavyweight enterprise packages that ship with dozens of peer dependencies and opinionated styling you spend weeks overriding, or lightweight table components that run out of features the moment your requirements get serious.

GridCraft sits in the middle on purpose. It handles the hard parts — virtual scroll, server-side pagination, column pinning, real-time updates, theming — without pulling in a chart library, a utility framework, or a date parser to do it. Every feature is hand-written and tree-shakeable. The CSV, Excel, and Word exporters are pure in-browser implementations with no runtime dependencies. The sparkline is a zero-dependency SVG component. The theme engine is plain TypeScript.

The other deliberate constraint is Angular-first design. State is signals and computed values throughout — no BehaviorSubject, no dirty-checking, no zone-triggered re-renders. Every component is OnPush. Services are component-scoped, so two grids on the same page never share state.

The three inputs

Every grid instance takes three inputs. That's the entire API surface for basic usage.

Optional inputs like [themeTokens], [liveSource], and [initialState] layer on top when you need them. The component also exposes outputs for sort changes, filter changes, row clicks, selection changes, drag events, and more.

Scroll and pagination modes

Pick the mode that fits your data access pattern. You can switch at runtime by updating config.scrollMode.

In both modes the grid only renders the rows in the viewport — virtual scroll is always on. Row heights can expand when a row is expanded, and the offset engine recalculates automatically.

Capability overview

A quick map of what's built in. Each feature links to its dedicated page with a live demo and full configuration reference.

Columns

• Three sizing modes — 'fixed' (px), 'flex' (fr-distributed), 'auto' (content-sized). Rows use CSS Grid, not flex, so header and body cells stay pixel-aligned at every column width.
• Drag resize — per-column resize handle; flex columns automatically convert to fixed on drag so the grid template stays consistent.
• Drag reorder — HTML5 drag-drop with FLIP animation on drop.
• Pinning — sticky left or right columns, with correct shadow and z-index stacking across expand, checkbox, and header rows.
• Visibility panel — toolbar button that opens a column show/hide panel.
• Custom templates — cellTemplate, headerTemplate, subHeaderTemplate (sub-header row), footerTemplate — all typed via their respective context interfaces.
• State persistence — save column order, width, pin, and visibility to localStorage, sessionStorage, or a server endpoint.

Data and filtering

• Server-side and client-side sorting — sortMode: 'server' triggers a refetch; sortMode: 'client' sorts loaded rows in memory with no network call. Client-side sort supports dot-notation paths, valueGetter, and custom comparators.
• Four filter types — text (contains/equals/startsWith/endsWith), number (=, ≠, >, ≥, <, ≤), date (before/after/equals), and select (single value). Blank / not-blank operators are available on every type.
• Two filter UIs — inline filter row below the header, or popup filters triggered from a header icon.
• Aggregations — per-column sum, avg, min, max, count or a custom function, rendered in the footer row.

Row behavior

• Row selection — single or multi mode, optional checkbox column, shift-click range selection, select-all.
• Row expansion — a template-based detail panel under any row. Panel height is measured after render and fed back into the virtual scroll engine.
• Row drag-reorder — pointer-based drag handle column with ghost preview and edge auto-scroll. managed: true reorders the row array automatically.
• Inline editing — double-click (or single-click) to edit any cell. Built-in editors for text, number, date, checkbox, and select. Custom editor via template. Ctrl+Z / Ctrl+Y undo/redo across the session.
• Row numbers — optional sequential numbering column, 1-based, data rows only.

Export, theming, and i18n

• Export — CSV, generated in the browser by a hand-written writer with no runtime dependencies. UTF-8 with a BOM, so Excel opens it cleanly.
• Theming — all visual values flow through --gc-* CSS custom properties. Three built-in themes: default (GridCraft Slate), dark, material. Override any token globally via a custom theme class, or per-grid via the [themeTokens] input.
• 12 built-in locales — English, Arabic, French, German, Spanish, Portuguese, Farsi, Urdu, Turkish, Chinese, Japanese, Russian. RTL is handled automatically for the three RTL locales (Arabic, Farsi, Urdu).

Licence

GridCraft is released under the MIT licence. Every feature documented on this site is in the one package you install — there is no separate edition, no key to register, and no watermark. Use it in commercial products without asking.

Requirements

GridCraft has zero external runtime dependencies beyond Angular and RxJS. There is no date library, no utility belt, no charting package. The only packages listed in peerDependencies are the Angular platform packages and RxJS, which your project already provides.