API Reference — Overview

GridCraft exposes a small, focused public API. Everything you need is exported from the single entry point @gridcraft/angular. All exports are individually tree-shakeable thanks to Angular's standalone component model — unused features add zero bytes to your bundle.

Installation & import

Add the component to any standalone Angular component or NgModule by importing it directly. No module registration, no forRoot — just import what you use.

import {
  GridcraftComponent,
  GridColumn,
  GridConfig,
  GridDataSource,
  FetchParams,
  FetchResult,
} from '@gridcraft/angular';

@Component({
  selector: 'app-my-grid',
  standalone: true,
  imports: [GridcraftComponent],
  template: `
    <gridcraft
      [columns]="columns"
      [dataSource]="dataSource"
      [config]="config"
    />
  `,
})
export class MyGridComponent {
  // ...
}

Standalone & tree-shaking

Because GridcraftComponent is a standalone Angular component, Angular's compiler only bundles the directives, pipes, and services that are actually referenced in your template. Features like export (GridExportService), column persistence, and sub-grid nesting are only included when configured.

Full public API

The following symbols are exported from @gridcraft/angular:

Symbol	Kind	Description
GridcraftComponent	Component	Root grid component. Add to your template as `<gridcraft>`.
GridColumn	Interface	Column definition object. Pass an array to the `[columns]` input.
GridConfig	Interface	Top-level configuration object. Pass to the `[config]` input.
GridDataSource	Interface	Data source contract. Implement `fetchRows()` and pass to `[dataSource]`.
FetchParams	Interface	Parameters passed to `fetchRows()`: offset, limit, sorts, filters, page.
FetchResult	Interface	Return shape of `fetchRows()`: `rows` array and `totalCount`.
ScrollMode	Type	`'infinite' \| 'paging' \| 'virtual-paging'` — controls pagination strategy.
FilterMode	Type	`'row' \| 'popup'` — controls where filter controls are rendered.
FilterState	Type	Active filter map: `Record<columnKey, FilterValue \| null>`.
SortConfig	Interface	A single sort entry: `{ key: string; dir: 'asc' \| 'desc' }`.
GroupingConfig	Interface	Row grouping options: `groupBy`, `showCount`, `startCollapsed`, `fetchGroups`.
GcGroupRow	Interface	Sentinel object inserted into the display array for each group header row.
isGcGroupRow	Function	Type guard: `isGcGroupRow(row)` returns `true` for group header sentinels.
RowExpandConfig	Interface	Row expansion settings: `expandMode`, `estimatedHeight`, `canExpand`, `subGrid`.
SubGridConfig	Interface	Nested grid configuration for expand rows: `columns`, `dataSource`, `config`.
CellContext	Interface	Template context for `cellTemplate`: `row`, `value`, `column`, `rowIndex`.
ExpandContext	Interface	Template context for `#gcExpandRow`: `row`, `rowIndex`.
SummaryContext	Interface	Template context for `subHeaderTemplate` and `footerTemplate`: `column`.
GridStateSnapshot	Interface	Serialisable snapshot of interactive state (sorts, filters, columns, page). Use with `grid.getState()` / `setState()` / `[initialState]`.
GridTransaction	Interface	Batch mutation for live updates: `{ add?, update?, remove?, addIndex? }`. Pass to `applyTransaction()` or stream via `[liveSource]`.
TransactionResult	Interface	Return value of `applyTransaction()`: `{ added, updated, removed }` arrays with per-cell change info.
LiveConfig	Interface	Live-update tuning knobs nested in `GridConfig.live`: `flashCells`, `flashDuration`, `flushInterval`, `maxRows`, etc.
GridThemeTokens	Type	`Partial<Record<GcThemeVar, string \| number>>` — runtime per-grid CSS variable overrides. Pass to `[themeTokens]`. Numbers auto-suffixed with px/ms.
ContextMenuConfig	Interface	Right-click context menu configuration in `GridConfig.contextMenu`. Supports static arrays or resolver functions for `cellItems` and `headerItems`.
ContextMenuItem	Interface	One menu item: `label`, `icon`, `action`, `children` (submenu), `disabled`, `hidden`, `separator`.
ContextMenuContext	Interface	Passed to item resolvers and action callbacks: `type` ('cell'\|'header'), `row`, `column`, `value`, `selectedRows`.
RowDragConfig	Interface	Row drag-reorder config in `GridConfig.rowDrag`: `managed` (auto-reorder in state), `position`, `canDrag` predicate.
RowDragEvent	Interface	Emitted by `(rowDragEnd)` after a drop: `{ row, fromIndex, toIndex, rows }`.
CellEditEvent	Interface	Emitted by `(cellEditCommit)` after an inline edit is committed: `{ row, oldRow, colKey, oldValue, newValue }`.
GRID_MESSAGES	Constant	Pre-built UI text for 12 locales (en, ar, fr, de, es, pt, fa, ur, tr, zh, ja, ru). Pass to `config.messages` or `GridDirectionService.setMessages()`.
RTL_LOCALES	Constant	`Set<string>` of RTL locale codes: `'ar'`, `'fa'`, `'ur'`. Use alongside `GRID_MESSAGES` when switching app language.
GridDirectionService	Service	Root-level reactive service. Methods: `setDir()`, `setTheme()`, `setMessages()`, `patchMessages()`. Changes apply to all grids without an explicit per-grid override. Import it from `@gridcraft/angular/core` in anything that runs before your first route — see Bundle Size.
provideGridDefaults	Function	Provider factory for app-wide `GridConfig` defaults. Call once in `ApplicationConfig.providers`. Per-grid `[config]` always wins. Import it from `@gridcraft/angular/core`: `app.config.ts` loads before any route, and the main barrel would pull the whole grid into your first download.
GcThemeVar · GridThemeTokens · ThemeSeed	Types	The theming vocabulary: every themeable `--gc-*` variable name, a complete token set, and the compact seed one can be derived from. Pass a `GridThemeTokens` literal to the grid's `themeTokens` input, or set the variables in CSS — see Theming.
tokensToStyleObject	Function	Turns a `GridThemeTokens` literal into an inline-style object, appending each token's unit (`px` / `ms`) to numeric values. What the grid's `themeTokens` input uses internally; exported for when you bind `[style]` yourself.

Quick-reference: inputs & outputs

The three inputs on <gridcraft> cover all use cases. All grid behaviour is configured through the [config] object — no extra directives or attributes needed.

<!-- All three inputs are independent -->
<gridcraft
  [columns]="columns"          <!-- GridColumn<T>[]  — REQUIRED -->
  [dataSource]="dataSource"    <!-- GridDataSource<T> — omit for static data -->
  [config]="config"            <!-- GridConfig<T>     — all optional, has safe defaults -->

  (sortChange)="onSort($event)"         <!-- SortConfig[] -->
  (selectionChange)="onSelect($event)"  <!-- T[] -->
  (filterChange)="onFilter($event)"     <!-- FilterState -->
  (rowClick)="onRowClick($event)"       <!-- { row: T; index: number } -->
  (rowsLoaded)="onLoad($event)"         <!-- T[] -->
/>

Next steps

Dive into the individual reference pages:

GridConfig — all configuration options with defaults
GridColumn — column definition properties
Data Source — server data contract and grouping protocol