@svgrid/grid 3.0.0 → 3.0.2
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/CHANGELOG.md +116 -88
- package/README.md +199 -199
- package/dist/FlexRender.svelte +96 -96
- package/dist/GridFooter.svelte +190 -181
- package/dist/GridFooter.svelte.d.ts +8 -0
- package/dist/GridMenus.svelte +18 -10
- package/dist/GridMenus.svelte.d.ts +2 -1
- package/dist/SvAutoComplete.svelte +169 -169
- package/dist/SvAvatar.svelte +75 -75
- package/dist/SvCalendar.svelte +503 -503
- package/dist/SvCarousel.svelte +141 -141
- package/dist/SvCheckBox.svelte +102 -102
- package/dist/SvCircularProgress.svelte +109 -109
- package/dist/SvColorInput.svelte +181 -181
- package/dist/SvComboBox.svelte +279 -279
- package/dist/SvContextMenu.svelte +116 -116
- package/dist/SvCountryInput.svelte +163 -163
- package/dist/SvDrawer.svelte +254 -254
- package/dist/SvDropDownList.svelte +378 -378
- package/dist/SvDurationInput.svelte +126 -126
- package/dist/SvField.svelte +293 -293
- package/dist/SvForm.svelte +437 -437
- package/dist/SvGrid.controller.svelte.d.ts +17 -0
- package/dist/SvGrid.controller.svelte.js +128 -14
- package/dist/SvGrid.css +79 -10
- package/dist/SvGrid.svelte +191 -186
- package/dist/SvGrid.types.d.ts +42 -1
- package/dist/SvGridCellEditor.svelte +748 -744
- package/dist/SvGridChart.svelte +2246 -1716
- package/dist/SvGridChart.svelte.d.ts +63 -1
- package/dist/SvGridChartPanel.svelte +633 -485
- package/dist/SvGridChartView.svelte +79 -70
- package/dist/SvGridChartView.svelte.d.ts +7 -0
- package/dist/SvGridDropdown.svelte +728 -728
- package/dist/SvGridSelect.svelte +270 -270
- package/dist/SvGroupCell.svelte +141 -116
- package/dist/SvGroupCell.svelte.d.ts +8 -0
- package/dist/SvListBox.svelte +334 -334
- package/dist/SvMaskedInput.svelte +122 -122
- package/dist/SvMenu.svelte +124 -124
- package/dist/SvMenuList.svelte +146 -146
- package/dist/SvMultiSelect.svelte +293 -293
- package/dist/SvNumberInput.svelte +172 -172
- package/dist/SvOtpInput.svelte +158 -158
- package/dist/SvPasswordInput.svelte +151 -151
- package/dist/SvPhoneInput.svelte +133 -133
- package/dist/SvPopover.svelte +197 -197
- package/dist/SvProgress.svelte +116 -116
- package/dist/SvRadioGroup.svelte +107 -107
- package/dist/SvRating.svelte +112 -112
- package/dist/SvResult.svelte +73 -73
- package/dist/SvRichText.svelte +211 -211
- package/dist/SvRowGroupPanel.svelte +186 -170
- package/dist/SvRowGroupPanel.svelte.d.ts +8 -0
- package/dist/SvScrollArea.svelte +61 -61
- package/dist/SvSlider.svelte +203 -203
- package/dist/SvSwitchButton.svelte +108 -108
- package/dist/SvTagsInput.svelte +115 -115
- package/dist/SvTextInput.svelte +147 -147
- package/dist/SvTimePicker.svelte +245 -245
- package/dist/SvToaster.svelte +159 -159
- package/dist/SvToggleButton.svelte +85 -85
- package/dist/SvTooltip.svelte +161 -161
- package/dist/SvTour.svelte +208 -208
- package/dist/SvTree.svelte +444 -444
- package/dist/SvTreeSelect.svelte +239 -239
- package/dist/ai.d.ts +11 -2
- package/dist/ai.js +51 -7
- package/dist/cdn/GridMenus-DyFA-QxA.js +602 -0
- package/dist/cdn/GridMenus-M2XP9t0_.js +603 -0
- package/dist/cdn/{SvDateRangeInput-DflbiP7N.js → SvDateRangeInput-CaOuMs8O.js} +1 -1
- package/dist/cdn/{SvDateRangeInput-Bh0A0JkF.js → SvDateRangeInput-DMLKmGEc.js} +1 -1
- package/dist/cdn/{SvDateTimePicker-Bivn8dAP.js → SvDateTimePicker-CCbDZNZB.js} +1 -1
- package/dist/cdn/{SvDateTimePicker-BWwpfB_o.js → SvDateTimePicker-sonaH0oh.js} +1 -1
- package/dist/cdn/{SvGridCellEditor-Ba7rY3eu.js → SvGridCellEditor-BWnTi2N7.js} +2 -2
- package/dist/cdn/{SvGridCellEditor-AXL8cHGO.js → SvGridCellEditor-CjEJMJKc.js} +2 -2
- package/dist/cdn/SvGridChart-DAb9RbRs.js +1480 -0
- package/dist/cdn/SvGridChart-Yl-IXZFO.js +1481 -0
- package/dist/cdn/SvGridChartPanel-DayQpDsR.js +834 -0
- package/dist/cdn/SvGridChartPanel-aqf8n-vJ.js +810 -0
- package/dist/cdn/{SvGridChartView-eSPuJE6g.js → SvGridChartView-CxfakxR0.js} +5 -3
- package/dist/cdn/{SvGridChartView-SmPW10dI.js → SvGridChartView-Dm_YEx9L.js} +5 -3
- package/dist/cdn/{SvGridDropdown-B1ZcLpgs.js → SvGridDropdown-D0VdjeR8.js} +1 -1
- package/dist/cdn/{SvGridDropdown-CtdbHcIS.js → SvGridDropdown-D13MtJ2j.js} +1 -1
- package/dist/cdn/cell-formatting-C2Hf5gqd.js +86 -0
- package/dist/cdn/chart-CKJRCPOk.js +1652 -0
- package/dist/cdn/{date-format-DZT7T1wf.js → date-format-BNii4zeD.js} +2 -2
- package/dist/cdn/{date-format-CcP1tafP.js → date-format-BnnHlqGw.js} +2 -2
- package/dist/cdn/{export-format-Cv1Dll6k.js → export-format-CUDLy2yn.js} +84 -168
- package/dist/cdn/{src-B_YS5AOc.js → src-BJ2opd0j.js} +3642 -3450
- package/dist/cdn/{src-DYXXpuSk.js → src-DNbz94Ct.js} +8649 -8457
- package/dist/cdn/svgrid.js +16 -15
- package/dist/cdn/svgrid.svelte-external.js +16 -15
- package/dist/cell-formatting.d.ts +7 -0
- package/dist/cell-formatting.js +7 -1
- package/dist/chart-export.d.ts +23 -2
- package/dist/chart-export.js +88 -14
- package/dist/chart.d.ts +410 -18
- package/dist/chart.js +824 -24
- package/dist/editing.js +22 -13
- package/dist/grid-icons.d.ts +49 -0
- package/dist/grid-icons.js +86 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +3 -2
- package/package.json +1 -1
- package/src/FlexRender.svelte +96 -96
- package/src/GridFooter.svelte +190 -181
- package/src/GridMenus.svelte +18 -10
- package/src/SvAutoComplete.svelte +169 -169
- package/src/SvAvatar.svelte +75 -75
- package/src/SvCalendar.svelte +503 -503
- package/src/SvCalendar.test.ts +226 -226
- package/src/SvCarousel.svelte +141 -141
- package/src/SvCheckBox.svelte +102 -102
- package/src/SvCircularProgress.svelte +109 -109
- package/src/SvColorInput.svelte +181 -181
- package/src/SvComboBox.svelte +279 -279
- package/src/SvContextMenu.svelte +116 -116
- package/src/SvCountryInput.svelte +163 -163
- package/src/SvDrawer.svelte +254 -254
- package/src/SvDropDownList.svelte +378 -378
- package/src/SvDurationInput.svelte +126 -126
- package/src/SvField.svelte +293 -293
- package/src/SvForm.svelte +437 -437
- package/src/SvForm.test.ts +411 -411
- package/src/SvGrid.controller.svelte.ts +146 -13
- package/src/SvGrid.css +79 -10
- package/src/SvGrid.svelte +191 -186
- package/src/SvGrid.types.ts +2133 -2092
- package/src/SvGridCellEditor.svelte +748 -744
- package/src/SvGridChart.svelte +2246 -1716
- package/src/SvGridChart.test.ts +243 -1
- package/src/SvGridChartPanel.svelte +633 -485
- package/src/SvGridChartView.svelte +79 -70
- package/src/SvGridDropdown.svelte +728 -728
- package/src/SvGridSelect.svelte +270 -270
- package/src/SvGroupCell.svelte +141 -116
- package/src/SvListBox.svelte +334 -334
- package/src/SvMaskedInput.svelte +122 -122
- package/src/SvMenu.svelte +124 -124
- package/src/SvMenu.test.ts +97 -97
- package/src/SvMenuList.svelte +146 -146
- package/src/SvMultiSelect.svelte +293 -293
- package/src/SvNumberInput.svelte +172 -172
- package/src/SvOtpInput.svelte +158 -158
- package/src/SvPasswordInput.svelte +151 -151
- package/src/SvPhoneInput.svelte +133 -133
- package/src/SvPopover.svelte +197 -197
- package/src/SvProgress.svelte +116 -116
- package/src/SvRadioGroup.svelte +107 -107
- package/src/SvRating.svelte +112 -112
- package/src/SvResult.svelte +73 -73
- package/src/SvRichText.svelte +211 -211
- package/src/SvRowGroupPanel.svelte +186 -170
- package/src/SvScrollArea.svelte +61 -61
- package/src/SvSlider.svelte +203 -203
- package/src/SvSwitchButton.svelte +108 -108
- package/src/SvTagsInput.svelte +115 -115
- package/src/SvTextInput.svelte +147 -147
- package/src/SvTimePicker.svelte +245 -245
- package/src/SvToaster.svelte +159 -159
- package/src/SvToaster.test.ts +95 -95
- package/src/SvToggleButton.svelte +85 -85
- package/src/SvTooltip.svelte +161 -161
- package/src/SvTour.svelte +208 -208
- package/src/SvTree.svelte +444 -444
- package/src/SvTreeSelect.svelte +239 -239
- package/src/a11y/dismissable.test.ts +119 -119
- package/src/a11y/dismissable.ts +114 -114
- package/src/a11y.contract.test.ts +49 -49
- package/src/a11y.test.ts +59 -59
- package/src/a11y.ts +61 -61
- package/src/ai.test.ts +561 -502
- package/src/ai.ts +1472 -1419
- package/src/build-api.coverage.test.ts +633 -633
- package/src/build-api.ts +846 -846
- package/src/builtin-editors.grid.test.ts +83 -83
- package/src/cell-formatting.ts +177 -171
- package/src/cell-render.test.ts +513 -513
- package/src/cell-render.ts +496 -496
- package/src/cell-values.ts +148 -148
- package/src/chart-export.test.ts +112 -0
- package/src/chart-export.ts +270 -202
- package/src/chart-view.svelte.ts +36 -36
- package/src/chart.test.ts +830 -1
- package/src/chart.ts +3342 -2321
- package/src/collaboration.test.ts +104 -104
- package/src/collaboration.ts +167 -167
- package/src/column-groups.ts +78 -78
- package/src/core.performance.test.ts +30 -30
- package/src/core.ts +1865 -1865
- package/src/createAutocomplete.svelte.ts +132 -132
- package/src/createCombobox.svelte.ts +191 -191
- package/src/createCountryInput.svelte.ts +157 -157
- package/src/createDropdownList.svelte.ts +168 -168
- package/src/createForm.svelte.ts +386 -386
- package/src/createGrid.svelte.ts +42 -42
- package/src/createGrid.test.ts +10 -10
- package/src/createGridState.svelte.ts +17 -17
- package/src/createListbox.svelte.ts +250 -250
- package/src/createMenu.svelte.ts +224 -224
- package/src/createPopoverSelect.svelte.ts +213 -213
- package/src/createSlider.svelte.ts +191 -191
- package/src/createTooltip.svelte.ts +144 -144
- package/src/createTree.svelte.ts +322 -322
- package/src/datetime/date-core.ts +206 -206
- package/src/datetime/date-restrict.ts +61 -61
- package/src/datetime/timezone.ts +135 -135
- package/src/dock-manager-model.ts +596 -596
- package/src/dock-model.ts +374 -374
- package/src/editing.test.ts +974 -974
- package/src/editing.ts +618 -609
- package/src/editor-contract.ts +171 -171
- package/src/editor-registry.grid.test.ts +144 -144
- package/src/editor-registry.ts +122 -122
- package/src/export-data-api.test.ts +126 -126
- package/src/export-format.test.ts +107 -107
- package/src/export-format.ts +601 -601
- package/src/filter-operators.ts +160 -160
- package/src/filtering/excel-filters.ts +325 -325
- package/src/flex-render.ts +3 -3
- package/src/form-field.ts +127 -127
- package/src/grid-icons.test.ts +46 -0
- package/src/grid-icons.ts +184 -0
- package/src/group-display.test.ts +167 -167
- package/src/group-display.ts +200 -200
- package/src/headless.ts +87 -87
- package/src/icon-overrides.grid.test.ts +188 -0
- package/src/icon-seam.test.ts +100 -0
- package/src/index.ts +19 -0
- package/src/js-scroller.svelte.ts +173 -173
- package/src/keyboard-handlers.ts +270 -270
- package/src/keyboard.test.ts +59 -59
- package/src/keyboard.ts +97 -97
- package/src/list-nav.test.ts +49 -49
- package/src/list-nav.ts +29 -29
- package/src/list-option.test.ts +56 -56
- package/src/list-option.ts +179 -179
- package/src/menus.ts +597 -597
- package/src/merge-objects.ts +48 -48
- package/src/overlays.test.ts +90 -90
- package/src/positioning.ts +268 -268
- package/src/render-component.ts +28 -28
- package/src/row-drag.test.ts +401 -401
- package/src/row-drag.ts +419 -419
- package/src/row-resize.test.ts +524 -524
- package/src/row-resize.ts +228 -228
- package/src/scheduler-ical.ts +181 -181
- package/src/scheduler-model.test.ts +562 -562
- package/src/scheduler-model.ts +873 -873
- package/src/selection.test.ts +885 -885
- package/src/server-data-source.test.ts +383 -383
- package/src/server-data-source.ts +469 -469
- package/src/sparkline.test.ts +68 -68
- package/src/sparkline.ts +169 -169
- package/src/spreadsheet.test.ts +488 -488
- package/src/spreadsheet.ts +312 -312
- package/src/static-functions.ts +11 -11
- package/src/subscribe.ts +38 -38
- package/src/summaries.ts +113 -113
- package/src/svgrid-wrapper.types.ts +563 -563
- package/src/svgrid.async-editor-options.test.ts +273 -273
- package/src/svgrid.auto-row-height.test.ts +204 -204
- package/src/svgrid.behavior.test.ts +910 -910
- package/src/svgrid.charting.test.ts +654 -534
- package/src/svgrid.comments-autocomplete.test.ts +127 -127
- package/src/svgrid.context-menu.test.ts +147 -147
- package/src/svgrid.features.test.ts +157 -157
- package/src/svgrid.filter-depth.test.ts +163 -163
- package/src/svgrid.filter-menu-listbox.svelte.test.ts +382 -377
- package/src/svgrid.filter-menu-scroll.test.ts +112 -112
- package/src/svgrid.grand-total.test.ts +188 -188
- package/src/svgrid.group-display-mode.test.ts +171 -171
- package/src/svgrid.group-footers.test.ts +121 -121
- package/src/svgrid.group-pagination.test.ts +153 -153
- package/src/svgrid.new-features.wrapper.test.ts +251 -251
- package/src/svgrid.tree-data.test.ts +186 -186
- package/src/svgrid.wrapper.test.ts +63 -63
- package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
- package/src/test-setup.ts +62 -62
- package/src/themes/index.ts +288 -288
- package/src/toast-store.svelte.ts +250 -250
- package/src/toast-store.test.ts +147 -147
- package/src/tree-row-model.test.ts +168 -168
- package/src/ui-buttons.test.ts +144 -144
- package/src/ui-inputs.test.ts +118 -118
- package/src/ui-localization.test.ts +113 -113
- package/src/ui-range.test.ts +70 -70
- package/src/ui-selection.test.ts +155 -155
- package/src/ui-tier1.test.ts +142 -142
- package/src/virtual.test.ts +88 -88
- package/src/virtualization/column-virtualizer.test.ts +27 -27
- package/src/virtualization/column-virtualizer.ts +30 -30
- package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
- package/src/virtualization/types.ts +30 -30
- package/src/virtualization/virtualizer.test.ts +47 -47
- package/src/virtualization/virtualizer.ts +322 -322
- package/dist/cdn/GridMenus-DMihUtma.js +0 -600
- package/dist/cdn/GridMenus-nmNDj1a3.js +0 -601
- package/dist/cdn/SvGridChart-Bs2GIR2Q.js +0 -1202
- package/dist/cdn/SvGridChart-CwhFz7GV.js +0 -1203
- package/dist/cdn/SvGridChartPanel-1WXuStzM.js +0 -561
- package/dist/cdn/SvGridChartPanel-e5_nqNP9.js +0 -585
- package/dist/cdn/chart-i4XcXyHJ.js +0 -1214
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,34 @@ Releases above 1.2.3 are generated from the commit subjects in each release tag
|
|
|
4
4
|
(`node tools/build-changelog.mjs`), so they describe what changed rather than
|
|
5
5
|
reading as polished release notes. Entries from 1.2.3 down are hand-written.
|
|
6
6
|
|
|
7
|
+
## 3.0.0
|
|
8
|
+
|
|
9
|
+
_2026-09-07_
|
|
10
|
+
|
|
11
|
+
- Release 3.0.0 across the suite
|
|
12
|
+
- Record the versions published from this tree
|
|
13
|
+
- Docs: teach the 3.0 tool names and what the server now does
|
|
14
|
+
- migrate: handle createColumnHelper columns
|
|
15
|
+
- Measure the MCP server instead of asserting it is good
|
|
16
|
+
- Hosted MCP server reaches parity, and answers its own aliases
|
|
17
|
+
- MCP 3.0: a small, verified, offline surface
|
|
18
|
+
|
|
19
|
+
## 2.6.23
|
|
20
|
+
|
|
21
|
+
_2026-09-07_
|
|
22
|
+
|
|
23
|
+
- Framework docs use the wrapper, not the raw element
|
|
24
|
+
- Guard the Angular / TypeScript pairing the sandbox depends on
|
|
25
|
+
- Framework wrappers for grid-wc, runnable examples, and a web-components docs category
|
|
26
|
+
|
|
27
|
+
## 2.6.22
|
|
28
|
+
|
|
29
|
+
_2026-09-04_
|
|
30
|
+
|
|
31
|
+
- docs updates
|
|
32
|
+
- row and column resizing props and updated docs
|
|
33
|
+
- MCP Server Updates
|
|
34
|
+
|
|
7
35
|
## 2.6.21
|
|
8
36
|
|
|
9
37
|
_2026-08-31_
|
|
@@ -318,91 +346,91 @@ _2026-07-07_
|
|
|
318
346
|
|
|
319
347
|
<!-- build-changelog: hand-written entries below this line -->
|
|
320
348
|
|
|
321
|
-
## 1.2.3
|
|
322
|
-
|
|
323
|
-
### Fixed
|
|
324
|
-
|
|
325
|
-
- **Pinned columns no longer disappear when column virtualization is on.** A
|
|
326
|
-
pinned column is `position: sticky`, so it only stays pinned while its cell is
|
|
327
|
-
in the DOM - but column virtualization dropped it once it scrolled out of the
|
|
328
|
-
window, so scrolling far enough sideways made the frozen column vanish (the
|
|
329
|
-
workaround was `columnVirtualization={false}`). The rendered column window now
|
|
330
|
-
stays contiguous through the pinned-left prefix and pinned-right suffix, so
|
|
331
|
-
pinned cells are always rendered and pinning + column virtualization work
|
|
332
|
-
together. No API change.
|
|
333
|
-
- **No more "ResizeObserver loop completed with undelivered notifications"
|
|
334
|
-
console noise.** The grid's internal `ResizeObserver`s (header height, root
|
|
335
|
-
size, viewport size, and the custom scrollbar) mutated layout state
|
|
336
|
-
synchronously inside the observe callback, which the browser reports with that
|
|
337
|
-
benign-but-noisy warning - most visibly when a whole grid is swapped at once
|
|
338
|
-
(e.g. switching demos in the playground). The callbacks now coalesce onto the
|
|
339
|
-
next animation frame, so each delivery cycle finishes cleanly and the warning
|
|
340
|
-
is gone. Behaviour is unchanged; the remeasure just happens one frame later.
|
|
341
|
-
|
|
342
|
-
## 1.2.2
|
|
343
|
-
|
|
344
|
-
### Fixed
|
|
345
|
-
|
|
346
|
-
- **The grid now themes itself out of the box.** Styling that previously lived
|
|
347
|
-
only in the examples' host stylesheet is now shipped in the grid's own CSS, so
|
|
348
|
-
a bare `@svgrid/grid` install (or the single-file / CDN builds) renders a
|
|
349
|
-
complete grid with no extra stylesheet:
|
|
350
|
-
- **Cell grid lines** (per-cell right + bottom borders, clean outer edge),
|
|
351
|
-
- **Row hover** tint,
|
|
352
|
-
- **Pagination footer** (layout, page-size select, prev/next buttons, labels)
|
|
353
|
-
- `GridFooter.svelte` shipped with no styles at all before,
|
|
354
|
-
- **Filter inputs** - the header filter row, per-column filter, global search
|
|
355
|
-
box, and menu search/condition inputs now get a tokenized background +
|
|
356
|
-
border out of the box (previously only the inline cell editor + menu inputs
|
|
357
|
-
were styled), with a calm box-shadow focus instead of a hard outline.
|
|
358
|
-
- **Column menu + filter chrome** - the filter-operator `<select>`, the
|
|
359
|
-
"search values" magnifier, the facet checklist's native checkboxes
|
|
360
|
-
(accent-colored), the submenu chevron, the filter/choose-columns popover
|
|
361
|
-
widths, the filter-menu spacing, and the active-filter funnel tint are now
|
|
362
|
-
themed by the grid (were host-only, so bare consumers saw unstyled menus).
|
|
363
|
-
- **Selection checkbox** fills with the accent (was the lighter selection
|
|
364
|
-
tint); **column resize handle** shows an accent center pill on hover/drag;
|
|
365
|
-
scrollbar-corner divider, group-row label, and a few operator/button states
|
|
366
|
-
now use tokens instead of hardcoded values.
|
|
367
|
-
|
|
368
|
-
All driven by the existing `--sg-*` tokens with sensible fallbacks; consumer
|
|
369
|
-
overrides still win, so the examples/site look unchanged. Every redundant
|
|
370
|
-
`.sv-grid-*` override was removed from the examples' + website's host
|
|
371
|
-
stylesheets - they now carry only demo helpers, no grid chrome.
|
|
372
|
-
|
|
373
|
-
- **Pinned columns were semi-transparent.** The default pinned-cell tint used
|
|
374
|
-
`color-mix(... 70%, ... 8%)` whose percentages sum to 78%, which per spec
|
|
375
|
-
yields a 78%-opaque colour - so scrolling rows bled through the frozen column.
|
|
376
|
-
The mixes now sum to 100% (`92%/8%`, `86%/14%`) and are fully opaque.
|
|
377
|
-
- **Right-aligned values hid under the vertical scrollbar.** The custom
|
|
378
|
-
scrollbar overlays the right 16px of the viewport, and the scrollbar-width
|
|
379
|
-
reservation only ran in `fitColumns` mode. The last column's right-aligned
|
|
380
|
-
content now gets 16px of extra right padding whenever the vertical scrollbar
|
|
381
|
-
is visible, so numbers stay clear of it.
|
|
382
|
-
|
|
383
|
-
## 1.2.0
|
|
384
|
-
|
|
385
|
-
### Added
|
|
386
|
-
|
|
387
|
-
- **CDN bundles.** Pre-compiled ESM bundles under `dist/cdn/` (CSS inlined):
|
|
388
|
-
- `svgrid.js` - Svelte runtime bundled in; a self-contained drop-in exposed
|
|
389
|
-
via the `unpkg` / `jsdelivr` fields and the `./cdn` export.
|
|
390
|
-
- `svgrid.svelte-external.js` - Svelte kept external (`./cdn/svelte-external`
|
|
391
|
-
export), so a page that compiles its own component can share ONE Svelte
|
|
392
|
-
runtime with the grid. Powers the website's "copy runnable Svelte HTML"
|
|
393
|
-
single-file export.
|
|
394
|
-
|
|
395
|
-
The main `exports` still ship the Svelte-source library, so npm + Vite /
|
|
396
|
-
SvelteKit consumers keep tree-shaking and normal compilation - nothing
|
|
397
|
-
changes for them.
|
|
398
|
-
|
|
399
|
-
### Fixed
|
|
400
|
-
|
|
401
|
-
- **Smaller install.** Test artifacts (`*.test.*`, `*.spec.*`, `test-setup.*`,
|
|
402
|
-
`test-fixtures/`) are stripped from the published `dist/` (~130 files that
|
|
403
|
-
were previously shipped to every installer).
|
|
404
|
-
- **Valid HTML / accessibility.** The multi-select dropdown no longer nests a
|
|
405
|
-
`<button>` (the chip "remove" control) inside the trigger `<button>` - the
|
|
406
|
-
remove control is now a `role="button"` span with identical behaviour. The
|
|
407
|
-
Excel fill handle carries an explicit `tabindex`, and a stray tabindex lint on
|
|
408
|
-
the free-form chips editor was resolved.
|
|
349
|
+
## 1.2.3
|
|
350
|
+
|
|
351
|
+
### Fixed
|
|
352
|
+
|
|
353
|
+
- **Pinned columns no longer disappear when column virtualization is on.** A
|
|
354
|
+
pinned column is `position: sticky`, so it only stays pinned while its cell is
|
|
355
|
+
in the DOM - but column virtualization dropped it once it scrolled out of the
|
|
356
|
+
window, so scrolling far enough sideways made the frozen column vanish (the
|
|
357
|
+
workaround was `columnVirtualization={false}`). The rendered column window now
|
|
358
|
+
stays contiguous through the pinned-left prefix and pinned-right suffix, so
|
|
359
|
+
pinned cells are always rendered and pinning + column virtualization work
|
|
360
|
+
together. No API change.
|
|
361
|
+
- **No more "ResizeObserver loop completed with undelivered notifications"
|
|
362
|
+
console noise.** The grid's internal `ResizeObserver`s (header height, root
|
|
363
|
+
size, viewport size, and the custom scrollbar) mutated layout state
|
|
364
|
+
synchronously inside the observe callback, which the browser reports with that
|
|
365
|
+
benign-but-noisy warning - most visibly when a whole grid is swapped at once
|
|
366
|
+
(e.g. switching demos in the playground). The callbacks now coalesce onto the
|
|
367
|
+
next animation frame, so each delivery cycle finishes cleanly and the warning
|
|
368
|
+
is gone. Behaviour is unchanged; the remeasure just happens one frame later.
|
|
369
|
+
|
|
370
|
+
## 1.2.2
|
|
371
|
+
|
|
372
|
+
### Fixed
|
|
373
|
+
|
|
374
|
+
- **The grid now themes itself out of the box.** Styling that previously lived
|
|
375
|
+
only in the examples' host stylesheet is now shipped in the grid's own CSS, so
|
|
376
|
+
a bare `@svgrid/grid` install (or the single-file / CDN builds) renders a
|
|
377
|
+
complete grid with no extra stylesheet:
|
|
378
|
+
- **Cell grid lines** (per-cell right + bottom borders, clean outer edge),
|
|
379
|
+
- **Row hover** tint,
|
|
380
|
+
- **Pagination footer** (layout, page-size select, prev/next buttons, labels)
|
|
381
|
+
- `GridFooter.svelte` shipped with no styles at all before,
|
|
382
|
+
- **Filter inputs** - the header filter row, per-column filter, global search
|
|
383
|
+
box, and menu search/condition inputs now get a tokenized background +
|
|
384
|
+
border out of the box (previously only the inline cell editor + menu inputs
|
|
385
|
+
were styled), with a calm box-shadow focus instead of a hard outline.
|
|
386
|
+
- **Column menu + filter chrome** - the filter-operator `<select>`, the
|
|
387
|
+
"search values" magnifier, the facet checklist's native checkboxes
|
|
388
|
+
(accent-colored), the submenu chevron, the filter/choose-columns popover
|
|
389
|
+
widths, the filter-menu spacing, and the active-filter funnel tint are now
|
|
390
|
+
themed by the grid (were host-only, so bare consumers saw unstyled menus).
|
|
391
|
+
- **Selection checkbox** fills with the accent (was the lighter selection
|
|
392
|
+
tint); **column resize handle** shows an accent center pill on hover/drag;
|
|
393
|
+
scrollbar-corner divider, group-row label, and a few operator/button states
|
|
394
|
+
now use tokens instead of hardcoded values.
|
|
395
|
+
|
|
396
|
+
All driven by the existing `--sg-*` tokens with sensible fallbacks; consumer
|
|
397
|
+
overrides still win, so the examples/site look unchanged. Every redundant
|
|
398
|
+
`.sv-grid-*` override was removed from the examples' + website's host
|
|
399
|
+
stylesheets - they now carry only demo helpers, no grid chrome.
|
|
400
|
+
|
|
401
|
+
- **Pinned columns were semi-transparent.** The default pinned-cell tint used
|
|
402
|
+
`color-mix(... 70%, ... 8%)` whose percentages sum to 78%, which per spec
|
|
403
|
+
yields a 78%-opaque colour - so scrolling rows bled through the frozen column.
|
|
404
|
+
The mixes now sum to 100% (`92%/8%`, `86%/14%`) and are fully opaque.
|
|
405
|
+
- **Right-aligned values hid under the vertical scrollbar.** The custom
|
|
406
|
+
scrollbar overlays the right 16px of the viewport, and the scrollbar-width
|
|
407
|
+
reservation only ran in `fitColumns` mode. The last column's right-aligned
|
|
408
|
+
content now gets 16px of extra right padding whenever the vertical scrollbar
|
|
409
|
+
is visible, so numbers stay clear of it.
|
|
410
|
+
|
|
411
|
+
## 1.2.0
|
|
412
|
+
|
|
413
|
+
### Added
|
|
414
|
+
|
|
415
|
+
- **CDN bundles.** Pre-compiled ESM bundles under `dist/cdn/` (CSS inlined):
|
|
416
|
+
- `svgrid.js` - Svelte runtime bundled in; a self-contained drop-in exposed
|
|
417
|
+
via the `unpkg` / `jsdelivr` fields and the `./cdn` export.
|
|
418
|
+
- `svgrid.svelte-external.js` - Svelte kept external (`./cdn/svelte-external`
|
|
419
|
+
export), so a page that compiles its own component can share ONE Svelte
|
|
420
|
+
runtime with the grid. Powers the website's "copy runnable Svelte HTML"
|
|
421
|
+
single-file export.
|
|
422
|
+
|
|
423
|
+
The main `exports` still ship the Svelte-source library, so npm + Vite /
|
|
424
|
+
SvelteKit consumers keep tree-shaking and normal compilation - nothing
|
|
425
|
+
changes for them.
|
|
426
|
+
|
|
427
|
+
### Fixed
|
|
428
|
+
|
|
429
|
+
- **Smaller install.** Test artifacts (`*.test.*`, `*.spec.*`, `test-setup.*`,
|
|
430
|
+
`test-fixtures/`) are stripped from the published `dist/` (~130 files that
|
|
431
|
+
were previously shipped to every installer).
|
|
432
|
+
- **Valid HTML / accessibility.** The multi-select dropdown no longer nests a
|
|
433
|
+
`<button>` (the chip "remove" control) inside the trigger `<button>` - the
|
|
434
|
+
remove control is now a `role="button"` span with identical behaviour. The
|
|
435
|
+
Excel fill handle carries an explicit `tabindex`, and a stray tabindex lint on
|
|
436
|
+
the free-form chips editor was resolved.
|
package/README.md
CHANGED
|
@@ -1,170 +1,170 @@
|
|
|
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</h1>
|
|
6
|
-
|
|
7
|
-
<p align="center"><strong>The Svelte 5 native data grid. Headless-first. Render-ready.</strong></p>
|
|
8
|
-
|
|
9
|
-
<p align="center">
|
|
10
|
-
<a href="https://www.npmjs.com/package/@svgrid/grid"><img src="https://img.shields.io/npm/v/%40svgrid%2Fgrid.svg?label=%40svgrid%2Fgrid" alt="npm version" /></a>
|
|
11
|
-
<a href="https://www.npmjs.com/package/@svgrid/grid"><img src="https://img.shields.io/npm/dm/%40svgrid%2Fgrid.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
|
-
<a href="https://www.npmjs.com/package/@svgrid/grid"><img src="https://img.shields.io/badge/types-included-blue.svg" alt="TypeScript" /></a>
|
|
14
|
-
<a href="https://svelte.dev"><img src="https://img.shields.io/badge/svelte-5-ff3e00.svg" alt="Svelte 5" /></a>
|
|
15
|
-
</p>
|
|
16
|
-
|
|
17
|
-
<p align="center">
|
|
18
|
-
<a href="https://svgrid.com">Website</a> ·
|
|
19
|
-
<a href="https://svgrid.com/docs/">Docs</a> ·
|
|
20
|
-
<a href="https://svgrid.com/demos/">370+ Demos</a> ·
|
|
21
|
-
<a href="https://svgrid.com/pricing/">Pricing</a> ·
|
|
22
|
-
<a href="https://svgrid.com/roadmap/">Roadmap</a>
|
|
23
|
-
</p>
|
|
24
|
-
|
|
25
|
-
---
|
|
26
|
-
|
|
27
|
-
A production-grade **Svelte 5 data grid and data table** built from the first line for **runes**, not a
|
|
28
|
-
React grid wrapped in a Svelte shim. Virtual scrolling over 100k+ rows, Excel-style filtering, inline
|
|
29
|
-
editing, row grouping, tree data, and server-side data. Compose the headless engine yourself, or drop in
|
|
30
|
-
the full `<SvGrid />` render component and ship. The MIT core has **zero feature gating**: no license key,
|
|
31
|
-
no watermark, no row-count cap.
|
|
32
|
-
|
|
33
|
-
<p align="center">
|
|
34
|
-
<img src="https://svgrid.com/brand/svgrid-hero.png" alt="A SvGrid trading desk: KPI cards, sector filter chips, and a virtualized data table with sparkline trend columns, conditional colour, and pinned columns." width="100%" />
|
|
35
|
-
</p>
|
|
36
|
-
|
|
37
|
-
## Install
|
|
38
|
-
|
|
39
|
-
Scaffold a working Vite + Svelte 5 app with SvGrid wired up:
|
|
40
|
-
|
|
41
|
-
```bash
|
|
42
|
-
npm create @svgrid@latest
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
Or add it to an existing app:
|
|
46
|
-
|
|
47
|
-
```bash
|
|
48
|
-
npm install @svgrid/grid
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
## Quick start
|
|
52
|
-
|
|
53
|
-
```svelte
|
|
54
|
-
<script lang="ts">
|
|
55
|
-
import { SvGrid, type ColumnDef } from '@svgrid/grid'
|
|
56
|
-
|
|
57
|
-
const rows = [
|
|
58
|
-
{ firstName: 'Ada', age: 36, status: 'active' },
|
|
59
|
-
{ firstName: 'Linus', age: 54, status: 'active' },
|
|
60
|
-
{ firstName: 'Grace', age: 85, status: 'inactive' },
|
|
61
|
-
]
|
|
62
|
-
const columns: ColumnDef<{}, (typeof rows)[number]>[] = [
|
|
63
|
-
{ field: 'firstName', header: 'First name' },
|
|
64
|
-
{ field: 'age', header: 'Age' },
|
|
65
|
-
{ field: 'status', header: 'Status' },
|
|
66
|
-
]
|
|
67
|
-
</script>
|
|
68
|
-
|
|
69
|
-
<SvGrid data={rows} columns={columns} />
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
That is a real, accessible grid. Sorting, filtering, virtualization, cell selection, and inline editing
|
|
73
|
-
all wire up the moment you turn on the matching prop.
|
|
74
|
-
|
|
75
|
-
## Quick facts
|
|
76
|
-
|
|
77
|
-
| | |
|
|
78
|
-
|---|---|
|
|
79
|
-
| **License** | MIT, free for commercial use |
|
|
80
|
-
| **Requires** | `svelte@^5` (peer dependency), Node 16+ |
|
|
81
|
-
| **Bundle (gzip)** | ~2 KB headless core, ~80 KB full `<SvGrid>` + ~9 KB CSS |
|
|
82
|
-
| **Types** | Bundled, no `@types/` package needed |
|
|
83
|
-
| **Module format** | ESM, plus a CDN build at `@svgrid/grid/cdn` |
|
|
84
|
-
| **SSR** | Works under SvelteKit SSR and static builds |
|
|
85
|
-
| **Theming** | `--sg-*` CSS custom properties, dark mode + high contrast |
|
|
86
|
-
|
|
87
|
-
## Capabilities
|
|
88
|
-
|
|
89
|
-
- **Virtual scrolling** - row + column windowing; 100k x 100 stays smooth, with a 1M-row demo.
|
|
90
|
-
- **Filtering** - Excel-style filter menu, inline filter row, set / value-list filter, locale-aware matching, between operators.
|
|
91
|
-
- **Editing** - 15 built-in `editorType`s (text, number, date, datetime, time, select, rich-select with typeahead, autocomplete, textarea, color, checkbox, list, chips, rating, password), plus `date-native` / `datetime-native` / `time-native` to opt out of the rich pickers, and a `cellEditor` snippet slot for anything custom.
|
|
92
|
-
- **Selection** - cell-range click+drag and Shift+arrows, copy/paste as TSV, Excel-style fill handle, row selection.
|
|
93
|
-
- **Views** - row grouping with aggregation, tree data, master/detail, full-width detail rows, spreadsheet mode with formulas.
|
|
94
|
-
- **Layout** - row + column pinning, sticky header + first column, header drag-to-reorder, autosize, keyboard-accessible column sizing, zebra rows, responsive mode.
|
|
95
|
-
- **Data operations** - find in grid (Ctrl+F), undo / redo, transaction API, optimistic updates, server-side row model with sort / filter / group pushdown.
|
|
96
|
-
- **AI helpers, free** - natural-language filter, smart fill, summarize, classify, anomaly detection, and "chart this". Model-agnostic: register one provider, nothing is bundled.
|
|
97
|
-
- **UI components** - a Svelte 5 component suite ships in the package (inputs, selection, date/time, overlays, layout, feedback), standalone or as grid cell editors.
|
|
98
|
-
- **Accessibility** - WAI-ARIA grid roles, full keyboard navigation, RTL, high-contrast theme.
|
|
99
|
-
- **Engineered for production** - first-class TypeScript types, CSP / Trusted-Types safe rendering, SSR-friendly, themeable via `--sg-*` CSS tokens.
|
|
100
|
-
|
|
101
|
-
## Headless or render-ready
|
|
102
|
-
|
|
103
|
-
SvGrid ships two layers from one package, so you can choose how much control you want:
|
|
104
|
-
|
|
105
|
-
```ts
|
|
106
|
-
import {
|
|
107
|
-
// Drop-in render component
|
|
108
|
-
SvGrid,
|
|
109
|
-
// Headless engine + row-model factories
|
|
110
|
-
createSvGrid,
|
|
111
|
-
createCoreRowModel,
|
|
112
|
-
createFilteredRowModel,
|
|
113
|
-
createSortedRowModel,
|
|
114
|
-
createGroupedRowModel,
|
|
115
|
-
createExpandedRowModel,
|
|
116
|
-
createPaginatedRowModel,
|
|
117
|
-
// Feature modules
|
|
118
|
-
tableFeatures,
|
|
119
|
-
rowSortingFeature,
|
|
120
|
-
columnFilteringFeature,
|
|
121
|
-
columnGroupingFeature,
|
|
122
|
-
rowExpandingFeature,
|
|
123
|
-
rowPaginationFeature,
|
|
124
|
-
rowSelectionFeature,
|
|
125
|
-
// Cell renderers
|
|
126
|
-
renderSnippet,
|
|
127
|
-
renderComponent,
|
|
128
|
-
type ColumnDef,
|
|
129
|
-
type SvGridApi,
|
|
130
|
-
} from '@svgrid/grid'
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
- **Headless** - drive `createSvGrid` and the row-model factories, render your own markup.
|
|
134
|
-
`getGrid*A11yProps` helpers keep custom markup accessible. About 2 KB gzipped.
|
|
135
|
-
- **Render-ready** - `<SvGrid />` is a complete, accessible, themeable grid you configure with props.
|
|
136
|
-
|
|
137
|
-
Compatibility aliases are provided for the framework-neutral names: `createGrid`, `createGridState`,
|
|
138
|
-
`subscribeGrid`.
|
|
139
|
-
|
|
140
|
-
## AI-native
|
|
141
|
-
|
|
142
|
-
SvGrid publishes an [MCP server](https://www.npmjs.com/package/@svgrid/mcp) plus
|
|
143
|
-
[llms.txt](https://svgrid.com/llms.txt) and [llms-full.txt](https://svgrid.com/llms-full.txt), so Claude,
|
|
144
|
-
Cursor, and Zed answer with accurate, version-pinned APIs and all 370+ demo sources as context rather
|
|
145
|
-
than hallucinated methods.
|
|
146
|
-
|
|
147
|
-
```bash
|
|
148
|
-
claude mcp add svgrid -- npx -y @svgrid/mcp
|
|
149
|
-
npx skills add sv-grid/sv-grid # always-on house-style rules
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
See [Use sv-grid docs as LLM context](https://svgrid.com/docs/help/llm-grounding/).
|
|
153
|
-
|
|
154
|
-
## Enterprise features
|
|
155
|
-
|
|
156
|
-
The MIT core is free for any use, including commercial, with **no feature gating**. Sorting, filtering,
|
|
157
|
-
editing, virtualization, the **server-side row model**, and the **AI helpers** all ship in the free
|
|
158
|
-
package. The optional [`@svgrid/enterprise`](https://www.npmjs.com/package/@svgrid/enterprise) pack layers
|
|
159
|
-
on the export- and analytics-heavy features teams tend to need last:
|
|
160
|
-
|
|
161
|
-
- **Excel / PDF / CSV / TSV / HTML export** plus paginated print.
|
|
162
|
-
- **Excel / CSV / TSV / JSON import** with auto-mapping and per-row validation.
|
|
163
|
-
- **Pivot tables** with a drag-and-drop pivot Designer.
|
|
164
|
-
- **Kanban board and scheduler / calendar renderers** for the `board` and `scheduler` props.
|
|
165
|
-
|
|
166
|
-
OSS projects receive an Enterprise key free. See [Pricing](https://svgrid.com/pricing/).
|
|
167
|
-
|
|
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</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center"><strong>The Svelte 5 native data grid. Headless-first. Render-ready.</strong></p>
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
<a href="https://www.npmjs.com/package/@svgrid/grid"><img src="https://img.shields.io/npm/v/%40svgrid%2Fgrid.svg?label=%40svgrid%2Fgrid" alt="npm version" /></a>
|
|
11
|
+
<a href="https://www.npmjs.com/package/@svgrid/grid"><img src="https://img.shields.io/npm/dm/%40svgrid%2Fgrid.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
|
+
<a href="https://www.npmjs.com/package/@svgrid/grid"><img src="https://img.shields.io/badge/types-included-blue.svg" alt="TypeScript" /></a>
|
|
14
|
+
<a href="https://svelte.dev"><img src="https://img.shields.io/badge/svelte-5-ff3e00.svg" alt="Svelte 5" /></a>
|
|
15
|
+
</p>
|
|
16
|
+
|
|
17
|
+
<p align="center">
|
|
18
|
+
<a href="https://svgrid.com">Website</a> ·
|
|
19
|
+
<a href="https://svgrid.com/docs/">Docs</a> ·
|
|
20
|
+
<a href="https://svgrid.com/demos/">370+ Demos</a> ·
|
|
21
|
+
<a href="https://svgrid.com/pricing/">Pricing</a> ·
|
|
22
|
+
<a href="https://svgrid.com/roadmap/">Roadmap</a>
|
|
23
|
+
</p>
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
A production-grade **Svelte 5 data grid and data table** built from the first line for **runes**, not a
|
|
28
|
+
React grid wrapped in a Svelte shim. Virtual scrolling over 100k+ rows, Excel-style filtering, inline
|
|
29
|
+
editing, row grouping, tree data, and server-side data. Compose the headless engine yourself, or drop in
|
|
30
|
+
the full `<SvGrid />` render component and ship. The MIT core has **zero feature gating**: no license key,
|
|
31
|
+
no watermark, no row-count cap.
|
|
32
|
+
|
|
33
|
+
<p align="center">
|
|
34
|
+
<img src="https://svgrid.com/brand/svgrid-hero.png" alt="A SvGrid trading desk: KPI cards, sector filter chips, and a virtualized data table with sparkline trend columns, conditional colour, and pinned columns." width="100%" />
|
|
35
|
+
</p>
|
|
36
|
+
|
|
37
|
+
## Install
|
|
38
|
+
|
|
39
|
+
Scaffold a working Vite + Svelte 5 app with SvGrid wired up:
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
npm create @svgrid@latest
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Or add it to an existing app:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
npm install @svgrid/grid
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Quick start
|
|
52
|
+
|
|
53
|
+
```svelte
|
|
54
|
+
<script lang="ts">
|
|
55
|
+
import { SvGrid, type ColumnDef } from '@svgrid/grid'
|
|
56
|
+
|
|
57
|
+
const rows = [
|
|
58
|
+
{ firstName: 'Ada', age: 36, status: 'active' },
|
|
59
|
+
{ firstName: 'Linus', age: 54, status: 'active' },
|
|
60
|
+
{ firstName: 'Grace', age: 85, status: 'inactive' },
|
|
61
|
+
]
|
|
62
|
+
const columns: ColumnDef<{}, (typeof rows)[number]>[] = [
|
|
63
|
+
{ field: 'firstName', header: 'First name' },
|
|
64
|
+
{ field: 'age', header: 'Age' },
|
|
65
|
+
{ field: 'status', header: 'Status' },
|
|
66
|
+
]
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
<SvGrid data={rows} columns={columns} />
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
That is a real, accessible grid. Sorting, filtering, virtualization, cell selection, and inline editing
|
|
73
|
+
all wire up the moment you turn on the matching prop.
|
|
74
|
+
|
|
75
|
+
## Quick facts
|
|
76
|
+
|
|
77
|
+
| | |
|
|
78
|
+
|---|---|
|
|
79
|
+
| **License** | MIT, free for commercial use |
|
|
80
|
+
| **Requires** | `svelte@^5` (peer dependency), Node 16+ |
|
|
81
|
+
| **Bundle (gzip)** | ~2 KB headless core, ~80 KB full `<SvGrid>` + ~9 KB CSS |
|
|
82
|
+
| **Types** | Bundled, no `@types/` package needed |
|
|
83
|
+
| **Module format** | ESM, plus a CDN build at `@svgrid/grid/cdn` |
|
|
84
|
+
| **SSR** | Works under SvelteKit SSR and static builds |
|
|
85
|
+
| **Theming** | `--sg-*` CSS custom properties, dark mode + high contrast |
|
|
86
|
+
|
|
87
|
+
## Capabilities
|
|
88
|
+
|
|
89
|
+
- **Virtual scrolling** - row + column windowing; 100k x 100 stays smooth, with a 1M-row demo.
|
|
90
|
+
- **Filtering** - Excel-style filter menu, inline filter row, set / value-list filter, locale-aware matching, between operators.
|
|
91
|
+
- **Editing** - 15 built-in `editorType`s (text, number, date, datetime, time, select, rich-select with typeahead, autocomplete, textarea, color, checkbox, list, chips, rating, password), plus `date-native` / `datetime-native` / `time-native` to opt out of the rich pickers, and a `cellEditor` snippet slot for anything custom.
|
|
92
|
+
- **Selection** - cell-range click+drag and Shift+arrows, copy/paste as TSV, Excel-style fill handle, row selection.
|
|
93
|
+
- **Views** - row grouping with aggregation, tree data, master/detail, full-width detail rows, spreadsheet mode with formulas.
|
|
94
|
+
- **Layout** - row + column pinning, sticky header + first column, header drag-to-reorder, autosize, keyboard-accessible column sizing, zebra rows, responsive mode.
|
|
95
|
+
- **Data operations** - find in grid (Ctrl+F), undo / redo, transaction API, optimistic updates, server-side row model with sort / filter / group pushdown.
|
|
96
|
+
- **AI helpers, free** - natural-language filter, smart fill, summarize, classify, anomaly detection, and "chart this". Model-agnostic: register one provider, nothing is bundled.
|
|
97
|
+
- **UI components** - a Svelte 5 component suite ships in the package (inputs, selection, date/time, overlays, layout, feedback), standalone or as grid cell editors.
|
|
98
|
+
- **Accessibility** - WAI-ARIA grid roles, full keyboard navigation, RTL, high-contrast theme.
|
|
99
|
+
- **Engineered for production** - first-class TypeScript types, CSP / Trusted-Types safe rendering, SSR-friendly, themeable via `--sg-*` CSS tokens.
|
|
100
|
+
|
|
101
|
+
## Headless or render-ready
|
|
102
|
+
|
|
103
|
+
SvGrid ships two layers from one package, so you can choose how much control you want:
|
|
104
|
+
|
|
105
|
+
```ts
|
|
106
|
+
import {
|
|
107
|
+
// Drop-in render component
|
|
108
|
+
SvGrid,
|
|
109
|
+
// Headless engine + row-model factories
|
|
110
|
+
createSvGrid,
|
|
111
|
+
createCoreRowModel,
|
|
112
|
+
createFilteredRowModel,
|
|
113
|
+
createSortedRowModel,
|
|
114
|
+
createGroupedRowModel,
|
|
115
|
+
createExpandedRowModel,
|
|
116
|
+
createPaginatedRowModel,
|
|
117
|
+
// Feature modules
|
|
118
|
+
tableFeatures,
|
|
119
|
+
rowSortingFeature,
|
|
120
|
+
columnFilteringFeature,
|
|
121
|
+
columnGroupingFeature,
|
|
122
|
+
rowExpandingFeature,
|
|
123
|
+
rowPaginationFeature,
|
|
124
|
+
rowSelectionFeature,
|
|
125
|
+
// Cell renderers
|
|
126
|
+
renderSnippet,
|
|
127
|
+
renderComponent,
|
|
128
|
+
type ColumnDef,
|
|
129
|
+
type SvGridApi,
|
|
130
|
+
} from '@svgrid/grid'
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
- **Headless** - drive `createSvGrid` and the row-model factories, render your own markup.
|
|
134
|
+
`getGrid*A11yProps` helpers keep custom markup accessible. About 2 KB gzipped.
|
|
135
|
+
- **Render-ready** - `<SvGrid />` is a complete, accessible, themeable grid you configure with props.
|
|
136
|
+
|
|
137
|
+
Compatibility aliases are provided for the framework-neutral names: `createGrid`, `createGridState`,
|
|
138
|
+
`subscribeGrid`.
|
|
139
|
+
|
|
140
|
+
## AI-native
|
|
141
|
+
|
|
142
|
+
SvGrid publishes an [MCP server](https://www.npmjs.com/package/@svgrid/mcp) plus
|
|
143
|
+
[llms.txt](https://svgrid.com/llms.txt) and [llms-full.txt](https://svgrid.com/llms-full.txt), so Claude,
|
|
144
|
+
Cursor, and Zed answer with accurate, version-pinned APIs and all 370+ demo sources as context rather
|
|
145
|
+
than hallucinated methods.
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
claude mcp add svgrid -- npx -y @svgrid/mcp
|
|
149
|
+
npx skills add sv-grid/sv-grid # always-on house-style rules
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
See [Use sv-grid docs as LLM context](https://svgrid.com/docs/help/llm-grounding/).
|
|
153
|
+
|
|
154
|
+
## Enterprise features
|
|
155
|
+
|
|
156
|
+
The MIT core is free for any use, including commercial, with **no feature gating**. Sorting, filtering,
|
|
157
|
+
editing, virtualization, the **server-side row model**, and the **AI helpers** all ship in the free
|
|
158
|
+
package. The optional [`@svgrid/enterprise`](https://www.npmjs.com/package/@svgrid/enterprise) pack layers
|
|
159
|
+
on the export- and analytics-heavy features teams tend to need last:
|
|
160
|
+
|
|
161
|
+
- **Excel / PDF / CSV / TSV / HTML export** plus paginated print.
|
|
162
|
+
- **Excel / CSV / TSV / JSON import** with auto-mapping and per-row validation.
|
|
163
|
+
- **Pivot tables** with a drag-and-drop pivot Designer.
|
|
164
|
+
- **Kanban board and scheduler / calendar renderers** for the `board` and `scheduler` props.
|
|
165
|
+
|
|
166
|
+
OSS projects receive an Enterprise key free. See [Pricing](https://svgrid.com/pricing/).
|
|
167
|
+
|
|
168
168
|
## Also in the box
|
|
169
169
|
|
|
170
170
|
The grid is the hero, but it is not everything in the package. The component suite below already ships
|
|
@@ -187,35 +187,35 @@ inside `@svgrid/grid`; the tools after it install separately and are entirely op
|
|
|
187
187
|
- **[SvGrid Studio](https://svgrid.com/docs/studio/)** (commercial) - visual designer that generates a
|
|
188
188
|
SvelteKit CRUD app from a database schema: screens, forms, API routes, auth. Code you own, no runtime.
|
|
189
189
|
|
|
190
|
-
## Comparison
|
|
191
|
-
|
|
192
|
-
| | SvGrid | AG Grid Community | TanStack Table |
|
|
193
|
-
|---|---|---|---|
|
|
194
|
-
| **Svelte 5 runes native** | Yes | No, JS core + wrapper | Adapter only |
|
|
195
|
-
| **Ships a renderer** | Yes, plus headless | Yes | No, headless only |
|
|
196
|
-
| **Bundle (gzip)** | ~2 KB headless / ~80 KB full | ~340 KB | ~12-14 KB |
|
|
197
|
-
| **Master/detail, tree, range selection** | Free | Enterprise only | Build it yourself |
|
|
198
|
-
|
|
199
|
-
Full detail: [SvGrid vs AG Grid vs TanStack Table](https://svgrid.com/docs/help/comparison/) ·
|
|
200
|
-
[Migrating from AG Grid](https://svgrid.com/docs/help/migrating-from-ag-grid/)
|
|
201
|
-
|
|
202
|
-
## Documentation
|
|
203
|
-
|
|
204
|
-
- [Getting started](https://svgrid.com/docs/getting-started/) - end-to-end walkthrough.
|
|
205
|
-
- [370+ live demos](https://svgrid.com/demos/) - copy-paste recipes for every feature.
|
|
206
|
-
- [Why headless?](https://svgrid.com/docs/why-headless/) - when to compose vs. drop in.
|
|
207
|
-
- [Theming and Tailwind](https://svgrid.com/docs/help/tailwind/) - re-skin via `--sg-*` tokens and dark mode.
|
|
208
|
-
- [Accessibility](https://svgrid.com/docs/help/accessibility/) - the WAI-ARIA grid pattern as implemented.
|
|
209
|
-
- [Bundle size](https://svgrid.com/docs/reference/bundle-size/) - measured numbers and how to reproduce them.
|
|
210
|
-
|
|
211
|
-
## Who's behind it
|
|
212
|
-
|
|
213
|
-
SvGrid is built by [jQWidgets](https://www.jqwidgets.com), shipping UI components since 2011 to 5,000+
|
|
214
|
-
companies including Samsung, Boeing, NVIDIA, Microsoft, Nokia, and Intel. SvGrid is our Svelte 5 native
|
|
215
|
-
effort.
|
|
216
|
-
|
|
217
|
-
## License & trademark
|
|
218
|
-
|
|
219
|
-
The source code is **MIT-licensed** - see [LICENSE](./LICENSE). It is free for commercial use.
|
|
220
|
-
SvGrid™ and sv-grid™ are trademarks of jQWidgets Ltd; the license covers the code only, not
|
|
221
|
-
the name or logo.
|
|
190
|
+
## Comparison
|
|
191
|
+
|
|
192
|
+
| | SvGrid | AG Grid Community | TanStack Table |
|
|
193
|
+
|---|---|---|---|
|
|
194
|
+
| **Svelte 5 runes native** | Yes | No, JS core + wrapper | Adapter only |
|
|
195
|
+
| **Ships a renderer** | Yes, plus headless | Yes | No, headless only |
|
|
196
|
+
| **Bundle (gzip)** | ~2 KB headless / ~80 KB full | ~340 KB | ~12-14 KB |
|
|
197
|
+
| **Master/detail, tree, range selection** | Free | Enterprise only | Build it yourself |
|
|
198
|
+
|
|
199
|
+
Full detail: [SvGrid vs AG Grid vs TanStack Table](https://svgrid.com/docs/help/comparison/) ·
|
|
200
|
+
[Migrating from AG Grid](https://svgrid.com/docs/help/migrating-from-ag-grid/)
|
|
201
|
+
|
|
202
|
+
## Documentation
|
|
203
|
+
|
|
204
|
+
- [Getting started](https://svgrid.com/docs/getting-started/) - end-to-end walkthrough.
|
|
205
|
+
- [370+ live demos](https://svgrid.com/demos/) - copy-paste recipes for every feature.
|
|
206
|
+
- [Why headless?](https://svgrid.com/docs/why-headless/) - when to compose vs. drop in.
|
|
207
|
+
- [Theming and Tailwind](https://svgrid.com/docs/help/tailwind/) - re-skin via `--sg-*` tokens and dark mode.
|
|
208
|
+
- [Accessibility](https://svgrid.com/docs/help/accessibility/) - the WAI-ARIA grid pattern as implemented.
|
|
209
|
+
- [Bundle size](https://svgrid.com/docs/reference/bundle-size/) - measured numbers and how to reproduce them.
|
|
210
|
+
|
|
211
|
+
## Who's behind it
|
|
212
|
+
|
|
213
|
+
SvGrid is built by [jQWidgets](https://www.jqwidgets.com), shipping UI components since 2011 to 5,000+
|
|
214
|
+
companies including Samsung, Boeing, NVIDIA, Microsoft, Nokia, and Intel. SvGrid is our Svelte 5 native
|
|
215
|
+
effort.
|
|
216
|
+
|
|
217
|
+
## License & trademark
|
|
218
|
+
|
|
219
|
+
The source code is **MIT-licensed** - see [LICENSE](./LICENSE). It is free for commercial use.
|
|
220
|
+
SvGrid™ and sv-grid™ are trademarks of jQWidgets Ltd; the license covers the code only, not
|
|
221
|
+
the name or logo.
|