# SvGrid in Vue ```bash npm install @svgrid/grid-wc ``` ```vue ``` The component is generated from ``'s own types, and it removes the two things a raw custom element needs in Vue: the `isCustomElement` build config, and a `.prop` modifier on every object binding. `shadow` picks the style-isolated element, and a template ref exposes `api` and `element`. ## Examples Nine complete apps. Each one is **running on this page** - sort it, filter it, edit a cell - above the code that produces it. **Open in StackBlitz** then boots the whole project, editable, with no local install and nothing to configure, and every one is compiled in this repository's CI, so what you open is what works. They all share the same typed `data.ts`, so the only thing that changes between recipes is the grid. A note on the previews: the grid you can touch is driven by a Svelte host rather than a Vue one. It is not a recording or a lookalike - it renders through the same component `` renders, with the same data and the same props as the listing below it, so the only thing that differs from the Vue app is who sets those props. Click **Open in StackBlitz** to run the real Vue one. ### A first grid Rows, columns, and the two features almost every table wants.

```vue ``` ### Sorting and filtering A filter row under the headers, multi-column sort, and the current sort read back into your own state.

```vue ``` ### Editing and saving Inline editing, with each committed edit arriving through `cellvaluechange`. Swap the local update for your save call.

```vue ``` ### Row selection Checkboxes, with the selected rows handed straight to you - both the selection map and the rows themselves.

```vue ``` ### Grouping and totals Group by one or two columns with an aggregate in the group row. `groupBy` is an array, so it is one of the props that can only be a property.

```vue ``` ### Pagination Client-side paging. `pageSize` is the INITIAL page size, read once at mount.

```vue ``` ### Server-side data The grid renders the page you hand it and tells you when the user wants another. `externalSort` and `externalPagination` stop it doing the work locally; `rowCount` is how it knows how many pages exist.

```vue ``` ### Theming The `--sg-*` custom properties. Ordinary CSS custom properties, so they cascade from any ancestor - which is why they also reach inside ``.

```vue ``` ### Excel export (Enterprise) The paid pack from a non-Svelte host. `@svgrid/enterprise/export` is plain JavaScript, so it needs no Svelte in your build - the same goes for `/import`, `/print`, `/pivot` and `/license`. See [Enterprise features](https://svgrid.com/docs/help/web-components/enterprise/) for what those subpaths cover and what needs a Svelte-aware bundler.

```vue ``` ## Nuxt Custom elements are client-only, and so is the wrapper that renders one. Import it in a client plugin, or keep the grid inside ``: ```vue ``` > Live demo: Sort, filter, paginate - https://svgrid.com/demos/02-sort-filter-paginate/ ## Rendering into cells You cannot put a Vue component inside a cell: cell rendering is a Svelte compile-time feature. Column `format` options, `fieldFn` and HTML-string renderers cover badges, links and formatted values - see [limitations](https://svgrid.com/docs/help/web-components/limitations/). ## The raw element Vue binds properties to custom elements natively, so `` works directly too. The difference is what you take on: the `isCustomElement` build config, and a `.prop` modifier on every object binding. [Quick start](https://svgrid.com/docs/help/web-components/quick-start/) covers the element, and the [reference](https://svgrid.com/docs/help/web-components/sv-grid/) lists every property, attribute and event. ## See also - [All frameworks](https://svgrid.com/docs/help/web-components/frameworks/) - the same examples in React and Angular. - [`` reference](https://svgrid.com/docs/help/web-components/sv-grid/) - every property, attribute and event. - [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/vue/ . All docs: https://svgrid.com/llms.txt