@svgrid/grid-wc 2.0.1 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE CHANGED
@@ -1,28 +1,3 @@
1
- This repository is a multi-package workspace. Different packages ship
2
- under different licenses. The authoritative license for each package is
3
- the LICENSE file inside that package directory.
4
-
5
- ------------------------------------------------------------------------
6
- Per-package licensing
7
- ------------------------------------------------------------------------
8
-
9
- packages/grid/ MIT (terms below, and packages/grid/LICENSE)
10
- packages/enterprise/ Commercial - see packages/enterprise/LICENSE
11
- packages/mcp/ Commercial - see packages/mcp/LICENSE
12
- website/ Proprietary - see website/LICENSE
13
-
14
- Only `@svgrid/grid` is open source. Everything else in this
15
- repository (the Pro feature pack, the MCP server, the marketing +
16
- docs website, and any other package added later that does not ship
17
- its own MIT LICENSE) is proprietary and may not be copied, modified,
18
- or redistributed without a paid license. Source is visible in this
19
- repository for transparency and for paying customers; visibility does
20
- not grant a license.
21
-
22
- ------------------------------------------------------------------------
23
- MIT License (applies ONLY to packages/grid)
24
- ------------------------------------------------------------------------
25
-
26
1
  MIT License
27
2
 
28
3
  Copyright (c) 2026 jQWidgets Ltd
