Installation

Add GridCraft to an Angular 17+ project in a few steps. There are no peer dependencies beyond Angular itself and RxJS — both of which your project already provides.

1. Install the package

Run one of the following commands depending on your package manager:

npm install @gridcraft/angular

yarn add @gridcraft/angular

pnpm add @gridcraft/angular

Angular version compatibility

Each GridCraft major version tracks the corresponding Angular major. If you're on an older Angular version, install the matching release using npm install @gridcraft/angular@<major>.

Latest receives new features and fixes.   Active receives features and fixes.   LTS security & critical fixes only.   EOL no further releases.

2. Add a theme

The grid ships unstyled without a theme import. Add one of the three built-in themes to your global stylesheet. The default theme (GridCraft Slate) is a clean, cool-grey palette with a blue accent — a solid starting point for most applications.

The recommended way is a single @use in your global styles.scss:

// styles.scss
@use '@gridcraft/angular/themes/default';   // GridCraft Slate (recommended)
// @use '@gridcraft/angular/themes/dark';
// @use '@gridcraft/angular/themes/material';

If your project uses plain CSS or you prefer to keep theme loading out of SCSS, you can reference the compiled file directly in angular.json instead:

// angular.json  →  projects.<name>.architect.build.options.styles
"styles": [
  "src/styles.scss",
  "node_modules/@gridcraft/angular/themes/default.scss"
]

Only import one theme per application. Themes are scoped to the .gc-theme-default (or -dark, -material) class that the grid sets on its root element — they do not leak into the rest of your app.

3. Import the component

GridCraft is fully standalone. There is no gridcraftModule to register. Import GridcraftComponent directly into any standalone component or NgModule that uses it:

import { GridcraftComponent } from '@gridcraft/angular';
import { GridColumn } from '@gridcraft/angular';

@Component({
  standalone: true,
  imports: [GridcraftComponent],
  template: `<gridcraft [columns]="columns" />`,
})
export class MyComponent {
  columns: GridColumn[] = [
    { key: 'id',   name: 'ID',   width: 80 },
    { key: 'name', name: 'Name', sizing: 'flex' },
  ];
}

4. Provide HttpClient (server-side data only)

If you're fetching data from a server you'll need HttpClient available in your app. For static or in-memory data, skip this step — the grid's dataSource input is optional.

// app.config.ts
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
  ],
};

5. App-wide defaults (optional)

Rather than repeating the same config options across every grid in your app, use provideGridDefaults() in your root providers. Per-grid [config] inputs always win over these defaults, so you can still override anything at the instance level.

// app.config.ts
import { provideGridDefaults } from '@gridcraft/angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideGridDefaults({
      rowHeight:       48,
      pageSize:        50,
      theme:           'default',
      columnResize:    true,
      columnReorder:   true,
    }),
  ],
};

Verify it works

Drop this into any template. With no dataSource bound, the grid renders with empty rows and no loading state — enough to confirm the theme is applied and the component is found:

<gridcraft
  [columns]="[
    { key: 'id',   name: 'ID',   width: 80 },
    { key: 'name', name: 'Name', sizing: 'flex' },
  ]"
  [config]="{ scrollMode: 'paging', pageSize: 5 }"
/>

If the grid renders without styling, the theme import is missing or pointed at the wrong path. Check your styles.scss and make sure node_modules/gridcraft is resolvable from that file's location.

Requirements

There are no other runtime dependencies. The CSV, Excel, and Word exporters are in-browser implementations. The sparkline component, theme engine, and i18n layer are all hand-written with no external packages.