@svgrid/grid 2.6.22 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (331) hide show
  1. package/CHANGELOG.md +88 -88
  2. package/README.md +199 -199
  3. package/dist/FlexRender.svelte +96 -96
  4. package/dist/GridFooter.svelte +181 -181
  5. package/dist/GridMenus.svelte +184 -6
  6. package/dist/SvAutoComplete.svelte +169 -165
  7. package/dist/SvAvatar.svelte +75 -75
  8. package/dist/SvCalendar.svelte +503 -503
  9. package/dist/SvCarousel.svelte +141 -141
  10. package/dist/SvCheckBox.svelte +102 -102
  11. package/dist/SvCircularProgress.svelte +109 -109
  12. package/dist/SvColorInput.svelte +181 -181
  13. package/dist/SvComboBox.svelte +279 -275
  14. package/dist/SvContextMenu.svelte +116 -116
  15. package/dist/SvCountryInput.svelte +163 -163
  16. package/dist/SvDateRangeInput.svelte +25 -3
  17. package/dist/SvDrawer.svelte +254 -254
  18. package/dist/SvDropDownList.svelte +378 -374
  19. package/dist/SvDurationInput.svelte +126 -126
  20. package/dist/SvField.svelte +293 -293
  21. package/dist/SvForm.svelte +437 -437
  22. package/dist/SvGrid.controller.svelte.d.ts +48 -1
  23. package/dist/SvGrid.controller.svelte.js +214 -52
  24. package/dist/SvGrid.css +221 -0
  25. package/dist/SvGrid.helpers.d.ts +55 -0
  26. package/dist/SvGrid.helpers.js +83 -0
  27. package/dist/SvGrid.svelte +145 -0
  28. package/dist/SvGrid.types.d.ts +105 -0
  29. package/dist/SvGridCellEditor.svelte +744 -662
  30. package/dist/SvGridChart.svelte +1716 -1716
  31. package/dist/SvGridChartPanel.svelte +485 -485
  32. package/dist/SvGridChartView.svelte +70 -70
  33. package/dist/SvGridDropdown.svelte +728 -728
  34. package/dist/SvGridSelect.svelte +270 -266
  35. package/dist/SvGridSelect.svelte.d.ts +1 -1
  36. package/dist/SvGroupCell.svelte +116 -116
  37. package/dist/SvListBox.svelte +334 -326
  38. package/dist/SvMaskedInput.svelte +122 -122
  39. package/dist/SvMenu.svelte +124 -124
  40. package/dist/SvMenuList.svelte +146 -146
  41. package/dist/SvMultiSelect.svelte +293 -289
  42. package/dist/SvMultiSelect.svelte.d.ts +1 -1
  43. package/dist/SvNumberInput.svelte +172 -168
  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/SvRichCell.svelte +125 -0
  53. package/dist/SvRichCell.svelte.d.ts +15 -0
  54. package/dist/SvRichText.svelte +211 -211
  55. package/dist/SvRowGroupPanel.svelte +170 -170
  56. package/dist/SvScrollArea.svelte +61 -61
  57. package/dist/SvSlider.svelte +203 -203
  58. package/dist/SvSwitchButton.svelte +108 -108
  59. package/dist/SvTagsInput.svelte +115 -115
  60. package/dist/SvTextArea.svelte +5 -1
  61. package/dist/SvTextInput.svelte +147 -147
  62. package/dist/SvTimePicker.svelte +245 -245
  63. package/dist/SvToaster.svelte +159 -159
  64. package/dist/SvToggleButton.svelte +85 -85
  65. package/dist/SvTooltip.svelte +161 -161
  66. package/dist/SvTour.svelte +208 -208
  67. package/dist/SvTree.svelte +444 -444
  68. package/dist/SvTreeSelect.svelte +239 -235
  69. package/dist/SvTreeSelect.svelte.d.ts +1 -1
  70. package/dist/builtin-editors.d.ts +2 -2
  71. package/dist/builtin-editors.js +19 -3
  72. package/dist/cdn/GridMenus-C4oLsJyj.js +600 -0
  73. package/dist/cdn/GridMenus-yEivjNwl.js +601 -0
  74. package/dist/cdn/SvDateRangeInput-Bh0A0JkF.js +199 -0
  75. package/dist/cdn/SvDateRangeInput-DflbiP7N.js +198 -0
  76. package/dist/cdn/SvDateTimePicker-BWwpfB_o.js +812 -0
  77. package/dist/cdn/SvDateTimePicker-Bivn8dAP.js +816 -0
  78. package/dist/cdn/SvGridCellEditor-AXL8cHGO.js +550 -0
  79. package/dist/cdn/SvGridCellEditor-Ba7rY3eu.js +549 -0
  80. package/dist/cdn/{SvGridChart-BwVos976.js → SvGridChart-Bs2GIR2Q.js} +1 -1
  81. package/dist/cdn/{SvGridChart-BEJmNNx9.js → SvGridChart-CwhFz7GV.js} +1 -1
  82. package/dist/cdn/{SvGridChartPanel-BOknOkrP.js → SvGridChartPanel-1WXuStzM.js} +1 -1
  83. package/dist/cdn/{SvGridChartPanel-D2PjII4O.js → SvGridChartPanel-e5_nqNP9.js} +1 -1
  84. package/dist/cdn/{SvGridChartView-00LPUHL1.js → SvGridChartView-SmPW10dI.js} +1 -1
  85. package/dist/cdn/{SvGridChartView-BhUEJ5ki.js → SvGridChartView-eSPuJE6g.js} +1 -1
  86. package/dist/cdn/{SvGridDropdown-D0VdjeR8.js → SvGridDropdown-B1ZcLpgs.js} +1 -1
  87. package/dist/cdn/{SvGridDropdown-D13MtJ2j.js → SvGridDropdown-CtdbHcIS.js} +1 -1
  88. package/dist/cdn/date-format-CcP1tafP.js +1395 -0
  89. package/dist/cdn/date-format-DZT7T1wf.js +1393 -0
  90. package/dist/cdn/{editor-registry-CiI0xlKg.js → editor-registry-BhgE3S84.js} +51 -25
  91. package/dist/cdn/{src-C9Hihx1W.js → src-COC0vnpg.js} +7233 -6701
  92. package/dist/cdn/{src-D1lXwq1l.js → src-pYGV2rMR.js} +5747 -5215
  93. package/dist/cdn/svgrid.js +15 -13
  94. package/dist/cdn/svgrid.svelte-external.js +15 -13
  95. package/dist/cell-values.d.ts +16 -0
  96. package/dist/cell-values.js +28 -0
  97. package/dist/chart-export.js +8 -8
  98. package/dist/clipboard.d.ts +22 -0
  99. package/dist/clipboard.js +405 -27
  100. package/dist/editing.js +12 -7
  101. package/dist/editors/cell-editors.d.ts +11 -0
  102. package/dist/editors/cell-editors.js +18 -1
  103. package/dist/grid-messages.d.ts +15 -0
  104. package/dist/grid-messages.js +15 -0
  105. package/dist/index.d.ts +4 -0
  106. package/dist/index.js +4 -0
  107. package/dist/list-option.d.ts +6 -0
  108. package/dist/menus.js +40 -7
  109. package/dist/sanitize-html.d.ts +37 -0
  110. package/dist/sanitize-html.js +234 -0
  111. package/dist/selection-bar-view.svelte.d.ts +25 -0
  112. package/dist/selection-bar-view.svelte.js +13 -0
  113. package/dist/selection.d.ts +2 -1
  114. package/dist/selection.js +129 -13
  115. package/package.json +11 -11
  116. package/src/FlexRender.svelte +96 -96
  117. package/src/GridFooter.svelte +181 -181
  118. package/src/GridMenus.svelte +184 -6
  119. package/src/SvAutoComplete.svelte +169 -165
  120. package/src/SvAvatar.svelte +75 -75
  121. package/src/SvCalendar.svelte +503 -503
  122. package/src/SvCalendar.test.ts +226 -226
  123. package/src/SvCarousel.svelte +141 -141
  124. package/src/SvCheckBox.svelte +102 -102
  125. package/src/SvCircularProgress.svelte +109 -109
  126. package/src/SvColorInput.svelte +181 -181
  127. package/src/SvComboBox.svelte +279 -275
  128. package/src/SvContextMenu.svelte +116 -116
  129. package/src/SvCountryInput.svelte +163 -163
  130. package/src/SvDateRangeInput.svelte +25 -3
  131. package/src/SvDrawer.svelte +254 -254
  132. package/src/SvDropDownList.svelte +378 -374
  133. package/src/SvDurationInput.svelte +126 -126
  134. package/src/SvField.svelte +293 -293
  135. package/src/SvForm.svelte +437 -437
  136. package/src/SvForm.test.ts +411 -411
  137. package/src/SvGrid.controller.svelte.ts +251 -61
  138. package/src/SvGrid.css +221 -0
  139. package/src/SvGrid.helpers.ts +87 -0
  140. package/src/SvGrid.svelte +145 -0
  141. package/src/SvGrid.types.ts +2092 -1980
  142. package/src/SvGridCellEditor.svelte +744 -662
  143. package/src/SvGridChart.svelte +1716 -1716
  144. package/src/SvGridChartPanel.svelte +485 -485
  145. package/src/SvGridChartView.svelte +70 -70
  146. package/src/SvGridDropdown.svelte +728 -728
  147. package/src/SvGridSelect.svelte +270 -266
  148. package/src/SvGroupCell.svelte +116 -116
  149. package/src/SvListBox.svelte +334 -326
  150. package/src/SvMaskedInput.svelte +122 -122
  151. package/src/SvMenu.svelte +124 -124
  152. package/src/SvMenu.test.ts +97 -97
  153. package/src/SvMenuList.svelte +146 -146
  154. package/src/SvMultiSelect.svelte +293 -289
  155. package/src/SvNumberInput.svelte +172 -168
  156. package/src/SvOtpInput.svelte +158 -158
  157. package/src/SvPasswordInput.svelte +151 -151
  158. package/src/SvPhoneInput.svelte +133 -133
  159. package/src/SvPopover.svelte +197 -197
  160. package/src/SvProgress.svelte +116 -116
  161. package/src/SvRadioGroup.svelte +107 -107
  162. package/src/SvRating.svelte +112 -112
  163. package/src/SvResult.svelte +73 -73
  164. package/src/SvRichCell.svelte +125 -0
  165. package/src/SvRichText.svelte +211 -211
  166. package/src/SvRowGroupPanel.svelte +170 -170
  167. package/src/SvScrollArea.svelte +61 -61
  168. package/src/SvSlider.svelte +203 -203
  169. package/src/SvSwitchButton.svelte +108 -108
  170. package/src/SvTagsInput.svelte +115 -115
  171. package/src/SvTextArea.svelte +5 -1
  172. package/src/SvTextInput.svelte +147 -147
  173. package/src/SvTimePicker.svelte +245 -245
  174. package/src/SvToaster.svelte +159 -159
  175. package/src/SvToaster.test.ts +95 -95
  176. package/src/SvToggleButton.svelte +85 -85
  177. package/src/SvTooltip.svelte +161 -161
  178. package/src/SvTour.svelte +208 -208
  179. package/src/SvTree.svelte +444 -444
  180. package/src/SvTreeSelect.svelte +239 -235
  181. package/src/a11y/dismissable.test.ts +119 -119
  182. package/src/a11y/dismissable.ts +114 -114
  183. package/src/a11y.contract.test.ts +49 -49
  184. package/src/a11y.test.ts +59 -59
  185. package/src/a11y.ts +61 -61
  186. package/src/ai.test.ts +502 -502
  187. package/src/ai.ts +1419 -1419
  188. package/src/build-api.coverage.test.ts +633 -633
  189. package/src/build-api.ts +846 -846
  190. package/src/builtin-editors.grid.test.ts +83 -83
  191. package/src/builtin-editors.test.ts +18 -1
  192. package/src/builtin-editors.ts +19 -3
  193. package/src/cell-formatting.ts +171 -171
  194. package/src/cell-render.test.ts +513 -513
  195. package/src/cell-render.ts +496 -496
  196. package/src/cell-values.ts +148 -118
  197. package/src/chart-export.ts +202 -202
  198. package/src/chart-view.svelte.ts +36 -36
  199. package/src/chart.ts +2321 -2321
  200. package/src/clipboard.test.ts +93 -20
  201. package/src/clipboard.ts +433 -33
  202. package/src/collaboration.test.ts +104 -104
  203. package/src/collaboration.ts +167 -167
  204. package/src/column-groups.ts +78 -78
  205. package/src/core.performance.test.ts +30 -30
  206. package/src/core.ts +1865 -1865
  207. package/src/createAutocomplete.svelte.ts +132 -132
  208. package/src/createCombobox.svelte.ts +191 -191
  209. package/src/createCountryInput.svelte.ts +157 -157
  210. package/src/createDropdownList.svelte.ts +168 -168
  211. package/src/createForm.svelte.ts +386 -386
  212. package/src/createGrid.svelte.ts +42 -42
  213. package/src/createGrid.test.ts +10 -10
  214. package/src/createGridState.svelte.ts +17 -17
  215. package/src/createListbox.svelte.ts +250 -250
  216. package/src/createMenu.svelte.ts +224 -224
  217. package/src/createPopoverSelect.svelte.ts +213 -213
  218. package/src/createSlider.svelte.ts +191 -191
  219. package/src/createTooltip.svelte.ts +144 -144
  220. package/src/createTree.svelte.ts +322 -322
  221. package/src/date-string-column.test.ts +87 -0
  222. package/src/datetime/date-core.ts +206 -206
  223. package/src/datetime/date-restrict.ts +61 -61
  224. package/src/datetime/timezone.ts +135 -135
  225. package/src/dock-manager-model.ts +596 -596
  226. package/src/dock-model.ts +374 -374
  227. package/src/editing.test.ts +974 -949
  228. package/src/editing.ts +609 -606
  229. package/src/editor-block-prop.test.ts +132 -0
  230. package/src/editor-contract.ts +171 -171
  231. package/src/editor-registry.grid.test.ts +144 -144
  232. package/src/editor-registry.ts +122 -122
  233. package/src/editors/cell-editors.ts +27 -1
  234. package/src/export-data-api.test.ts +126 -126
  235. package/src/export-format.test.ts +107 -107
  236. package/src/export-format.ts +601 -601
  237. package/src/filter-operators.ts +160 -160
  238. package/src/filtering/excel-filters.ts +325 -325
  239. package/src/flex-render.ts +3 -3
  240. package/src/form-field.ts +127 -127
  241. package/src/grid-messages.ts +34 -0
  242. package/src/group-display.test.ts +167 -167
  243. package/src/group-display.ts +200 -200
  244. package/src/headless.ts +87 -87
  245. package/src/index.ts +13 -0
  246. package/src/js-scroller.svelte.ts +173 -173
  247. package/src/keyboard-handlers.ts +270 -270
  248. package/src/keyboard.test.ts +59 -59
  249. package/src/keyboard.ts +97 -97
  250. package/src/list-nav.test.ts +49 -49
  251. package/src/list-nav.ts +29 -29
  252. package/src/list-option.test.ts +56 -56
  253. package/src/list-option.ts +179 -173
  254. package/src/menus.test.ts +43 -0
  255. package/src/menus.ts +597 -567
  256. package/src/merge-objects.ts +48 -48
  257. package/src/move-cells.test.ts +850 -0
  258. package/src/number-editor-literal.test.ts +84 -0
  259. package/src/number-editor.grid.test.ts +160 -0
  260. package/src/overlays.test.ts +90 -90
  261. package/src/positioning.ts +268 -268
  262. package/src/render-component.ts +28 -28
  263. package/src/row-drag-touch.ts +211 -211
  264. package/src/row-drag.test.ts +353 -353
  265. package/src/row-drag.ts +415 -415
  266. package/src/row-resize.test.ts +524 -524
  267. package/src/row-resize.ts +228 -228
  268. package/src/sanitize-html.test.ts +182 -0
  269. package/src/sanitize-html.ts +235 -0
  270. package/src/scheduler-ical.ts +181 -181
  271. package/src/scheduler-model.test.ts +562 -562
  272. package/src/scheduler-model.ts +873 -873
  273. package/src/selection-bar-view.svelte.ts +36 -0
  274. package/src/selection.test.ts +900 -743
  275. package/src/selection.ts +131 -13
  276. package/src/server-data-source.test.ts +383 -383
  277. package/src/server-data-source.ts +469 -469
  278. package/src/sparkline.test.ts +68 -68
  279. package/src/sparkline.ts +169 -169
  280. package/src/spreadsheet.test.ts +488 -488
  281. package/src/spreadsheet.ts +312 -312
  282. package/src/static-functions.ts +11 -11
  283. package/src/subscribe.ts +38 -38
  284. package/src/summaries.ts +113 -113
  285. package/src/svgrid-wrapper.types.ts +563 -563
  286. package/src/svgrid.async-editor-options.test.ts +273 -273
  287. package/src/svgrid.auto-row-height.test.ts +204 -204
  288. package/src/svgrid.behavior.test.ts +910 -910
  289. package/src/svgrid.charting.test.ts +534 -534
  290. package/src/svgrid.comments-autocomplete.test.ts +127 -127
  291. package/src/svgrid.context-menu.test.ts +147 -147
  292. package/src/svgrid.features.test.ts +157 -157
  293. package/src/svgrid.filter-depth.test.ts +163 -163
  294. package/src/svgrid.filter-menu-listbox.svelte.test.ts +377 -331
  295. package/src/svgrid.filter-menu-scroll.test.ts +112 -112
  296. package/src/svgrid.grand-total.test.ts +188 -188
  297. package/src/svgrid.group-display-mode.test.ts +171 -171
  298. package/src/svgrid.group-footers.test.ts +121 -121
  299. package/src/svgrid.group-pagination.test.ts +153 -153
  300. package/src/svgrid.in-suggest-snapshot.svelte.test.ts +91 -0
  301. package/src/svgrid.menu-scroll-close.test.ts +204 -0
  302. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  303. package/src/svgrid.selection-bar-seam.test.ts +185 -0
  304. package/src/svgrid.tree-data.test.ts +186 -186
  305. package/src/svgrid.upsell-license.test.ts +117 -0
  306. package/src/svgrid.wrapper.test.ts +63 -63
  307. package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
  308. package/src/test-setup.ts +62 -62
  309. package/src/themes/index.ts +288 -288
  310. package/src/toast-store.svelte.ts +250 -250
  311. package/src/toast-store.test.ts +147 -147
  312. package/src/tree-row-model.test.ts +168 -168
  313. package/src/ui-buttons.test.ts +144 -144
  314. package/src/ui-inputs.test.ts +118 -118
  315. package/src/ui-localization.test.ts +113 -113
  316. package/src/ui-range.test.ts +70 -70
  317. package/src/ui-selection.test.ts +155 -155
  318. package/src/ui-tier1.test.ts +142 -142
  319. package/src/virtual.test.ts +88 -88
  320. package/src/virtualization/column-virtualizer.test.ts +27 -27
  321. package/src/virtualization/column-virtualizer.ts +30 -30
  322. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  323. package/src/virtualization/types.ts +30 -30
  324. package/src/virtualization/virtualizer.test.ts +47 -47
  325. package/src/virtualization/virtualizer.ts +322 -322
  326. package/dist/cdn/GridMenus-BuoBPqxx.js +0 -493
  327. package/dist/cdn/GridMenus-n4llxoOI.js +0 -494
  328. package/dist/cdn/SvDateTimePicker-CHnUkWcH.js +0 -2206
  329. package/dist/cdn/SvDateTimePicker-CRQH_U7E.js +0 -2201
  330. package/dist/cdn/SvGridCellEditor-BGUCzuPB.js +0 -523
  331. package/dist/cdn/SvGridCellEditor-G8IMWIws.js +0 -522
package/CHANGELOG.md CHANGED
@@ -318,91 +318,91 @@ _2026-07-07_
318
318
 
319
319
  <!-- build-changelog: hand-written entries below this line -->
320
320
 
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.
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.
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.