@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.
Files changed (304) hide show
  1. package/CHANGELOG.md +116 -88
  2. package/README.md +199 -199
  3. package/dist/FlexRender.svelte +96 -96
  4. package/dist/GridFooter.svelte +190 -181
  5. package/dist/GridFooter.svelte.d.ts +8 -0
  6. package/dist/GridMenus.svelte +18 -10
  7. package/dist/GridMenus.svelte.d.ts +2 -1
  8. package/dist/SvAutoComplete.svelte +169 -169
  9. package/dist/SvAvatar.svelte +75 -75
  10. package/dist/SvCalendar.svelte +503 -503
  11. package/dist/SvCarousel.svelte +141 -141
  12. package/dist/SvCheckBox.svelte +102 -102
  13. package/dist/SvCircularProgress.svelte +109 -109
  14. package/dist/SvColorInput.svelte +181 -181
  15. package/dist/SvComboBox.svelte +279 -279
  16. package/dist/SvContextMenu.svelte +116 -116
  17. package/dist/SvCountryInput.svelte +163 -163
  18. package/dist/SvDrawer.svelte +254 -254
  19. package/dist/SvDropDownList.svelte +378 -378
  20. package/dist/SvDurationInput.svelte +126 -126
  21. package/dist/SvField.svelte +293 -293
  22. package/dist/SvForm.svelte +437 -437
  23. package/dist/SvGrid.controller.svelte.d.ts +17 -0
  24. package/dist/SvGrid.controller.svelte.js +128 -14
  25. package/dist/SvGrid.css +79 -10
  26. package/dist/SvGrid.svelte +191 -186
  27. package/dist/SvGrid.types.d.ts +42 -1
  28. package/dist/SvGridCellEditor.svelte +748 -744
  29. package/dist/SvGridChart.svelte +2246 -1716
  30. package/dist/SvGridChart.svelte.d.ts +63 -1
  31. package/dist/SvGridChartPanel.svelte +633 -485
  32. package/dist/SvGridChartView.svelte +79 -70
  33. package/dist/SvGridChartView.svelte.d.ts +7 -0
  34. package/dist/SvGridDropdown.svelte +728 -728
  35. package/dist/SvGridSelect.svelte +270 -270
  36. package/dist/SvGroupCell.svelte +141 -116
  37. package/dist/SvGroupCell.svelte.d.ts +8 -0
  38. package/dist/SvListBox.svelte +334 -334
  39. package/dist/SvMaskedInput.svelte +122 -122
  40. package/dist/SvMenu.svelte +124 -124
  41. package/dist/SvMenuList.svelte +146 -146
  42. package/dist/SvMultiSelect.svelte +293 -293
  43. package/dist/SvNumberInput.svelte +172 -172
  44. package/dist/SvOtpInput.svelte +158 -158
  45. package/dist/SvPasswordInput.svelte +151 -151
  46. package/dist/SvPhoneInput.svelte +133 -133
  47. package/dist/SvPopover.svelte +197 -197
  48. package/dist/SvProgress.svelte +116 -116
  49. package/dist/SvRadioGroup.svelte +107 -107
  50. package/dist/SvRating.svelte +112 -112
  51. package/dist/SvResult.svelte +73 -73
  52. package/dist/SvRichText.svelte +211 -211
  53. package/dist/SvRowGroupPanel.svelte +186 -170
  54. package/dist/SvRowGroupPanel.svelte.d.ts +8 -0
  55. package/dist/SvScrollArea.svelte +61 -61
  56. package/dist/SvSlider.svelte +203 -203
  57. package/dist/SvSwitchButton.svelte +108 -108
  58. package/dist/SvTagsInput.svelte +115 -115
  59. package/dist/SvTextInput.svelte +147 -147
  60. package/dist/SvTimePicker.svelte +245 -245
  61. package/dist/SvToaster.svelte +159 -159
  62. package/dist/SvToggleButton.svelte +85 -85
  63. package/dist/SvTooltip.svelte +161 -161
  64. package/dist/SvTour.svelte +208 -208
  65. package/dist/SvTree.svelte +444 -444
  66. package/dist/SvTreeSelect.svelte +239 -239
  67. package/dist/ai.d.ts +11 -2
  68. package/dist/ai.js +51 -7
  69. package/dist/cdn/GridMenus-DyFA-QxA.js +602 -0
  70. package/dist/cdn/GridMenus-M2XP9t0_.js +603 -0
  71. package/dist/cdn/{SvDateRangeInput-DflbiP7N.js → SvDateRangeInput-CaOuMs8O.js} +1 -1
  72. package/dist/cdn/{SvDateRangeInput-Bh0A0JkF.js → SvDateRangeInput-DMLKmGEc.js} +1 -1
  73. package/dist/cdn/{SvDateTimePicker-Bivn8dAP.js → SvDateTimePicker-CCbDZNZB.js} +1 -1
  74. package/dist/cdn/{SvDateTimePicker-BWwpfB_o.js → SvDateTimePicker-sonaH0oh.js} +1 -1
  75. package/dist/cdn/{SvGridCellEditor-Ba7rY3eu.js → SvGridCellEditor-BWnTi2N7.js} +2 -2
  76. package/dist/cdn/{SvGridCellEditor-AXL8cHGO.js → SvGridCellEditor-CjEJMJKc.js} +2 -2
  77. package/dist/cdn/SvGridChart-DAb9RbRs.js +1480 -0
  78. package/dist/cdn/SvGridChart-Yl-IXZFO.js +1481 -0
  79. package/dist/cdn/SvGridChartPanel-DayQpDsR.js +834 -0
  80. package/dist/cdn/SvGridChartPanel-aqf8n-vJ.js +810 -0
  81. package/dist/cdn/{SvGridChartView-eSPuJE6g.js → SvGridChartView-CxfakxR0.js} +5 -3
  82. package/dist/cdn/{SvGridChartView-SmPW10dI.js → SvGridChartView-Dm_YEx9L.js} +5 -3
  83. package/dist/cdn/{SvGridDropdown-B1ZcLpgs.js → SvGridDropdown-D0VdjeR8.js} +1 -1
  84. package/dist/cdn/{SvGridDropdown-CtdbHcIS.js → SvGridDropdown-D13MtJ2j.js} +1 -1
  85. package/dist/cdn/cell-formatting-C2Hf5gqd.js +86 -0
  86. package/dist/cdn/chart-CKJRCPOk.js +1652 -0
  87. package/dist/cdn/{date-format-DZT7T1wf.js → date-format-BNii4zeD.js} +2 -2
  88. package/dist/cdn/{date-format-CcP1tafP.js → date-format-BnnHlqGw.js} +2 -2
  89. package/dist/cdn/{export-format-Cv1Dll6k.js → export-format-CUDLy2yn.js} +84 -168
  90. package/dist/cdn/{src-B_YS5AOc.js → src-BJ2opd0j.js} +3642 -3450
  91. package/dist/cdn/{src-DYXXpuSk.js → src-DNbz94Ct.js} +8649 -8457
  92. package/dist/cdn/svgrid.js +16 -15
  93. package/dist/cdn/svgrid.svelte-external.js +16 -15
  94. package/dist/cell-formatting.d.ts +7 -0
  95. package/dist/cell-formatting.js +7 -1
  96. package/dist/chart-export.d.ts +23 -2
  97. package/dist/chart-export.js +88 -14
  98. package/dist/chart.d.ts +410 -18
  99. package/dist/chart.js +824 -24
  100. package/dist/editing.js +22 -13
  101. package/dist/grid-icons.d.ts +49 -0
  102. package/dist/grid-icons.js +86 -0
  103. package/dist/index.d.ts +3 -2
  104. package/dist/index.js +3 -2
  105. package/package.json +1 -1
  106. package/src/FlexRender.svelte +96 -96
  107. package/src/GridFooter.svelte +190 -181
  108. package/src/GridMenus.svelte +18 -10
  109. package/src/SvAutoComplete.svelte +169 -169
  110. package/src/SvAvatar.svelte +75 -75
  111. package/src/SvCalendar.svelte +503 -503
  112. package/src/SvCalendar.test.ts +226 -226
  113. package/src/SvCarousel.svelte +141 -141
  114. package/src/SvCheckBox.svelte +102 -102
  115. package/src/SvCircularProgress.svelte +109 -109
  116. package/src/SvColorInput.svelte +181 -181
  117. package/src/SvComboBox.svelte +279 -279
  118. package/src/SvContextMenu.svelte +116 -116
  119. package/src/SvCountryInput.svelte +163 -163
  120. package/src/SvDrawer.svelte +254 -254
  121. package/src/SvDropDownList.svelte +378 -378
  122. package/src/SvDurationInput.svelte +126 -126
  123. package/src/SvField.svelte +293 -293
  124. package/src/SvForm.svelte +437 -437
  125. package/src/SvForm.test.ts +411 -411
  126. package/src/SvGrid.controller.svelte.ts +146 -13
  127. package/src/SvGrid.css +79 -10
  128. package/src/SvGrid.svelte +191 -186
  129. package/src/SvGrid.types.ts +2133 -2092
  130. package/src/SvGridCellEditor.svelte +748 -744
  131. package/src/SvGridChart.svelte +2246 -1716
  132. package/src/SvGridChart.test.ts +243 -1
  133. package/src/SvGridChartPanel.svelte +633 -485
  134. package/src/SvGridChartView.svelte +79 -70
  135. package/src/SvGridDropdown.svelte +728 -728
  136. package/src/SvGridSelect.svelte +270 -270
  137. package/src/SvGroupCell.svelte +141 -116
  138. package/src/SvListBox.svelte +334 -334
  139. package/src/SvMaskedInput.svelte +122 -122
  140. package/src/SvMenu.svelte +124 -124
  141. package/src/SvMenu.test.ts +97 -97
  142. package/src/SvMenuList.svelte +146 -146
  143. package/src/SvMultiSelect.svelte +293 -293
  144. package/src/SvNumberInput.svelte +172 -172
  145. package/src/SvOtpInput.svelte +158 -158
  146. package/src/SvPasswordInput.svelte +151 -151
  147. package/src/SvPhoneInput.svelte +133 -133
  148. package/src/SvPopover.svelte +197 -197
  149. package/src/SvProgress.svelte +116 -116
  150. package/src/SvRadioGroup.svelte +107 -107
  151. package/src/SvRating.svelte +112 -112
  152. package/src/SvResult.svelte +73 -73
  153. package/src/SvRichText.svelte +211 -211
  154. package/src/SvRowGroupPanel.svelte +186 -170
  155. package/src/SvScrollArea.svelte +61 -61
  156. package/src/SvSlider.svelte +203 -203
  157. package/src/SvSwitchButton.svelte +108 -108
  158. package/src/SvTagsInput.svelte +115 -115
  159. package/src/SvTextInput.svelte +147 -147
  160. package/src/SvTimePicker.svelte +245 -245
  161. package/src/SvToaster.svelte +159 -159
  162. package/src/SvToaster.test.ts +95 -95
  163. package/src/SvToggleButton.svelte +85 -85
  164. package/src/SvTooltip.svelte +161 -161
  165. package/src/SvTour.svelte +208 -208
  166. package/src/SvTree.svelte +444 -444
  167. package/src/SvTreeSelect.svelte +239 -239
  168. package/src/a11y/dismissable.test.ts +119 -119
  169. package/src/a11y/dismissable.ts +114 -114
  170. package/src/a11y.contract.test.ts +49 -49
  171. package/src/a11y.test.ts +59 -59
  172. package/src/a11y.ts +61 -61
  173. package/src/ai.test.ts +561 -502
  174. package/src/ai.ts +1472 -1419
  175. package/src/build-api.coverage.test.ts +633 -633
  176. package/src/build-api.ts +846 -846
  177. package/src/builtin-editors.grid.test.ts +83 -83
  178. package/src/cell-formatting.ts +177 -171
  179. package/src/cell-render.test.ts +513 -513
  180. package/src/cell-render.ts +496 -496
  181. package/src/cell-values.ts +148 -148
  182. package/src/chart-export.test.ts +112 -0
  183. package/src/chart-export.ts +270 -202
  184. package/src/chart-view.svelte.ts +36 -36
  185. package/src/chart.test.ts +830 -1
  186. package/src/chart.ts +3342 -2321
  187. package/src/collaboration.test.ts +104 -104
  188. package/src/collaboration.ts +167 -167
  189. package/src/column-groups.ts +78 -78
  190. package/src/core.performance.test.ts +30 -30
  191. package/src/core.ts +1865 -1865
  192. package/src/createAutocomplete.svelte.ts +132 -132
  193. package/src/createCombobox.svelte.ts +191 -191
  194. package/src/createCountryInput.svelte.ts +157 -157
  195. package/src/createDropdownList.svelte.ts +168 -168
  196. package/src/createForm.svelte.ts +386 -386
  197. package/src/createGrid.svelte.ts +42 -42
  198. package/src/createGrid.test.ts +10 -10
  199. package/src/createGridState.svelte.ts +17 -17
  200. package/src/createListbox.svelte.ts +250 -250
  201. package/src/createMenu.svelte.ts +224 -224
  202. package/src/createPopoverSelect.svelte.ts +213 -213
  203. package/src/createSlider.svelte.ts +191 -191
  204. package/src/createTooltip.svelte.ts +144 -144
  205. package/src/createTree.svelte.ts +322 -322
  206. package/src/datetime/date-core.ts +206 -206
  207. package/src/datetime/date-restrict.ts +61 -61
  208. package/src/datetime/timezone.ts +135 -135
  209. package/src/dock-manager-model.ts +596 -596
  210. package/src/dock-model.ts +374 -374
  211. package/src/editing.test.ts +974 -974
  212. package/src/editing.ts +618 -609
  213. package/src/editor-contract.ts +171 -171
  214. package/src/editor-registry.grid.test.ts +144 -144
  215. package/src/editor-registry.ts +122 -122
  216. package/src/export-data-api.test.ts +126 -126
  217. package/src/export-format.test.ts +107 -107
  218. package/src/export-format.ts +601 -601
  219. package/src/filter-operators.ts +160 -160
  220. package/src/filtering/excel-filters.ts +325 -325
  221. package/src/flex-render.ts +3 -3
  222. package/src/form-field.ts +127 -127
  223. package/src/grid-icons.test.ts +46 -0
  224. package/src/grid-icons.ts +184 -0
  225. package/src/group-display.test.ts +167 -167
  226. package/src/group-display.ts +200 -200
  227. package/src/headless.ts +87 -87
  228. package/src/icon-overrides.grid.test.ts +188 -0
  229. package/src/icon-seam.test.ts +100 -0
  230. package/src/index.ts +19 -0
  231. package/src/js-scroller.svelte.ts +173 -173
  232. package/src/keyboard-handlers.ts +270 -270
  233. package/src/keyboard.test.ts +59 -59
  234. package/src/keyboard.ts +97 -97
  235. package/src/list-nav.test.ts +49 -49
  236. package/src/list-nav.ts +29 -29
  237. package/src/list-option.test.ts +56 -56
  238. package/src/list-option.ts +179 -179
  239. package/src/menus.ts +597 -597
  240. package/src/merge-objects.ts +48 -48
  241. package/src/overlays.test.ts +90 -90
  242. package/src/positioning.ts +268 -268
  243. package/src/render-component.ts +28 -28
  244. package/src/row-drag.test.ts +401 -401
  245. package/src/row-drag.ts +419 -419
  246. package/src/row-resize.test.ts +524 -524
  247. package/src/row-resize.ts +228 -228
  248. package/src/scheduler-ical.ts +181 -181
  249. package/src/scheduler-model.test.ts +562 -562
  250. package/src/scheduler-model.ts +873 -873
  251. package/src/selection.test.ts +885 -885
  252. package/src/server-data-source.test.ts +383 -383
  253. package/src/server-data-source.ts +469 -469
  254. package/src/sparkline.test.ts +68 -68
  255. package/src/sparkline.ts +169 -169
  256. package/src/spreadsheet.test.ts +488 -488
  257. package/src/spreadsheet.ts +312 -312
  258. package/src/static-functions.ts +11 -11
  259. package/src/subscribe.ts +38 -38
  260. package/src/summaries.ts +113 -113
  261. package/src/svgrid-wrapper.types.ts +563 -563
  262. package/src/svgrid.async-editor-options.test.ts +273 -273
  263. package/src/svgrid.auto-row-height.test.ts +204 -204
  264. package/src/svgrid.behavior.test.ts +910 -910
  265. package/src/svgrid.charting.test.ts +654 -534
  266. package/src/svgrid.comments-autocomplete.test.ts +127 -127
  267. package/src/svgrid.context-menu.test.ts +147 -147
  268. package/src/svgrid.features.test.ts +157 -157
  269. package/src/svgrid.filter-depth.test.ts +163 -163
  270. package/src/svgrid.filter-menu-listbox.svelte.test.ts +382 -377
  271. package/src/svgrid.filter-menu-scroll.test.ts +112 -112
  272. package/src/svgrid.grand-total.test.ts +188 -188
  273. package/src/svgrid.group-display-mode.test.ts +171 -171
  274. package/src/svgrid.group-footers.test.ts +121 -121
  275. package/src/svgrid.group-pagination.test.ts +153 -153
  276. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  277. package/src/svgrid.tree-data.test.ts +186 -186
  278. package/src/svgrid.wrapper.test.ts +63 -63
  279. package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
  280. package/src/test-setup.ts +62 -62
  281. package/src/themes/index.ts +288 -288
  282. package/src/toast-store.svelte.ts +250 -250
  283. package/src/toast-store.test.ts +147 -147
  284. package/src/tree-row-model.test.ts +168 -168
  285. package/src/ui-buttons.test.ts +144 -144
  286. package/src/ui-inputs.test.ts +118 -118
  287. package/src/ui-localization.test.ts +113 -113
  288. package/src/ui-range.test.ts +70 -70
  289. package/src/ui-selection.test.ts +155 -155
  290. package/src/ui-tier1.test.ts +142 -142
  291. package/src/virtual.test.ts +88 -88
  292. package/src/virtualization/column-virtualizer.test.ts +27 -27
  293. package/src/virtualization/column-virtualizer.ts +30 -30
  294. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  295. package/src/virtualization/types.ts +30 -30
  296. package/src/virtualization/virtualizer.test.ts +47 -47
  297. package/src/virtualization/virtualizer.ts +322 -322
  298. package/dist/cdn/GridMenus-DMihUtma.js +0 -600
  299. package/dist/cdn/GridMenus-nmNDj1a3.js +0 -601
  300. package/dist/cdn/SvGridChart-Bs2GIR2Q.js +0 -1202
  301. package/dist/cdn/SvGridChart-CwhFz7GV.js +0 -1203
  302. package/dist/cdn/SvGridChartPanel-1WXuStzM.js +0 -561
  303. package/dist/cdn/SvGridChartPanel-e5_nqNP9.js +0 -585
  304. 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&trade; and sv-grid&trade; 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&trade; and sv-grid&trade; are trademarks of jQWidgets Ltd; the license covers the code only, not
221
+ the name or logo.