@svgrid/grid-wc 1.0.0
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/README.md +90 -0
- package/dist/sv-grid-element.js +8610 -0
- package/package.json +57 -0
package/README.md
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
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.
|