@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 +0 -25
- package/README.md +110 -90
- package/dist/GridMenus-CdOznO0T.js +417 -0
- package/dist/SvDateTimePicker-Duf-XIOa.js +2011 -0
- package/dist/SvGridChart-EY7OOxv6.js +1192 -0
- package/dist/SvGridChartPanel-Co6RTvAr.js +576 -0
- package/dist/SvGridChartView-BOOZMn2C.js +50 -0
- package/dist/SvGridDropdown-N9LVZsIs.js +251 -0
- package/dist/chart-CSZhFIR9.js +1212 -0
- package/dist/client-DOa609yZ.js +3036 -0
- package/dist/conditional-formatting-Dz-bxLJ2.js +265 -0
- package/dist/dismissable-DvhBKm3q.js +41 -0
- package/dist/editor-contract-peBDxir_.js +22 -0
- package/dist/export-format-DsOZUiL3.js +160 -0
- package/dist/fill-patterns-BWj5Zuhp.js +650 -0
- package/dist/popover-WsGlvtQv.js +69 -0
- package/dist/rolldown-runtime-Dy4uBu1J.js +11 -0
- package/dist/sv-grid-element.js +7392 -16192
- package/package.json +8 -4
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
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.
|