# 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'` | `` |
| Vue | `import { SvGrid } from '@svgrid/grid-wc/vue'` | `` |
| Angular | `import { SvGridComponent } from '@svgrid/grid-wc/angular'` | `` |
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 | [→](https://svgrid.com/docs/help/web-components/react/#a-first-grid) | [→](https://svgrid.com/docs/help/web-components/vue/#a-first-grid) | [→](https://svgrid.com/docs/help/web-components/angular/#a-first-grid) |
| Sorting and filtering | A filter row under the headers, multi-column sort, and the current sort read back into your own state | [→](https://svgrid.com/docs/help/web-components/react/#sorting-and-filtering) | [→](https://svgrid.com/docs/help/web-components/vue/#sorting-and-filtering) | [→](https://svgrid.com/docs/help/web-components/angular/#sorting-and-filtering) |
| Editing and saving | Inline editing, with each committed edit arriving through `cellvaluechange` | [→](https://svgrid.com/docs/help/web-components/react/#editing-and-saving) | [→](https://svgrid.com/docs/help/web-components/vue/#editing-and-saving) | [→](https://svgrid.com/docs/help/web-components/angular/#editing-and-saving) |
| Row selection | Checkboxes, with the selected rows handed straight to you - both the selection map and the rows themselves | [→](https://svgrid.com/docs/help/web-components/react/#row-selection) | [→](https://svgrid.com/docs/help/web-components/vue/#row-selection) | [→](https://svgrid.com/docs/help/web-components/angular/#row-selection) |
| Grouping and totals | Group by one or two columns with an aggregate in the group row | [→](https://svgrid.com/docs/help/web-components/react/#grouping-and-totals) | [→](https://svgrid.com/docs/help/web-components/vue/#grouping-and-totals) | [→](https://svgrid.com/docs/help/web-components/angular/#grouping-and-totals) |
| Pagination | Client-side paging | [→](https://svgrid.com/docs/help/web-components/react/#pagination) | [→](https://svgrid.com/docs/help/web-components/vue/#pagination) | [→](https://svgrid.com/docs/help/web-components/angular/#pagination) |
| Server-side data | The grid renders the page you hand it and tells you when the user wants another | [→](https://svgrid.com/docs/help/web-components/react/#server-side-data) | [→](https://svgrid.com/docs/help/web-components/vue/#server-side-data) | [→](https://svgrid.com/docs/help/web-components/angular/#server-side-data) |
| Theming | The `--sg-*` custom properties | [→](https://svgrid.com/docs/help/web-components/react/#theming) | [→](https://svgrid.com/docs/help/web-components/vue/#theming) | [→](https://svgrid.com/docs/help/web-components/angular/#theming) |
| Excel export (Enterprise) | The paid pack from a non-Svelte host | [→](https://svgrid.com/docs/help/web-components/react/#excel-export-enterprise) | [→](https://svgrid.com/docs/help/web-components/vue/#excel-export-enterprise) | [→](https://svgrid.com/docs/help/web-components/angular/#excel-export-enterprise) |
## The chart element
The standalone chart ships as its own element, ``, 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 [`` reference](https://svgrid.com/docs/help/web-components/sv-chart/) lists all of it, and the
[charts guide](https://svgrid.com/docs/help/charts/) 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?
`` works in plain HTML with one `