# Quick start: the grid in any page
`@svgrid/grid-wc` is a prebuilt custom element. One `
```
Or from npm:
```bash
npm install @svgrid/grid-wc
```
```js
import '@svgrid/grid-wc' // side effect: registers
```
## The one rule worth learning first
The grid the element wraps. Everything below configures this.
> Live demo: Quick start - https://svgrid.com/demos/01-quick-start/
**Attributes are strings; everything else is a property.**
```html
```
```js
// Arrays, objects and functions: property only. There is no string form.
grid.columns = [{ field: 'name', header: 'Name' }]
grid.data = rows
grid.groupBy = ['country']
grid.getRowId = (row) => row.id
```
Setting `columns` as an attribute produces `columns="[object Object]"` and an
empty grid. That is the single most common mistake with any custom element, and
the [reference](https://svgrid.com/docs/help/web-components/sv-grid/) marks which props can be which.
## Turning features on
What `sortable`, `filterable`, `pageable` and `page-size` produce.
> Live demo: Sort, filter, paginate - https://svgrid.com/demos/02-sort-filter-paginate/
Every one of the grid's props is reachable. The 72 primitive ones have
attributes, so a lot is configurable without any script at all:
```html
```
Anything array- or object-shaped goes through a property:
```js
grid.groupBy = ['country', 'city']
grid.pinnedTopRows = [totalsRow]
grid.initialSorting = [{ id: 'amount', desc: true }]
grid.conditionalFormats = [{ when: { field: 'amount', op: 'gt', value: 1000 }, style: 'ok' }]
```
## Listening for changes
Editing is where most events come from - `cellvaluechange` fires on every commit here.
> Live demo: Inline editing - https://svgrid.com/demos/05-inline-editing/
Every grid callback is a DOM `CustomEvent`, so any host listens the standard
way. `detail` is the callback's argument:
```js
grid.addEventListener('cellvaluechange', (e) => {
const { rowIndex, columnId, oldValue, newValue } = e.detail
save(rowIndex, columnId, newValue)
})
grid.addEventListener('sortingchange', (e) => console.log(e.detail))
```
## Calling the grid
```js
grid.addEventListener('apiready', (e) => e.detail.exportCsv())
// The handle is also on the element, so binding late still works:
grid.api.exportCsv()
```
## Two elements
`` renders in the light DOM, so your page's CSS applies to it. If you
are dropping the grid into a page whose CSS you do not control, use
[``](https://svgrid.com/docs/help/web-components/shadow-dom/) instead - same API, style-isolated.
## Next
- [`` reference](https://svgrid.com/docs/help/web-components/sv-grid/) - every property, attribute and event.
- [React](https://svgrid.com/docs/help/web-components/react/), [Vue](https://svgrid.com/docs/help/web-components/vue/), [Angular](https://svgrid.com/docs/help/web-components/angular/).
- [TypeScript](https://svgrid.com/docs/help/web-components/typescript/) - typing the element in TSX and TS.
- [Limitations](https://svgrid.com/docs/help/web-components/limitations/) - what cannot cross the boundary.
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/web-components/quick-start/ . All docs: https://svgrid.com/llms.txt