A single, self-contained <sv-grid> custom element you can drop into React, Vue, Angular, or plain HTML - no build step, no Svelte required in the host app.

Powered by SvGrid, the Svelte 5 data grid and data table: virtual scrolling, Excel-style filters, sorting, inline editing, grouping, and pagination.

CDN (zero build)

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

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

<script type="module">
  const grid = document.getElementById('grid')
  // Arrays/objects are set as PROPERTIES, not attributes:
  grid.columns = [
    { field: 'name', header: 'Name', editorType: 'text', width: 200 },
    { field: 'salary', header: 'Salary', align: 'right',
      format: { type: 'currency', currency: 'USD' } },
  ]
  grid.data = [
    { name: 'Ada Lovelace', salary: 145000 },
    { name: 'Alan Turing', salary: 160000 },
  ]
  grid.addEventListener('rowclick', (e) => console.log(e.detail))
</script>

npm

npm install @svgrid/grid-wc

import '@svgrid/grid-wc' // registers <sv-grid> globally

Attributes & properties

| Name | Kind | Default | Notes | | --- | --- | --- | --- | | data | property | [] | Array of row objects. Set via el.data = [...]. | | columns | property | [] | Array of column defs. Set via el.columns = [...]. | | sortable | attribute (boolean) | true | Enable column sorting. | | filterable | attribute (boolean) | true | Enable column filtering. | | selectable | attribute (boolean) | false | Row checkboxes + selection. | | editable | attribute (boolean) | false | Inline cell editing. | | row-height | attribute (number) | 36 | Row height in px. |

Events

| Event | detail | | --- | --- | | rowclick | the clicked row object | | selectionchange | array of selected rows |

The chart element

The standalone chart is a second element in the same package, without the grid:

<script type="module" src="https://cdn.jsdelivr.net/npm/@svgrid/grid-wc/dist/chart/sv-chart-element.js"></script>
<sv-chart id="chart" legend="right" zoomable range-presets></sv-chart>
<script type="module">
  document.getElementById('chart').spec = {
    type: 'line', categories: ['2026-01-01', '2026-01-02', '2026-01-03'],
    series: [{ label: 'Close', values: [10, 12, 11] }], xType: 'ordinal-time',
  }
</script>

From npm: import '@svgrid/grid-wc/chart', with wrappers at @svgrid/grid-wc/react/chart, @svgrid/grid-wc/vue/chart and the SvChartComponent export of @svgrid/grid-wc/angular. Reference: svgrid.com/docs/help/web-components/sv-chart.

Frameworks

• React 19+: <sv-grid sortable .data={rows} .columns={cols} /> (older React: set via a ref).
• Vue 3: <sv-grid sortable :data.prop="rows" :columns.prop="cols" />.
• Angular: add CUSTOM_ELEMENTS_SCHEMA, then <sv-grid [data]="rows" [columns]="cols" sortable>.

Full guide: svgrid.com/docs/help/web-components.

Styling

Built with shadow: 'none' (light DOM) so your page CSS and the --sg-* theme tokens apply, and the grid's overlay popups stay styled:

sv-grid {
  --sg-bg: #fff;
  --sg-header-bg: #f8fafc;
  --sg-border: #e2e8f0;
}

Pro

This element ships the free MIT @svgrid/grid core. For export, import, print and pivot, see @svgrid/enterprise. Its Suite edition also ships <sv-sheet>, the spreadsheet as a custom element, with the same formula engine and .xlsx / .xls / .ods support. The AI helpers need neither: they are free in @svgrid/grid.

SvGrid(TM) is a trademark of jQWidgets Ltd. This package is MIT-licensed.