SvGrid with React, Vue or Angular

Pick your framework and you have a running grid in about thirty seconds - no local setup, nothing to configure.

The 30-second path

1. Install one package:

2. Import the component for your framework and render it:

Framework	Import	Tag
React	`import { SvGrid } from '@svgrid/grid-wc/react'`	`<SvGrid data={rows} columns={cols} sortable filterable />`
Vue	`import { SvGrid } from '@svgrid/grid-wc/vue'`	`<SvGrid :data="rows" :columns="cols" sortable filterable />`
Angular	`import { SvGridComponent } from '@svgrid/grid-wc/angular'`	`<sv-grid [data]="rows" [columns]="cols" [sortable]="true" />`

That is the whole integration. All 124 properties and 33 events of the grid are typed props on every one of them.

Or skip step 1 and open a working project right now:

The examples

The same nine apps in each framework, so you can compare them directly - only the framework differs, never the data or the grid configuration. Every one is compiled in CI, so what you open is what works.

Recipe	What it shows	React	Vue	Angular
A first grid	Rows, columns, and the two features almost every table wants	→	→	→
Sorting and filtering	A filter row under the headers, multi-column sort, and the current sort read back into your own state	→	→	→
Editing and saving	Inline editing, with each committed edit arriving through `cellvaluechange`	→	→	→
Row selection	Checkboxes, with the selected rows handed straight to you - both the selection map and the rows themselves	→	→	→
Grouping and totals	Group by one or two columns with an aggregate in the group row	→	→	→
Pagination	Client-side paging	→	→	→
Server-side data	The grid renders the page you hand it and tells you when the user wants another	→	→	→
Theming	The `--sg-*` custom properties	→	→	→
Excel export (Enterprise)	The paid pack from a non-Svelte host	→	→	→

The chart element

The standalone chart ships as its own element, <sv-chart>, in the same package: import '@svgrid/grid-wc/chart' registers it, and @svgrid/grid-wc/react/chart, @svgrid/grid-wc/vue/chart and the SvChartComponent export of the Angular package wrap it the same way the grid is wrapped. Set spec as a property; the primitives (zoomable, range-presets, legend="right", animate, drawable) are attributes. The <sv-chart> reference lists all of it, and the charts guide says what goes in a spec. It carries none of the grid, so a page that only charts loads the chart.

What each wrapper is actually for

The grid is a custom element underneath, and a custom element is awkward in each framework in a different way. Each wrapper removes exactly that awkwardness:

React - React 18 and earlier stringify object props onto attributes, so columns={cols} silently becomes "[object Object]" and the grid renders empty with no error. The wrapper assigns them as properties on every version.
Vue - removes the isCustomElement build config and the .prop modifier that every object binding would otherwise need.
Angular - removes CUSTOM_ELEMENTS_SCHEMA from every component that shows a grid, and gives you typed @Input / @Output instead of an untyped element. Its selector is the element's own tag, so there is no extra wrapper element in your DOM.

All three also handle two ordering problems you would otherwise meet yourself: the element renders before a framework assigns properties in an effect, and apiready fires once during that first mount - before React can bind a listener at all.

The imperative api

Every wrapper exposes the grid api once it is ready:

React - a ref: grid.current?.api
Vue - a template ref: grid.value?.api
Angular - the component instance: grid.api

Not using a framework?

<sv-grid> works in plain HTML with one <script> tag - see Quick start.