Web Components & Custom Elements

Ship SvGrid as a framework-agnostic web component and use the Svelte 5 data grid in React, Vue, Angular, or plain HTML - no Svelte required in the host app.

SvGrid is authored in Svelte 5, but Svelte compiles to standards-based custom elements. @svgrid/grid-wc publishes two of them, prebuilt: drop in one <script> tag and use <sv-grid> like any built-in element. If you searched for a "web component data grid" or a "framework-agnostic Svelte table", this is the integration path.

Start here

Framework wrappers

The package ships a component for each of the three big frameworks, generated from the same types as the element, as subpath imports:

Each framework is an OPTIONAL peer dependency, so a plain-HTML consumer never installs any of them, and each wrapper is a couple of KB that reuses the one element bundle rather than shipping a second copy of the grid.

Start here for the thirty-second path and nine runnable examples per framework - each one opens as a full editable project, with no local setup.

Why a custom element

• Use it anywhere. React, Vue, Angular, Solid, Astro, Rails/Laravel server-rendered pages, or a plain <script> tag. The browser treats <sv-grid> like any built-in element.
• One bundle, no framework lock-in. Ship a single file to a CDN; consumers add one <script type="module"> and a tag.
• The whole grid. 98 properties and 20 events, so virtualization, Excel-style filters, inline editing, grouping, tree data, pinning, pagination and the enterprise features are all reachable - not a hand-picked subset. The surface is generated from <SvGrid>'s own Props type and CI fails if the two drift. Exactly two props are left out, and the reference says why.

If your team is on Svelte 5, use the component directly (First grid) - the custom element exists to reach non-Svelte hosts, and it costs you the Svelte runtime to do it.

Quick look

<script type="module" src="https://unpkg.com/@svgrid/grid-wc"></script>

<sv-grid id="grid" sortable filterable pageable page-size="25"
         style="display:block;height:420px"></sv-grid>

<script type="module">
  const grid = document.getElementById('grid')
  // Arrays and objects are properties; primitives can be attributes.
  grid.columns = [{ field: 'name', header: 'Name' }, { field: 'role', header: 'Role' }]
  grid.data = [{ name: 'Ada', role: 'Engineering' }, { name: 'Alan', role: 'Research' }]
  grid.addEventListener('cellvaluechange', (e) => console.log(e.detail))
</script>

Full walkthrough in Quick start.

Building your own element

The published package is the recommended path, but the wrapper is about sixty lines and you may want a narrower surface, your own tag name, or extra behaviour. The source is packages/grid-wc/src in the repository: sv-grid-element.svelte is the light-DOM wrapper, GridBody.svelte is the part both elements share, and scripts/generate-surface.mjs writes the prop and event declarations from <SvGrid>'s Props type.

See also

• Enterprise features from the element - export, import, print and pivot need no Svelte in your build; the board and scheduler views do.
• Tailwind integration - the full --sg-* token list.