Quick Start
From nothing to a working, sortable, filterable grid in about five minutes. Every snippet below is complete and copy-paste-runnable — start with the minimal grid, then layer on one free feature at a time. New here? Installation takes about a minute first.
1 · A working grid
The whole minimum: describe the columns, hand the grid an array through a data source, give it a height. That is a running grid — no module, no backend, no license.
What just happened
Three inputs and you have a running grid: [columns] describe what to show,
[dataSource] supplies the rows, and [config] holds everything else
(here just a height so the grid has a scroll viewport). No module to register —
GridcraftComponent is standalone.
The fetchRows method is the only thing a data source must provide. For an in-memory
array, RxJS of() satisfies the contract without any HTTP call. When you move to a
real backend later, only this method changes.
2 · Add sorting
Add sortable: true to the columns and sortMode: 'client' to the config. Click any header to sort the loaded rows in memory — ascending, descending, then off.
Add sorting
Mark each column you want sortable with sortable: true, then set
sortMode: 'client' so the grid sorts the rows it already has, in memory — no
refetch. Click a header to cycle ascending → descending → none.
For a large dataset you page from a server, drop sortMode (it defaults to
'server') and the grid forwards the active sorts to
fetchRows instead, so the whole dataset is sorted, not just the loaded page.
3 · Add filtering
filterMode: 'row' puts an input under each header; filterApplyMode: 'client' filters in memory. Give each column a filter type — text for names, number for salary — and start typing.
Add filtering
filterMode: 'row' renders a filter input under each header, and
filterApplyMode: 'client' tells the grid to filter the loaded rows in memory.
Each column opts in with a filter type — 'text' for names,
'number' for salary. Start typing to narrow the rows.
4 · Add selection
One line — rowSelection: { mode: 'multi', checkboxColumn: true } — adds a checkbox column and a select-all header box. The grid tracks the selected rows for you.
Add selection
rowSelection: { mode: 'multi', checkboxColumn: true } adds a checkbox column and a
select-all box in the header. Use mode: 'single' for radio-style single selection.
That is the whole setup — the grid tracks the selected rows for you.
Every option on this page is free. Sorting, filtering, and selection all run client-side over the loaded rows — nothing here needs a server or a license key.
Where next
- Paging — page-button navigation over larger datasets.
- Server data & infinite scroll — the same grid over HTTP.
- Filtering — all filter types, including popup filters.
- Theming — restyle everything with CSS custom properties.
The three inputs
| Property | Type | Default | Description |
|---|---|---|---|
| [columns] | GridColumn<T>[] | — | Column definitions — label, data path, sizing, sorting, filtering, templates, editing. |
| [dataSource] | GridDataSource<T> | — | One fetchRows(params) method returning an Observable. You own the HTTP call; the grid decides when to call it. |
| [config] | GridConfig<T> | {} | Everything else — height, scroll mode, sorting, filtering, selection, theming. All fields optional. |