@kanunilabs/datagrid 1.1.0 → 1.1.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/README.md +250 -250
- package/dist/datagrid.umd.js +5 -5
- package/dist/index.cjs +2 -2
- package/dist/index.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,250 +1,250 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<a href="https://www.kanunilabs.com"><img src="https://www.kanunilabs.com/logo.png" width="84" alt="KanuniLabs" /></a>
|
|
3
|
-
</p>
|
|
4
|
-
|
|
5
|
-
<h1 align="center">KanuniLabs DataGrid for JavaScript</h1>
|
|
6
|
-
|
|
7
|
-
<p align="center">
|
|
8
|
-
A high-performance data grid with a Web Worker pipeline —<br />
|
|
9
|
-
sort, filter and scroll a million rows without freezing the UI.<br />
|
|
10
|
-
No framework, no JSX, no build step required.
|
|
11
|
-
</p>
|
|
12
|
-
|
|
13
|
-
<p align="center">
|
|
14
|
-
<a href="https://www.kanunilabs.com">Website</a> ·
|
|
15
|
-
<a href="https://www.kanunilabs.com/playground/datagrid/
|
|
16
|
-
<a href="https://www.kanunilabs.com/docs/datagrid/javascript">Documentation</a> ·
|
|
17
|
-
<a href="https://www.kanunilabs.com/pricing">Pricing</a> ·
|
|
18
|
-
<a href="https://www.kanunilabs.com/contact">Support</a>
|
|
19
|
-
</p>
|
|
20
|
-
|
|
21
|
-
<p align="center">
|
|
22
|
-
<a href="https://www.npmjs.com/package/@kanunilabs/datagrid"><img src="https://img.shields.io/npm/v/%40kanunilabs%2Fdatagrid.svg?label=npm" alt="npm version" /></a>
|
|
23
|
-
<img src="https://img.shields.io/badge/TypeScript-included-3178c6.svg" alt="TypeScript types included" />
|
|
24
|
-
<img src="https://img.shields.io/badge/framework-none-f7df1e.svg" alt="No framework required" />
|
|
25
|
-
<img src="https://img.shields.io/badge/license-Community%20(free)-2ea44f.svg" alt="KanuniLabs Community License" />
|
|
26
|
-
</p>
|
|
27
|
-
|
|
28
|
-
<p align="center">
|
|
29
|
-
<a href="https://www.kanunilabs.com/playground/datagrid/
|
|
30
|
-
<img src="https://www.kanunilabs.com/npm/datagrid-javascript.gif" alt="KanuniLabs DataGrid for JavaScript in action — scrolling, sorting, filtering and grouping a million rows built straight into the DOM, with no framework" width="100%" />
|
|
31
|
-
</a>
|
|
32
|
-
</p>
|
|
33
|
-
|
|
34
|
-
<p align="center">
|
|
35
|
-
<a href="https://www.kanunilabs.com/playground/datagrid/
|
|
36
|
-
</p>
|
|
37
|
-
|
|
38
|
-
## Why KanuniLabs DataGrid?
|
|
39
|
-
|
|
40
|
-
- **Nothing between you and the DOM** — one call against an element builds the grid. No component tree, no reconciler, no framework version to keep up with. It runs the same in a Vite app, a Rails or Django template, an Electron window, or a plain `<script>` tag on a page.
|
|
41
|
-
- **The same engine the React package uses** — `@kanunilabs/datagrid-core` is a real dependency, not a copy. The renderer differs; the pipeline, the events and the controller API do not.
|
|
42
|
-
- **Worker-backed pipeline** — above ~20,000 rows, filtering and sorting move off the main thread automatically. Columns are encoded once into typed arrays and transferred (zero-copy); a later sort or filter reuses them instead of re-encoding.
|
|
43
|
-
- **Measured, not claimed** — the engine at **1,000,000 rows × 15 columns**, worker path, median of 5 runs: numeric sort **90 ms**, text sort **108 ms**, date sort **123 ms**, two-column sort **192 ms**, equality filter **19 ms**, free-text search **58 ms**. Reproduce them yourself: `node packages/datagrid-core/bench/pipeline.bench.mjs 1000000`.
|
|
44
|
-
- **Typed anyway** — the package ships `.d.ts` files, so an editor autocompletes the config even in a plain `.js` file.
|
|
45
|
-
|
|
46
|
-
## Quick start
|
|
47
|
-
|
|
48
|
-
```bash
|
|
49
|
-
npm install @kanunilabs/datagrid
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
`@kanunilabs/datagrid-core` (the engine) is installed automatically.
|
|
53
|
-
|
|
54
|
-
```js
|
|
55
|
-
import { createGrid } from '@kanunilabs/datagrid';
|
|
56
|
-
import '@kanunilabs/datagrid/styles.css';
|
|
57
|
-
|
|
58
|
-
const columns = [
|
|
59
|
-
{ field: 'id', headerName: 'ID', dataType: 'number', width: 80, pin: 'left' },
|
|
60
|
-
{ field: 'product', headerName: 'Product', width: 220 },
|
|
61
|
-
{ field: 'region', headerName: 'Region', width: 140 },
|
|
62
|
-
{
|
|
63
|
-
field: 'revenue',
|
|
64
|
-
headerName: 'Revenue',
|
|
65
|
-
dataType: 'number',
|
|
66
|
-
width: 140,
|
|
67
|
-
valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
|
|
68
|
-
},
|
|
69
|
-
];
|
|
70
|
-
|
|
71
|
-
const grid = createGrid(document.getElementById('grid'), {
|
|
72
|
-
gridId: 'sales',
|
|
73
|
-
dataSource: rows,
|
|
74
|
-
rowKey: 'id',
|
|
75
|
-
columns,
|
|
76
|
-
selection: { mode: 'multiple', checkboxColumn: true },
|
|
77
|
-
sorting: { multi: true },
|
|
78
|
-
filterRow: true,
|
|
79
|
-
headerFilter: true,
|
|
80
|
-
toolbar: true,
|
|
81
|
-
});
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
The host element owns the size — give it a height in your own CSS. `rowKey` is required: selection, focus and live updates are keyed by row identity, which is what lets them survive sorting and filtering.
|
|
85
|
-
|
|
86
|
-
Three methods carry the lifecycle:
|
|
87
|
-
|
|
88
|
-
```js
|
|
89
|
-
grid.setData(nextRows); // swap the data, keep scroll, selection and sort
|
|
90
|
-
grid.controller; // the full engine API — 57 typed events, imperative intents
|
|
91
|
-
grid.destroy(); // removes every listener, timer, popup and worker
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
### Without a bundler
|
|
95
|
-
|
|
96
|
-
A UMD build ships in the package, so a `<script>` tag is a complete install:
|
|
97
|
-
|
|
98
|
-
```html
|
|
99
|
-
<link rel="stylesheet" href="https://unpkg.com/@kanunilabs/datagrid/dist/styles.css" />
|
|
100
|
-
<script src="https://unpkg.com/@kanunilabs/datagrid/dist/datagrid.umd.js"></script>
|
|
101
|
-
|
|
102
|
-
<div id="grid" style="height: 600px"></div>
|
|
103
|
-
<script>
|
|
104
|
-
const grid = KanuniLabsDataGrid.createGrid(document.getElementById('grid'), {
|
|
105
|
-
gridId: 'sales',
|
|
106
|
-
dataSource: rows,
|
|
107
|
-
rowKey: 'id',
|
|
108
|
-
columns,
|
|
109
|
-
});
|
|
110
|
-
</script>
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
The engine is bundled into that file — one request, no import map, nothing to configure.
|
|
114
|
-
|
|
115
|
-
## The Web Worker: nothing to configure
|
|
116
|
-
|
|
117
|
-
Filtering and sorting run off the main thread above 20,000 rows. The worker is compiled into the package and started from a Blob URL, so there is no file to copy, no bundler recipe, and nothing to import — Vite, webpack, Next.js and Parcel all just work, and so does no bundler at all.
|
|
118
|
-
|
|
119
|
-
Set `worker: { enabled: false }` to stay on the main thread entirely, or `worker: { threshold: 50_000 }` to change when the offload kicks in.
|
|
120
|
-
|
|
121
|
-
**Strict Content-Security-Policy.** A Blob worker needs `worker-src 'self' blob:`. If your CSP forbids it, either allow it or serve the worker as a file instead — `datagrid.worker.js` ships in `@kanunilabs/datagrid-core` either way:
|
|
122
|
-
|
|
123
|
-
```js
|
|
124
|
-
createGrid(host, { worker: { url: '/vendor/datagrid.worker.js' }, /* ... */ });
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
## Excel export (optional)
|
|
128
|
-
|
|
129
|
-
CSV export needs nothing extra. For `.xlsx`, install the optional peer:
|
|
130
|
-
|
|
131
|
-
```bash
|
|
132
|
-
npm i exceljs
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
Without it, CSV export still works and the Excel path reports an actionable error instead of failing at import time.
|
|
136
|
-
|
|
137
|
-
## Theming
|
|
138
|
-
|
|
139
|
-
Six themes × six palettes, light and dark, driven by config or by CSS custom properties on the host:
|
|
140
|
-
|
|
141
|
-
```js
|
|
142
|
-
createGrid(host, { theme: 'material', palette: 'indigo', density: 'compact', dark: true, /* ... */ });
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
Full token list and the caveats (portalled popups, row height and the virtualizer) are in the [theming guide](https://www.kanunilabs.com/docs/datagrid/theming).
|
|
146
|
-
|
|
147
|
-
## Coming from the React package?
|
|
148
|
-
|
|
149
|
-
The config mirrors the React props by name, so most of a `<DataGrid>` reads across unchanged. The handful of names that differ are the DOM-flavoured ones, and the grid **tells you** rather than ignoring them — pass a React-only spelling and it warns in the console with the correct one:
|
|
150
|
-
|
|
151
|
-
| React prop | JavaScript config |
|
|
152
|
-
|---|---|
|
|
153
|
-
| `columnResize` | `resizable` |
|
|
154
|
-
| `columnReorder` | `reorderable` |
|
|
155
|
-
| `groupPanel` | `grouping: { panel: true }` |
|
|
156
|
-
| `onReady` | the controller is returned — `grid.controller` |
|
|
157
|
-
| `className` / `style` | style the host element you pass in |
|
|
158
|
-
|
|
159
|
-
Anything React-valued — `renderCell` returning JSX, a React element as an icon — has no equivalent here by nature; give it a string, or reach for the React package.
|
|
160
|
-
|
|
161
|
-
## Enterprise edition
|
|
162
|
-
|
|
163
|
-
Community is a complete grid: a million rows, sorting, filtering, selection,
|
|
164
|
-
pagination, grouping, themes, twelve languages and CSV export. Nothing here is
|
|
165
|
-
a trial and nothing expires.
|
|
166
|
-
|
|
167
|
-
`@kanunilabs/datagrid-enterprise` starts where you **change** the data and where
|
|
168
|
-
you **take it out** — editing, range selection and the fill handle, server-side
|
|
169
|
-
data, Excel and PDF export, charts. `createEnterpriseGrid` is a drop-in
|
|
170
|
-
replacement for `createGrid`: same config, plus those.
|
|
171
|
-
|
|
172
|
-
```bash
|
|
173
|
-
# Ships from our private registry; a license includes the credentials.
|
|
174
|
-
npm i @kanunilabs/datagrid-enterprise
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
```js
|
|
178
|
-
import { createEnterpriseGrid } from '@kanunilabs/datagrid-enterprise';
|
|
179
|
-
|
|
180
|
-
const grid = createEnterpriseGrid(host, {
|
|
181
|
-
licenseKey: 'KLAB1....',
|
|
182
|
-
dataSource: rows,
|
|
183
|
-
rowKey: 'id',
|
|
184
|
-
columns,
|
|
185
|
-
editing: { mode: 'cell' },
|
|
186
|
-
});
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
Without a key the grid still runs — watermarked, not crippled — so an
|
|
190
|
-
evaluation or a stale staging key never takes an application down.
|
|
191
|
-
|
|
192
|
-
**One license opens both products**, DataGrid and
|
|
193
|
-
[PivotGrid](https://www.npmjs.com/package/@kanunilabs/pivotgrid-react).
|
|
194
|
-
|
|
195
|
-
- [Enterprise & licensing](https://www.kanunilabs.com/docs/datagrid/enterprise)
|
|
196
|
-
- [Private registry access](https://www.kanunilabs.com/docs/datagrid/registry)
|
|
197
|
-
- [Pricing](https://www.kanunilabs.com/pricing)
|
|
198
|
-
|
|
199
|
-
## Feature overview
|
|
200
|
-
|
|
201
|
-
| | Community (this package) | Enterprise |
|
|
202
|
-
|---|:---:|:---:|
|
|
203
|
-
| Virtualized rows + columns · 1M rows | ✅ | ✅ |
|
|
204
|
-
| Worker offload + columnar encoding | ✅ | ✅ |
|
|
205
|
-
| Sorting · resize · reorder · pinning · bands | ✅ | ✅ |
|
|
206
|
-
| Filter row · header filter popup · search | ✅ | ✅ |
|
|
207
|
-
| Row/cell selection · checkbox · focused row | ✅ | ✅ |
|
|
208
|
-
| Keyboard navigation + WAI-ARIA grid | ✅ | ✅ |
|
|
209
|
-
| Grouping (one level) + group panel | ✅ | ✅ |
|
|
210
|
-
| Pagination · infinite scroll · toolbar · column chooser | ✅ | ✅ |
|
|
211
|
-
| 6 themes × 6 palettes · dark mode · 12 locales | ✅ | ✅ |
|
|
212
|
-
| 57 events + imperative controller API | ✅ | ✅ |
|
|
213
|
-
| Saved views · tooltips · row numbers · print | ✅ | ✅ |
|
|
214
|
-
| **Footer column totals** · custom reducers · totals row placement | ✅ | ✅ |
|
|
215
|
-
| **CSV** export & import | ✅ | ✅ |
|
|
216
|
-
| **UMD build** — works from a `<script>` tag | ✅ | ✅ |
|
|
217
|
-
| **Editing** — cell, row, form + validation & undo | — | ✅ |
|
|
218
|
-
| Range selection · fill handle · cut & paste | — | ✅ |
|
|
219
|
-
| Multi-level grouping · per-group totals | — | ✅ |
|
|
220
|
-
| Master-detail · tree data · cell spans · notes | — | ✅ |
|
|
221
|
-
| **Server-side data** (filter/sort/page/totals remote) | — | ✅ |
|
|
222
|
-
| **Excel** & **PDF** export (styled, paginated) | — | ✅ |
|
|
223
|
-
| Chart panel · sparklines · cross-filter | — | ✅ |
|
|
224
|
-
| Nested filter builder · import wizard | — | ✅ |
|
|
225
|
-
| Side bar · status bar | — | ✅ |
|
|
226
|
-
|
|
227
|
-
Full breakdown, with a link to the guide for each line:
|
|
228
|
-
[Enterprise & licensing](https://www.kanunilabs.com/docs/datagrid/enterprise).
|
|
229
|
-
|
|
230
|
-
## Documentation
|
|
231
|
-
|
|
232
|
-
- [JavaScript guide](https://www.kanunilabs.com/docs/datagrid/javascript)
|
|
233
|
-
- [Getting started](https://www.kanunilabs.com/docs/datagrid)
|
|
234
|
-
- [Installation](https://www.kanunilabs.com/docs/datagrid/installation)
|
|
235
|
-
- [Features](https://www.kanunilabs.com/docs/datagrid/features)
|
|
236
|
-
- [Theming](https://www.kanunilabs.com/docs/datagrid/theming)
|
|
237
|
-
- [Performance](https://www.kanunilabs.com/docs/datagrid/performance)
|
|
238
|
-
- [Live playground](https://www.kanunilabs.com/playground/datagrid/
|
|
239
|
-
|
|
240
|
-
## Missing a feature? Tell us
|
|
241
|
-
|
|
242
|
-
This grid is actively developed and shaped by the people using it. If something is missing, awkward, or broken, we want to hear about it — feature requests and bug reports go to the same place and get read by the people who write the code:
|
|
243
|
-
|
|
244
|
-
**[Send us your feedback →](https://www.kanunilabs.com/contact)**
|
|
245
|
-
|
|
246
|
-
## License
|
|
247
|
-
|
|
248
|
-
Free to use under the KanuniLabs Community License (proprietary, source not distributed). See the `LICENSE` file in the package.
|
|
249
|
-
|
|
250
|
-
© KanuniLabs · [kanunilabs.com](https://www.kanunilabs.com)
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://www.kanunilabs.com"><img src="https://www.kanunilabs.com/logo.png" width="84" alt="KanuniLabs" /></a>
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">KanuniLabs DataGrid for JavaScript</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
A high-performance data grid with a Web Worker pipeline —<br />
|
|
9
|
+
sort, filter and scroll a million rows without freezing the UI.<br />
|
|
10
|
+
No framework, no JSX, no build step required.
|
|
11
|
+
</p>
|
|
12
|
+
|
|
13
|
+
<p align="center">
|
|
14
|
+
<a href="https://www.kanunilabs.com">Website</a> ·
|
|
15
|
+
<a href="https://www.kanunilabs.com/playground/datagrid/virtual-scrolling?renderer=js">Live Demo</a> ·
|
|
16
|
+
<a href="https://www.kanunilabs.com/docs/datagrid/javascript">Documentation</a> ·
|
|
17
|
+
<a href="https://www.kanunilabs.com/pricing">Pricing</a> ·
|
|
18
|
+
<a href="https://www.kanunilabs.com/contact">Support</a>
|
|
19
|
+
</p>
|
|
20
|
+
|
|
21
|
+
<p align="center">
|
|
22
|
+
<a href="https://www.npmjs.com/package/@kanunilabs/datagrid"><img src="https://img.shields.io/npm/v/%40kanunilabs%2Fdatagrid.svg?label=npm" alt="npm version" /></a>
|
|
23
|
+
<img src="https://img.shields.io/badge/TypeScript-included-3178c6.svg" alt="TypeScript types included" />
|
|
24
|
+
<img src="https://img.shields.io/badge/framework-none-f7df1e.svg" alt="No framework required" />
|
|
25
|
+
<img src="https://img.shields.io/badge/license-Community%20(free)-2ea44f.svg" alt="KanuniLabs Community License" />
|
|
26
|
+
</p>
|
|
27
|
+
|
|
28
|
+
<p align="center">
|
|
29
|
+
<a href="https://www.kanunilabs.com/playground/datagrid/virtual-scrolling?renderer=js">
|
|
30
|
+
<img src="https://www.kanunilabs.com/npm/datagrid-javascript.gif" alt="KanuniLabs DataGrid for JavaScript in action — scrolling, sorting, filtering and grouping a million rows built straight into the DOM, with no framework" width="100%" />
|
|
31
|
+
</a>
|
|
32
|
+
</p>
|
|
33
|
+
|
|
34
|
+
<p align="center">
|
|
35
|
+
<a href="https://www.kanunilabs.com/playground/datagrid/virtual-scrolling?renderer=js">Try it live</a> — a million rows in your browser. No signup, no install.
|
|
36
|
+
</p>
|
|
37
|
+
|
|
38
|
+
## Why KanuniLabs DataGrid?
|
|
39
|
+
|
|
40
|
+
- **Nothing between you and the DOM** — one call against an element builds the grid. No component tree, no reconciler, no framework version to keep up with. It runs the same in a Vite app, a Rails or Django template, an Electron window, or a plain `<script>` tag on a page.
|
|
41
|
+
- **The same engine the React package uses** — `@kanunilabs/datagrid-core` is a real dependency, not a copy. The renderer differs; the pipeline, the events and the controller API do not.
|
|
42
|
+
- **Worker-backed pipeline** — above ~20,000 rows, filtering and sorting move off the main thread automatically. Columns are encoded once into typed arrays and transferred (zero-copy); a later sort or filter reuses them instead of re-encoding.
|
|
43
|
+
- **Measured, not claimed** — the engine at **1,000,000 rows × 15 columns**, worker path, median of 5 runs: numeric sort **90 ms**, text sort **108 ms**, date sort **123 ms**, two-column sort **192 ms**, equality filter **19 ms**, free-text search **58 ms**. Reproduce them yourself: `node packages/datagrid-core/bench/pipeline.bench.mjs 1000000`.
|
|
44
|
+
- **Typed anyway** — the package ships `.d.ts` files, so an editor autocompletes the config even in a plain `.js` file.
|
|
45
|
+
|
|
46
|
+
## Quick start
|
|
47
|
+
|
|
48
|
+
```bash
|
|
49
|
+
npm install @kanunilabs/datagrid
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
`@kanunilabs/datagrid-core` (the engine) is installed automatically.
|
|
53
|
+
|
|
54
|
+
```js
|
|
55
|
+
import { createGrid } from '@kanunilabs/datagrid';
|
|
56
|
+
import '@kanunilabs/datagrid/styles.css';
|
|
57
|
+
|
|
58
|
+
const columns = [
|
|
59
|
+
{ field: 'id', headerName: 'ID', dataType: 'number', width: 80, pin: 'left' },
|
|
60
|
+
{ field: 'product', headerName: 'Product', width: 220 },
|
|
61
|
+
{ field: 'region', headerName: 'Region', width: 140 },
|
|
62
|
+
{
|
|
63
|
+
field: 'revenue',
|
|
64
|
+
headerName: 'Revenue',
|
|
65
|
+
dataType: 'number',
|
|
66
|
+
width: 140,
|
|
67
|
+
valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
|
|
68
|
+
},
|
|
69
|
+
];
|
|
70
|
+
|
|
71
|
+
const grid = createGrid(document.getElementById('grid'), {
|
|
72
|
+
gridId: 'sales',
|
|
73
|
+
dataSource: rows,
|
|
74
|
+
rowKey: 'id',
|
|
75
|
+
columns,
|
|
76
|
+
selection: { mode: 'multiple', checkboxColumn: true },
|
|
77
|
+
sorting: { multi: true },
|
|
78
|
+
filterRow: true,
|
|
79
|
+
headerFilter: true,
|
|
80
|
+
toolbar: true,
|
|
81
|
+
});
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
The host element owns the size — give it a height in your own CSS. `rowKey` is required: selection, focus and live updates are keyed by row identity, which is what lets them survive sorting and filtering.
|
|
85
|
+
|
|
86
|
+
Three methods carry the lifecycle:
|
|
87
|
+
|
|
88
|
+
```js
|
|
89
|
+
grid.setData(nextRows); // swap the data, keep scroll, selection and sort
|
|
90
|
+
grid.controller; // the full engine API — 57 typed events, imperative intents
|
|
91
|
+
grid.destroy(); // removes every listener, timer, popup and worker
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Without a bundler
|
|
95
|
+
|
|
96
|
+
A UMD build ships in the package, so a `<script>` tag is a complete install:
|
|
97
|
+
|
|
98
|
+
```html
|
|
99
|
+
<link rel="stylesheet" href="https://unpkg.com/@kanunilabs/datagrid/dist/styles.css" />
|
|
100
|
+
<script src="https://unpkg.com/@kanunilabs/datagrid/dist/datagrid.umd.js"></script>
|
|
101
|
+
|
|
102
|
+
<div id="grid" style="height: 600px"></div>
|
|
103
|
+
<script>
|
|
104
|
+
const grid = KanuniLabsDataGrid.createGrid(document.getElementById('grid'), {
|
|
105
|
+
gridId: 'sales',
|
|
106
|
+
dataSource: rows,
|
|
107
|
+
rowKey: 'id',
|
|
108
|
+
columns,
|
|
109
|
+
});
|
|
110
|
+
</script>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
The engine is bundled into that file — one request, no import map, nothing to configure.
|
|
114
|
+
|
|
115
|
+
## The Web Worker: nothing to configure
|
|
116
|
+
|
|
117
|
+
Filtering and sorting run off the main thread above 20,000 rows. The worker is compiled into the package and started from a Blob URL, so there is no file to copy, no bundler recipe, and nothing to import — Vite, webpack, Next.js and Parcel all just work, and so does no bundler at all.
|
|
118
|
+
|
|
119
|
+
Set `worker: { enabled: false }` to stay on the main thread entirely, or `worker: { threshold: 50_000 }` to change when the offload kicks in.
|
|
120
|
+
|
|
121
|
+
**Strict Content-Security-Policy.** A Blob worker needs `worker-src 'self' blob:`. If your CSP forbids it, either allow it or serve the worker as a file instead — `datagrid.worker.js` ships in `@kanunilabs/datagrid-core` either way:
|
|
122
|
+
|
|
123
|
+
```js
|
|
124
|
+
createGrid(host, { worker: { url: '/vendor/datagrid.worker.js' }, /* ... */ });
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## Excel export (optional)
|
|
128
|
+
|
|
129
|
+
CSV export needs nothing extra. For `.xlsx`, install the optional peer:
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
npm i exceljs
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
Without it, CSV export still works and the Excel path reports an actionable error instead of failing at import time.
|
|
136
|
+
|
|
137
|
+
## Theming
|
|
138
|
+
|
|
139
|
+
Six themes × six palettes, light and dark, driven by config or by CSS custom properties on the host:
|
|
140
|
+
|
|
141
|
+
```js
|
|
142
|
+
createGrid(host, { theme: 'material', palette: 'indigo', density: 'compact', dark: true, /* ... */ });
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Full token list and the caveats (portalled popups, row height and the virtualizer) are in the [theming guide](https://www.kanunilabs.com/docs/datagrid/theming).
|
|
146
|
+
|
|
147
|
+
## Coming from the React package?
|
|
148
|
+
|
|
149
|
+
The config mirrors the React props by name, so most of a `<DataGrid>` reads across unchanged. The handful of names that differ are the DOM-flavoured ones, and the grid **tells you** rather than ignoring them — pass a React-only spelling and it warns in the console with the correct one:
|
|
150
|
+
|
|
151
|
+
| React prop | JavaScript config |
|
|
152
|
+
|---|---|
|
|
153
|
+
| `columnResize` | `resizable` |
|
|
154
|
+
| `columnReorder` | `reorderable` |
|
|
155
|
+
| `groupPanel` | `grouping: { panel: true }` |
|
|
156
|
+
| `onReady` | the controller is returned — `grid.controller` |
|
|
157
|
+
| `className` / `style` | style the host element you pass in |
|
|
158
|
+
|
|
159
|
+
Anything React-valued — `renderCell` returning JSX, a React element as an icon — has no equivalent here by nature; give it a string, or reach for the React package.
|
|
160
|
+
|
|
161
|
+
## Enterprise edition
|
|
162
|
+
|
|
163
|
+
Community is a complete grid: a million rows, sorting, filtering, selection,
|
|
164
|
+
pagination, grouping, themes, twelve languages and CSV export. Nothing here is
|
|
165
|
+
a trial and nothing expires.
|
|
166
|
+
|
|
167
|
+
`@kanunilabs/datagrid-enterprise` starts where you **change** the data and where
|
|
168
|
+
you **take it out** — editing, range selection and the fill handle, server-side
|
|
169
|
+
data, Excel and PDF export, charts. `createEnterpriseGrid` is a drop-in
|
|
170
|
+
replacement for `createGrid`: same config, plus those.
|
|
171
|
+
|
|
172
|
+
```bash
|
|
173
|
+
# Ships from our private registry; a license includes the credentials.
|
|
174
|
+
npm i @kanunilabs/datagrid-enterprise
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
```js
|
|
178
|
+
import { createEnterpriseGrid } from '@kanunilabs/datagrid-enterprise';
|
|
179
|
+
|
|
180
|
+
const grid = createEnterpriseGrid(host, {
|
|
181
|
+
licenseKey: 'KLAB1....',
|
|
182
|
+
dataSource: rows,
|
|
183
|
+
rowKey: 'id',
|
|
184
|
+
columns,
|
|
185
|
+
editing: { mode: 'cell' },
|
|
186
|
+
});
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
Without a key the grid still runs — watermarked, not crippled — so an
|
|
190
|
+
evaluation or a stale staging key never takes an application down.
|
|
191
|
+
|
|
192
|
+
**One license opens both products**, DataGrid and
|
|
193
|
+
[PivotGrid](https://www.npmjs.com/package/@kanunilabs/pivotgrid-react).
|
|
194
|
+
|
|
195
|
+
- [Enterprise & licensing](https://www.kanunilabs.com/docs/datagrid/enterprise)
|
|
196
|
+
- [Private registry access](https://www.kanunilabs.com/docs/datagrid/registry)
|
|
197
|
+
- [Pricing](https://www.kanunilabs.com/pricing)
|
|
198
|
+
|
|
199
|
+
## Feature overview
|
|
200
|
+
|
|
201
|
+
| | Community (this package) | Enterprise |
|
|
202
|
+
|---|:---:|:---:|
|
|
203
|
+
| Virtualized rows + columns · 1M rows | ✅ | ✅ |
|
|
204
|
+
| Worker offload + columnar encoding | ✅ | ✅ |
|
|
205
|
+
| Sorting · resize · reorder · pinning · bands | ✅ | ✅ |
|
|
206
|
+
| Filter row · header filter popup · search | ✅ | ✅ |
|
|
207
|
+
| Row/cell selection · checkbox · focused row | ✅ | ✅ |
|
|
208
|
+
| Keyboard navigation + WAI-ARIA grid | ✅ | ✅ |
|
|
209
|
+
| Grouping (one level) + group panel | ✅ | ✅ |
|
|
210
|
+
| Pagination · infinite scroll · toolbar · column chooser | ✅ | ✅ |
|
|
211
|
+
| 6 themes × 6 palettes · dark mode · 12 locales | ✅ | ✅ |
|
|
212
|
+
| 57 events + imperative controller API | ✅ | ✅ |
|
|
213
|
+
| Saved views · tooltips · row numbers · print | ✅ | ✅ |
|
|
214
|
+
| **Footer column totals** · custom reducers · totals row placement | ✅ | ✅ |
|
|
215
|
+
| **CSV** export & import | ✅ | ✅ |
|
|
216
|
+
| **UMD build** — works from a `<script>` tag | ✅ | ✅ |
|
|
217
|
+
| **Editing** — cell, row, form + validation & undo | — | ✅ |
|
|
218
|
+
| Range selection · fill handle · cut & paste | — | ✅ |
|
|
219
|
+
| Multi-level grouping · per-group totals | — | ✅ |
|
|
220
|
+
| Master-detail · tree data · cell spans · notes | — | ✅ |
|
|
221
|
+
| **Server-side data** (filter/sort/page/totals remote) | — | ✅ |
|
|
222
|
+
| **Excel** & **PDF** export (styled, paginated) | — | ✅ |
|
|
223
|
+
| Chart panel · sparklines · cross-filter | — | ✅ |
|
|
224
|
+
| Nested filter builder · import wizard | — | ✅ |
|
|
225
|
+
| Side bar · status bar | — | ✅ |
|
|
226
|
+
|
|
227
|
+
Full breakdown, with a link to the guide for each line:
|
|
228
|
+
[Enterprise & licensing](https://www.kanunilabs.com/docs/datagrid/enterprise).
|
|
229
|
+
|
|
230
|
+
## Documentation
|
|
231
|
+
|
|
232
|
+
- [JavaScript guide](https://www.kanunilabs.com/docs/datagrid/javascript)
|
|
233
|
+
- [Getting started](https://www.kanunilabs.com/docs/datagrid)
|
|
234
|
+
- [Installation](https://www.kanunilabs.com/docs/datagrid/installation)
|
|
235
|
+
- [Features](https://www.kanunilabs.com/docs/datagrid/features)
|
|
236
|
+
- [Theming](https://www.kanunilabs.com/docs/datagrid/theming)
|
|
237
|
+
- [Performance](https://www.kanunilabs.com/docs/datagrid/performance)
|
|
238
|
+
- [Live playground](https://www.kanunilabs.com/playground/datagrid/virtual-scrolling?renderer=js)
|
|
239
|
+
|
|
240
|
+
## Missing a feature? Tell us
|
|
241
|
+
|
|
242
|
+
This grid is actively developed and shaped by the people using it. If something is missing, awkward, or broken, we want to hear about it — feature requests and bug reports go to the same place and get read by the people who write the code:
|
|
243
|
+
|
|
244
|
+
**[Send us your feedback →](https://www.kanunilabs.com/contact)**
|
|
245
|
+
|
|
246
|
+
## License
|
|
247
|
+
|
|
248
|
+
Free to use under the KanuniLabs Community License (proprietary, source not distributed). See the `LICENSE` file in the package.
|
|
249
|
+
|
|
250
|
+
© KanuniLabs · [kanunilabs.com](https://www.kanunilabs.com)
|