package/README.md CHANGED
@@ -1,90 +1,110 @@
1
- # @svgrid/grid-wc
2
-
3
- **SvGrid as a framework-agnostic web component.** A single, self-contained
4
- `<sv-grid>` [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
5
- you can drop into React, Vue, Angular, or plain HTML - no build step, no Svelte
6
- required in the host app.
7
-
8
- Powered by [SvGrid](https://www.svgrid.com), the Svelte 5 data grid:
9
- virtualization, Excel-style filters, sorting, inline editing, grouping, and
10
- pagination.
11
-
12
- ## CDN (zero build)
13
-
14
- ```html
15
- <script type="module" src="https://unpkg.com/@svgrid/grid-wc"></script>
16
-
17
- <sv-grid id="grid" sortable filterable style="display:block;height:420px"></sv-grid>
18
-
19
- <script type="module">
20
- const grid = document.getElementById('grid')
21
- // Arrays/objects are set as PROPERTIES, not attributes:
22
- grid.columns = [
23
- { field: 'name', header: 'Name', editorType: 'text', width: 200 },
24
- { field: 'salary', header: 'Salary', align: 'right',
25
- format: { type: 'currency', currency: 'USD' } },
26
- ]
27
- grid.data = [
28
- { name: 'Ada Lovelace', salary: 145000 },
29
- { name: 'Alan Turing', salary: 160000 },
30
- ]
31
- grid.addEventListener('rowclick', (e) => console.log(e.detail))
32
- </script>
33
- ```
34
-
35
- ## npm
36
-
37
- ```bash
38
- npm install @svgrid/grid-wc
39
- ```
40
-
41
- ```js
42
- import '@svgrid/grid-wc' // registers <sv-grid> globally
43
- ```
44
-
45
- ## Attributes & properties
46
-
47
- | Name | Kind | Default | Notes |
48
- | --- | --- | --- | --- |
49
- | `data` | property | `[]` | Array of row objects. Set via `el.data = [...]`. |
50
- | `columns` | property | `[]` | Array of column defs. Set via `el.columns = [...]`. |
51
- | `sortable` | attribute (boolean) | `true` | Enable column sorting. |
52
- | `filterable` | attribute (boolean) | `true` | Enable column filtering. |
53
- | `selectable` | attribute (boolean) | `false` | Row checkboxes + selection. |
54
- | `editable` | attribute (boolean) | `false` | Inline cell editing. |
55
- | `row-height` | attribute (number) | `36` | Row height in px. |
56
-
57
- ### Events
58
-
59
- | Event | `detail` |
60
- | --- | --- |
61
- | `rowclick` | the clicked row object |
62
- | `selectionchange` | array of selected rows |
63
-
64
- ## Frameworks
65
-
66
- - **React 19+**: `<sv-grid sortable .data={rows} .columns={cols} />` (older React: set via a `ref`).
67
- - **Vue 3**: `<sv-grid sortable :data.prop="rows" :columns.prop="cols" />`.
68
- - **Angular**: add `CUSTOM_ELEMENTS_SCHEMA`, then `<sv-grid [data]="rows" [columns]="cols" sortable>`.
69
-
70
- Full guide: [svgrid.com/docs/help/web-components](https://www.svgrid.com/docs/help/web-components).
71
-
72
- ## Styling
73
-
74
- Built with `shadow: 'none'` (light DOM) so your page CSS and the `--sg-*` theme
75
- tokens apply, and the grid's overlay popups stay styled:
76
-
77
- ```css
78
- sv-grid {
79
- --sg-bg: #fff;
80
- --sg-header-bg: #f8fafc;
81
- --sg-border: #e2e8f0;
82
- }
83
- ```
84
-
85
- ## Pro
86
-
87
- This element ships the free MIT `@svgrid/grid` core. For export, import,
88
- print, pivot, and AI, see [@svgrid/enterprise](https://www.svgrid.com/pricing).
89
-
90
- SvGrid(TM) is a trademark of jQWidgets Ltd. This package is MIT-licensed.
1
+ <p align="center">
2
+ <img src="https://svgrid.com/brand/svgrid-logo-icon-1200.png" alt="SvGrid" width="100" height="100" />
3
+ </p>
4
+
5
+ <h1 align="center">@svgrid/grid-wc</h1>
6
+
7
+ <p align="center"><strong>SvGrid as a framework-agnostic web component.</strong></p>
8
+
9
+ <p align="center">
10
+ <a href="https://www.npmjs.com/package/@svgrid/grid-wc"><img src="https://img.shields.io/npm/v/%40svgrid%2Fgrid-wc.svg?label=%40svgrid%2Fgrid-wc" alt="npm version" /></a>
11
+ <a href="https://www.npmjs.com/package/@svgrid/grid-wc"><img src="https://img.shields.io/npm/dm/%40svgrid%2Fgrid-wc.svg" alt="npm downloads" /></a>
12
+ <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="MIT License" /></a>
13
+ </p>
14
+
15
+ <p align="center">
16
+ <a href="https://svgrid.com">Website</a> ·
17
+ <a href="https://svgrid.com/docs/">Docs</a> ·
18
+ <a href="https://svgrid.com/demos/">Demos</a>
19
+ </p>
20
+
21
+ ---
22
+
23
+ A single, self-contained `<sv-grid>`
24
+ [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
25
+ you can drop into **React, Vue, Angular, or plain HTML** - no build step, no Svelte
26
+ required in the host app.
27
+
28
+ Powered by [SvGrid](https://svgrid.com), the Svelte 5 data grid and data table:
29
+ virtual scrolling, Excel-style filters, sorting, inline editing, grouping, and
30
+ pagination.
31
+
32
+ ## CDN (zero build)
33
+
34
+ ```html
35
+ <script type="module" src="https://unpkg.com/@svgrid/grid-wc"></script>
36
+
37
+ <sv-grid id="grid" sortable filterable style="display:block;height:420px"></sv-grid>
38
+
39
+ <script type="module">
40
+ const grid = document.getElementById('grid')
41
+ // Arrays/objects are set as PROPERTIES, not attributes:
42
+ grid.columns = [
43
+ { field: 'name', header: 'Name', editorType: 'text', width: 200 },
44
+ { field: 'salary', header: 'Salary', align: 'right',
45
+ format: { type: 'currency', currency: 'USD' } },
46
+ ]
47
+ grid.data = [
48
+ { name: 'Ada Lovelace', salary: 145000 },
49
+ { name: 'Alan Turing', salary: 160000 },
50
+ ]
51
+ grid.addEventListener('rowclick', (e) => console.log(e.detail))
52
+ </script>
53
+ ```
54
+
55
+ ## npm
56
+
57
+ ```bash
58
+ npm install @svgrid/grid-wc
59
+ ```
60
+
61
+ ```js
62
+ import '@svgrid/grid-wc' // registers <sv-grid> globally
63
+ ```
64
+
65
+ ## Attributes & properties
66
+
67
+ | Name | Kind | Default | Notes |
68
+ | --- | --- | --- | --- |
69
+ | `data` | property | `[]` | Array of row objects. Set via `el.data = [...]`. |
70
+ | `columns` | property | `[]` | Array of column defs. Set via `el.columns = [...]`. |
71
+ | `sortable` | attribute (boolean) | `true` | Enable column sorting. |
72
+ | `filterable` | attribute (boolean) | `true` | Enable column filtering. |
73
+ | `selectable` | attribute (boolean) | `false` | Row checkboxes + selection. |
74
+ | `editable` | attribute (boolean) | `false` | Inline cell editing. |
75
+ | `row-height` | attribute (number) | `36` | Row height in px. |
76
+
77
+ ### Events
78
+
79
+ | Event | `detail` |
80
+ | --- | --- |
81
+ | `rowclick` | the clicked row object |
82
+ | `selectionchange` | array of selected rows |
83
+
84
+ ## Frameworks
85
+
86
+ - **React 19+**: `<sv-grid sortable .data={rows} .columns={cols} />` (older React: set via a `ref`).
87
+ - **Vue 3**: `<sv-grid sortable :data.prop="rows" :columns.prop="cols" />`.
88
+ - **Angular**: add `CUSTOM_ELEMENTS_SCHEMA`, then `<sv-grid [data]="rows" [columns]="cols" sortable>`.
89
+
90
+ Full guide: [svgrid.com/docs/help/web-components](https://svgrid.com/docs/help/web-components/).
91
+
92
+ ## Styling
93
+
94
+ Built with `shadow: 'none'` (light DOM) so your page CSS and the `--sg-*` theme
95
+ tokens apply, and the grid's overlay popups stay styled:
96
+
97
+ ```css
98
+ sv-grid {
99
+ --sg-bg: #fff;
100
+ --sg-header-bg: #f8fafc;
101
+ --sg-border: #e2e8f0;
102
+ }
103
+ ```
104
+
105
+ ## Pro
106
+
107
+ This element ships the free MIT `@svgrid/grid` core. For export, import,
108
+ print, pivot, and AI, see [@svgrid/enterprise](https://svgrid.com/pricing/).
109
+
110
+ SvGrid(TM) is a trademark of jQWidgets Ltd. This package is MIT-licensed.