@svgrid/grid 2.6.15 → 2.6.17

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 (449) hide show
  1. package/CHANGELOG.md +346 -346
  2. package/README.md +199 -199
  3. package/dist/DockNodeView.svelte.d.ts +1 -1
  4. package/dist/DockPopoutHost.svelte.d.ts +1 -1
  5. package/dist/FlexRender.svelte +96 -96
  6. package/dist/FlexRender.svelte.d.ts +1 -1
  7. package/dist/GridFooter.svelte +181 -178
  8. package/dist/GridFooter.svelte.d.ts +3 -3
  9. package/dist/GridMenus.svelte +705 -705
  10. package/dist/GridMenus.svelte.d.ts +3 -3
  11. package/dist/SvAccordion.svelte.d.ts +3 -3
  12. package/dist/SvAutoComplete.svelte +165 -165
  13. package/dist/SvAutoComplete.svelte.d.ts +2 -2
  14. package/dist/SvAvatar.svelte +75 -75
  15. package/dist/SvBreadcrumb.svelte.d.ts +2 -2
  16. package/dist/SvButtonGroup.svelte.d.ts +3 -3
  17. package/dist/SvCalendar.svelte +503 -503
  18. package/dist/SvCalendar.svelte.d.ts +7 -7
  19. package/dist/SvCarousel.svelte +141 -141
  20. package/dist/SvCarousel.svelte.d.ts +1 -1
  21. package/dist/SvCheckBox.svelte +102 -102
  22. package/dist/SvCheckBox.svelte.d.ts +1 -1
  23. package/dist/SvCircularProgress.svelte +109 -109
  24. package/dist/SvColorInput.svelte +181 -181
  25. package/dist/SvColorInput.svelte.d.ts +1 -1
  26. package/dist/SvComboBox.svelte +275 -275
  27. package/dist/SvComboBox.svelte.d.ts +2 -2
  28. package/dist/SvCommand.svelte.d.ts +2 -2
  29. package/dist/SvContextMenu.svelte +116 -116
  30. package/dist/SvCountryInput.svelte +163 -163
  31. package/dist/SvCountryInput.svelte.d.ts +1 -1
  32. package/dist/SvDateRangeInput.svelte.d.ts +3 -3
  33. package/dist/SvDateTimePicker.svelte.d.ts +4 -4
  34. package/dist/SvDockLayout.svelte.d.ts +2 -2
  35. package/dist/SvDockManager.svelte.d.ts +2 -2
  36. package/dist/SvDrawer.svelte +254 -254
  37. package/dist/SvDropDownList.svelte +374 -374
  38. package/dist/SvDropDownList.svelte.d.ts +2 -2
  39. package/dist/SvDurationInput.svelte +126 -126
  40. package/dist/SvDurationInput.svelte.d.ts +1 -1
  41. package/dist/SvField.svelte +293 -293
  42. package/dist/SvField.svelte.d.ts +1 -1
  43. package/dist/SvFileUpload.svelte.d.ts +3 -3
  44. package/dist/SvForm.svelte +437 -437
  45. package/dist/SvForm.svelte.d.ts +4 -4
  46. package/dist/SvGauge.svelte.d.ts +1 -1
  47. package/dist/SvGrid.controller.svelte.d.ts +28 -28
  48. package/dist/SvGrid.controller.svelte.js +117 -45
  49. package/dist/SvGrid.css +2896 -2856
  50. package/dist/SvGrid.helpers.d.ts +2 -2
  51. package/dist/SvGrid.svelte +2956 -2956
  52. package/dist/SvGrid.svelte.d.ts +3 -3
  53. package/dist/SvGrid.types.d.ts +28 -7
  54. package/dist/SvGridCellEditor.svelte +662 -662
  55. package/dist/SvGridCellEditor.svelte.d.ts +2 -2
  56. package/dist/SvGridChart.svelte +1716 -1716
  57. package/dist/SvGridChart.svelte.d.ts +1 -1
  58. package/dist/SvGridChartPanel.svelte +485 -485
  59. package/dist/SvGridChartPanel.svelte.d.ts +2 -2
  60. package/dist/SvGridChartView.svelte +70 -70
  61. package/dist/SvGridChartView.svelte.d.ts +1 -1
  62. package/dist/SvGridDropdown.svelte +728 -728
  63. package/dist/SvGridDropdown.svelte.d.ts +1 -1
  64. package/dist/SvGridSelect.svelte +266 -266
  65. package/dist/SvGridSelect.svelte.d.ts +4 -4
  66. package/dist/SvGroupCell.svelte +116 -116
  67. package/dist/SvGroupCell.svelte.d.ts +1 -1
  68. package/dist/SvHoverCard.svelte.d.ts +1 -1
  69. package/dist/SvListBox.svelte +326 -326
  70. package/dist/SvListBox.svelte.d.ts +2 -2
  71. package/dist/SvMaskedInput.svelte +122 -122
  72. package/dist/SvMaskedInput.svelte.d.ts +1 -1
  73. package/dist/SvMenu.svelte +124 -124
  74. package/dist/SvMenu.svelte.d.ts +1 -1
  75. package/dist/SvMenuList.svelte +146 -146
  76. package/dist/SvMenuList.svelte.d.ts +3 -3
  77. package/dist/SvMenubar.svelte.d.ts +3 -3
  78. package/dist/SvMultiSelect.svelte +289 -289
  79. package/dist/SvMultiSelect.svelte.d.ts +3 -3
  80. package/dist/SvNavPane.svelte.d.ts +1 -1
  81. package/dist/SvNumberInput.svelte +168 -168
  82. package/dist/SvNumberInput.svelte.d.ts +1 -1
  83. package/dist/SvOtpInput.svelte +158 -158
  84. package/dist/SvOtpInput.svelte.d.ts +1 -1
  85. package/dist/SvPasswordInput.svelte +151 -151
  86. package/dist/SvPasswordInput.svelte.d.ts +1 -1
  87. package/dist/SvPhoneInput.svelte +133 -133
  88. package/dist/SvPhoneInput.svelte.d.ts +2 -2
  89. package/dist/SvPopconfirm.svelte.d.ts +1 -1
  90. package/dist/SvPopover.svelte +197 -197
  91. package/dist/SvPopover.svelte.d.ts +1 -1
  92. package/dist/SvProgress.svelte +116 -116
  93. package/dist/SvRadioGroup.svelte +107 -107
  94. package/dist/SvRadioGroup.svelte.d.ts +3 -3
  95. package/dist/SvRating.svelte +112 -112
  96. package/dist/SvRating.svelte.d.ts +1 -1
  97. package/dist/SvResult.svelte +73 -73
  98. package/dist/SvRichText.svelte +211 -211
  99. package/dist/SvRowGroupPanel.svelte +170 -170
  100. package/dist/SvScrollArea.svelte +61 -61
  101. package/dist/SvSegmented.svelte.d.ts +3 -3
  102. package/dist/SvSlider.svelte +203 -203
  103. package/dist/SvSlider.svelte.d.ts +1 -1
  104. package/dist/SvSparkline.svelte.d.ts +1 -1
  105. package/dist/SvSplitter.svelte.d.ts +3 -3
  106. package/dist/SvStepper.svelte.d.ts +2 -2
  107. package/dist/SvSwitchButton.svelte +108 -108
  108. package/dist/SvSwitchButton.svelte.d.ts +1 -1
  109. package/dist/SvTabs.svelte.d.ts +3 -3
  110. package/dist/SvTagsInput.svelte +115 -115
  111. package/dist/SvTagsInput.svelte.d.ts +1 -1
  112. package/dist/SvTextArea.svelte.d.ts +1 -1
  113. package/dist/SvTextInput.svelte +147 -147
  114. package/dist/SvTextInput.svelte.d.ts +1 -1
  115. package/dist/SvTimePicker.svelte +245 -245
  116. package/dist/SvTimePicker.svelte.d.ts +3 -3
  117. package/dist/SvTimeline.svelte.d.ts +2 -2
  118. package/dist/SvToaster.svelte +159 -159
  119. package/dist/SvToggleButton.svelte +85 -85
  120. package/dist/SvToggleButton.svelte.d.ts +1 -1
  121. package/dist/SvTooltip.svelte +161 -161
  122. package/dist/SvTooltip.svelte.d.ts +1 -1
  123. package/dist/SvTour.svelte +208 -208
  124. package/dist/SvTour.svelte.d.ts +3 -3
  125. package/dist/SvTree.svelte +444 -444
  126. package/dist/SvTree.svelte.d.ts +3 -3
  127. package/dist/SvTreeSelect.svelte +235 -235
  128. package/dist/SvTreeSelect.svelte.d.ts +3 -3
  129. package/dist/advanced-filter.svelte.d.ts +1 -1
  130. package/dist/ai.d.ts +1 -1
  131. package/dist/ai.js +1 -1
  132. package/dist/build-api.d.ts +2 -2
  133. package/dist/build-api.js +8 -8
  134. package/dist/builtin-editors.js +1 -1
  135. package/dist/cdn/{GridMenus-CPdy5dxw.js → GridMenus-3kKYmYOE.js} +2 -2
  136. package/dist/cdn/{GridMenus-BLajq_RP.js → GridMenus-BcDiwQ9U.js} +2 -2
  137. package/dist/cdn/{SvDateTimePicker-CHnUkWcH.js → SvDateTimePicker-DSUhIta8.js} +2 -2
  138. package/dist/cdn/{SvDateTimePicker-CRQH_U7E.js → SvDateTimePicker-h9kPyszT.js} +2 -2
  139. package/dist/cdn/{SvGridCellEditor-BGUCzuPB.js → SvGridCellEditor-DkyQO6FV.js} +1 -1
  140. package/dist/cdn/{SvGridCellEditor-G8IMWIws.js → SvGridCellEditor-JpJSRhDx.js} +1 -1
  141. package/dist/cdn/{SvGridChart-BwVos976.js → SvGridChart-Bs2GIR2Q.js} +1 -1
  142. package/dist/cdn/{SvGridChart-BEJmNNx9.js → SvGridChart-CwhFz7GV.js} +1 -1
  143. package/dist/cdn/{SvGridChartPanel-BOknOkrP.js → SvGridChartPanel-1WXuStzM.js} +1 -1
  144. package/dist/cdn/{SvGridChartPanel-D2PjII4O.js → SvGridChartPanel-e5_nqNP9.js} +1 -1
  145. package/dist/cdn/{SvGridChartView-00LPUHL1.js → SvGridChartView-SmPW10dI.js} +1 -1
  146. package/dist/cdn/{SvGridChartView-BhUEJ5ki.js → SvGridChartView-eSPuJE6g.js} +1 -1
  147. package/dist/cdn/{SvGridDropdown-D0VdjeR8.js → SvGridDropdown-B1ZcLpgs.js} +1 -1
  148. package/dist/cdn/{SvGridDropdown-D13MtJ2j.js → SvGridDropdown-CtdbHcIS.js} +1 -1
  149. package/dist/cdn/{src-ogpR-lHu.js → src-D79V6bCA.js} +298 -296
  150. package/dist/cdn/{src-CKpl94Cx.js → src-DMZZVVFd.js} +297 -295
  151. package/dist/cdn/svgrid.js +6 -6
  152. package/dist/cdn/svgrid.svelte-external.js +6 -6
  153. package/dist/cell-render.d.ts +3 -3
  154. package/dist/cell-render.js +6 -6
  155. package/dist/cell-values.d.ts +1 -1
  156. package/dist/cell-values.js +1 -1
  157. package/dist/chart-export.d.ts +1 -1
  158. package/dist/chart-export.js +8 -8
  159. package/dist/clipboard.d.ts +2 -2
  160. package/dist/clipboard.js +5 -5
  161. package/dist/column-groups.js +1 -1
  162. package/dist/columns.d.ts +2 -2
  163. package/dist/columns.js +1 -1
  164. package/dist/core.d.ts +1 -1
  165. package/dist/core.js +1 -1
  166. package/dist/createAutocomplete.svelte.d.ts +1 -1
  167. package/dist/createAutocomplete.svelte.js +2 -2
  168. package/dist/createButtonGroup.svelte.js +1 -1
  169. package/dist/createCalendar.svelte.d.ts +4 -4
  170. package/dist/createCalendar.svelte.js +4 -4
  171. package/dist/createCarousel.svelte.d.ts +1 -1
  172. package/dist/createCheckbox.svelte.js +1 -1
  173. package/dist/createColorInput.svelte.js +1 -1
  174. package/dist/createCombobox.svelte.d.ts +1 -1
  175. package/dist/createCombobox.svelte.js +2 -2
  176. package/dist/createCommand.svelte.d.ts +1 -1
  177. package/dist/createCommand.svelte.js +2 -2
  178. package/dist/createCountryInput.svelte.d.ts +1 -1
  179. package/dist/createCountryInput.svelte.js +2 -2
  180. package/dist/createDateTimePicker.svelte.d.ts +1 -1
  181. package/dist/createDateTimePicker.svelte.js +3 -3
  182. package/dist/createDropdownList.svelte.d.ts +1 -1
  183. package/dist/createDropdownList.svelte.js +2 -2
  184. package/dist/createFileUpload.svelte.js +1 -1
  185. package/dist/createForm.svelte.d.ts +1 -1
  186. package/dist/createForm.svelte.js +2 -2
  187. package/dist/createGrid.svelte.d.ts +1 -1
  188. package/dist/createGrid.svelte.js +1 -1
  189. package/dist/createGridState.svelte.d.ts +1 -1
  190. package/dist/createListbox.svelte.d.ts +1 -1
  191. package/dist/createListbox.svelte.js +2 -2
  192. package/dist/createMaskedInput.svelte.js +2 -2
  193. package/dist/createMenu.svelte.d.ts +2 -2
  194. package/dist/createMenu.svelte.js +2 -2
  195. package/dist/createNumberInput.svelte.js +1 -1
  196. package/dist/createOverlay.svelte.js +3 -3
  197. package/dist/createPagination.d.ts +1 -1
  198. package/dist/createPagination.js +1 -1
  199. package/dist/createPasswordInput.svelte.js +1 -1
  200. package/dist/createPhoneInput.svelte.js +3 -3
  201. package/dist/createPopoverSelect.svelte.d.ts +1 -1
  202. package/dist/createPopoverSelect.svelte.js +3 -3
  203. package/dist/createRadioGroup.svelte.js +1 -1
  204. package/dist/createRating.svelte.js +1 -1
  205. package/dist/createSlider.svelte.js +1 -1
  206. package/dist/createSwitch.svelte.js +1 -1
  207. package/dist/createTabs.svelte.d.ts +1 -1
  208. package/dist/createTagsInput.svelte.js +1 -1
  209. package/dist/createToggle.svelte.js +1 -1
  210. package/dist/createTooltip.svelte.js +1 -1
  211. package/dist/createTree.svelte.d.ts +1 -1
  212. package/dist/datetime/date-restrict.d.ts +1 -1
  213. package/dist/datetime/date-restrict.js +1 -1
  214. package/dist/datetime/date-selection.js +1 -1
  215. package/dist/dock-context.d.ts +1 -1
  216. package/dist/dock-manager-model.d.ts +1 -1
  217. package/dist/dock-manager-model.js +1 -1
  218. package/dist/dock-popout.d.ts +1 -1
  219. package/dist/dock-popout.js +1 -1
  220. package/dist/editing.d.ts +2 -2
  221. package/dist/editing.js +5 -5
  222. package/dist/editor-registry.d.ts +1 -1
  223. package/dist/editors/cell-editors.js +1 -1
  224. package/dist/export-format.d.ts +2 -2
  225. package/dist/export-format.js +2 -2
  226. package/dist/export-provider.d.ts +1 -1
  227. package/dist/facet-buckets.d.ts +1 -1
  228. package/dist/facet-buckets.js +1 -1
  229. package/dist/features.d.ts +2 -2
  230. package/dist/features.js +2 -2
  231. package/dist/filter-operators.d.ts +2 -2
  232. package/dist/filter-operators.js +1 -1
  233. package/dist/form-field.d.ts +1 -1
  234. package/dist/grid-messages.js +1 -1
  235. package/dist/headless.d.ts +11 -4
  236. package/dist/headless.js +11 -4
  237. package/dist/index.d.ts +120 -120
  238. package/dist/index.js +111 -111
  239. package/dist/keyboard-handlers.d.ts +2 -2
  240. package/dist/keyboard-handlers.js +2 -2
  241. package/dist/keyboard.d.ts +1 -1
  242. package/dist/menus.d.ts +3 -3
  243. package/dist/menus.js +3 -3
  244. package/dist/named-views.d.ts +1 -1
  245. package/dist/pivot-view.svelte.d.ts +1 -1
  246. package/dist/recurrence.d.ts +1 -1
  247. package/dist/recurrence.js +1 -1
  248. package/dist/row-drag.js +1 -1
  249. package/dist/scheduler-ical.d.ts +1 -1
  250. package/dist/scheduler-model.d.ts +3 -3
  251. package/dist/scheduler-model.js +2 -2
  252. package/dist/scroll-sync.d.ts +2 -2
  253. package/dist/scroll-sync.js +1 -1
  254. package/dist/selection.d.ts +2 -2
  255. package/dist/selection.js +3 -3
  256. package/dist/server-data-source.d.ts +1 -1
  257. package/dist/server-group-model.d.ts +1 -1
  258. package/dist/static-functions.d.ts +1 -1
  259. package/dist/static-functions.js +1 -1
  260. package/dist/subscribe.d.ts +1 -1
  261. package/dist/summaries.d.ts +2 -2
  262. package/dist/summaries.js +3 -3
  263. package/dist/svgrid-wrapper.types.d.ts +5 -5
  264. package/dist/themes/index.d.ts +3 -1
  265. package/dist/themes/index.js +4 -2
  266. package/dist/toast-store.svelte.js +1 -1
  267. package/dist/tree-select.d.ts +1 -1
  268. package/dist/virtualization/column-virtualizer.d.ts +3 -3
  269. package/dist/virtualization/column-virtualizer.js +1 -1
  270. package/dist/virtualization/svelte-virtualizer.svelte.d.ts +3 -3
  271. package/dist/virtualization/svelte-virtualizer.svelte.js +1 -1
  272. package/dist/virtualization/virtualizer.d.ts +1 -1
  273. package/package.json +23 -11
  274. package/src/FlexRender.svelte +96 -96
  275. package/src/GridFooter.svelte +181 -178
  276. package/src/GridMenus.svelte +705 -705
  277. package/src/SvAutoComplete.svelte +165 -165
  278. package/src/SvAvatar.svelte +75 -75
  279. package/src/SvCalendar.svelte +503 -503
  280. package/src/SvCalendar.test.ts +226 -226
  281. package/src/SvCarousel.svelte +141 -141
  282. package/src/SvCheckBox.svelte +102 -102
  283. package/src/SvCircularProgress.svelte +109 -109
  284. package/src/SvColorInput.svelte +181 -181
  285. package/src/SvComboBox.svelte +275 -275
  286. package/src/SvContextMenu.svelte +116 -116
  287. package/src/SvCountryInput.svelte +163 -163
  288. package/src/SvDrawer.svelte +254 -254
  289. package/src/SvDropDownList.svelte +374 -374
  290. package/src/SvDurationInput.svelte +126 -126
  291. package/src/SvField.svelte +293 -293
  292. package/src/SvForm.svelte +437 -437
  293. package/src/SvForm.test.ts +411 -411
  294. package/src/SvGrid.controller.svelte.ts +3974 -3898
  295. package/src/SvGrid.css +2896 -2856
  296. package/src/SvGrid.svelte +2956 -2956
  297. package/src/SvGrid.types.ts +1790 -1769
  298. package/src/SvGridCellEditor.svelte +662 -662
  299. package/src/SvGridChart.svelte +1716 -1716
  300. package/src/SvGridChartPanel.svelte +485 -485
  301. package/src/SvGridChartView.svelte +70 -70
  302. package/src/SvGridDropdown.svelte +728 -728
  303. package/src/SvGridSelect.svelte +266 -266
  304. package/src/SvGroupCell.svelte +116 -116
  305. package/src/SvListBox.svelte +326 -326
  306. package/src/SvMaskedInput.svelte +122 -122
  307. package/src/SvMenu.svelte +124 -124
  308. package/src/SvMenu.test.ts +97 -97
  309. package/src/SvMenuList.svelte +146 -146
  310. package/src/SvMultiSelect.svelte +289 -289
  311. package/src/SvNumberInput.svelte +168 -168
  312. package/src/SvOtpInput.svelte +158 -158
  313. package/src/SvPasswordInput.svelte +151 -151
  314. package/src/SvPhoneInput.svelte +133 -133
  315. package/src/SvPopover.svelte +197 -197
  316. package/src/SvProgress.svelte +116 -116
  317. package/src/SvRadioGroup.svelte +107 -107
  318. package/src/SvRating.svelte +112 -112
  319. package/src/SvResult.svelte +73 -73
  320. package/src/SvRichText.svelte +211 -211
  321. package/src/SvRowGroupPanel.svelte +170 -170
  322. package/src/SvScrollArea.svelte +61 -61
  323. package/src/SvSlider.svelte +203 -203
  324. package/src/SvSwitchButton.svelte +108 -108
  325. package/src/SvTagsInput.svelte +115 -115
  326. package/src/SvTextInput.svelte +147 -147
  327. package/src/SvTimePicker.svelte +245 -245
  328. package/src/SvToaster.svelte +159 -159
  329. package/src/SvToaster.test.ts +95 -95
  330. package/src/SvToggleButton.svelte +85 -85
  331. package/src/SvTooltip.svelte +161 -161
  332. package/src/SvTour.svelte +208 -208
  333. package/src/SvTree.svelte +444 -444
  334. package/src/SvTreeSelect.svelte +235 -235
  335. package/src/a11y/dismissable.test.ts +119 -119
  336. package/src/a11y/dismissable.ts +114 -114
  337. package/src/a11y.contract.test.ts +49 -49
  338. package/src/a11y.test.ts +59 -59
  339. package/src/a11y.ts +61 -61
  340. package/src/ai.test.ts +502 -502
  341. package/src/ai.ts +1391 -1391
  342. package/src/build-api.coverage.test.ts +633 -633
  343. package/src/build-api.ts +846 -846
  344. package/src/builtin-editors.grid.test.ts +83 -83
  345. package/src/cell-formatting.ts +169 -169
  346. package/src/cell-render.test.ts +513 -513
  347. package/src/cell-render.ts +496 -496
  348. package/src/cell-values.ts +118 -118
  349. package/src/chart-export.ts +201 -201
  350. package/src/chart-view.svelte.ts +36 -36
  351. package/src/chart.ts +2295 -2295
  352. package/src/collaboration.test.ts +104 -104
  353. package/src/collaboration.ts +167 -167
  354. package/src/core.performance.test.ts +30 -30
  355. package/src/core.ts +1261 -1261
  356. package/src/createAutocomplete.svelte.ts +132 -132
  357. package/src/createCombobox.svelte.ts +191 -191
  358. package/src/createCountryInput.svelte.ts +157 -157
  359. package/src/createDropdownList.svelte.ts +168 -168
  360. package/src/createForm.svelte.ts +386 -386
  361. package/src/createGrid.svelte.ts +42 -42
  362. package/src/createGrid.test.ts +10 -10
  363. package/src/createGridState.svelte.ts +17 -17
  364. package/src/createListbox.svelte.ts +250 -250
  365. package/src/createMenu.svelte.ts +224 -224
  366. package/src/createPopoverSelect.svelte.ts +213 -213
  367. package/src/createSlider.svelte.ts +191 -191
  368. package/src/createTooltip.svelte.ts +144 -144
  369. package/src/createTree.svelte.ts +319 -319
  370. package/src/editing.test.ts +949 -949
  371. package/src/editing.ts +606 -606
  372. package/src/editor-contract.ts +170 -170
  373. package/src/editor-registry.grid.test.ts +144 -144
  374. package/src/editor-registry.ts +122 -122
  375. package/src/export-data-api.test.ts +126 -126
  376. package/src/export-format.test.ts +107 -107
  377. package/src/export-format.ts +601 -601
  378. package/src/filter-operators.ts +160 -160
  379. package/src/flex-render.ts +3 -3
  380. package/src/form-field.ts +127 -127
  381. package/src/group-display.test.ts +167 -167
  382. package/src/group-display.ts +200 -200
  383. package/src/headless.ts +87 -80
  384. package/src/index.ts +754 -754
  385. package/src/js-scroller.svelte.ts +173 -173
  386. package/src/keyboard-handlers.ts +270 -270
  387. package/src/keyboard.test.ts +59 -59
  388. package/src/keyboard.ts +97 -97
  389. package/src/list-nav.test.ts +49 -49
  390. package/src/list-nav.ts +29 -29
  391. package/src/list-option.test.ts +56 -56
  392. package/src/list-option.ts +172 -172
  393. package/src/menus.ts +567 -567
  394. package/src/merge-objects.ts +48 -48
  395. package/src/overlays.test.ts +90 -90
  396. package/src/render-component.ts +28 -28
  397. package/src/row-drag-touch.ts +211 -211
  398. package/src/row-drag.test.ts +353 -353
  399. package/src/row-drag.ts +415 -415
  400. package/src/row-resize.ts +210 -210
  401. package/src/scheduler-model.test.ts +562 -562
  402. package/src/scheduler-model.ts +872 -872
  403. package/src/selection.test.ts +754 -754
  404. package/src/selection.ts +491 -491
  405. package/src/server-data-source.test.ts +383 -383
  406. package/src/server-data-source.ts +469 -469
  407. package/src/sparkline.test.ts +68 -68
  408. package/src/sparkline.ts +169 -169
  409. package/src/spreadsheet.test.ts +488 -488
  410. package/src/spreadsheet.ts +312 -312
  411. package/src/static-functions.ts +11 -11
  412. package/src/subscribe.ts +38 -38
  413. package/src/svgrid-wrapper.types.ts +558 -558
  414. package/src/svgrid.async-editor-options.test.ts +273 -273
  415. package/src/svgrid.auto-row-height.test.ts +204 -204
  416. package/src/svgrid.behavior.test.ts +912 -704
  417. package/src/svgrid.charting.test.ts +534 -534
  418. package/src/svgrid.comments-autocomplete.test.ts +127 -127
  419. package/src/svgrid.context-menu.test.ts +147 -147
  420. package/src/svgrid.features.test.ts +157 -157
  421. package/src/svgrid.filter-depth.test.ts +163 -163
  422. package/src/svgrid.filter-menu-listbox.svelte.test.ts +331 -331
  423. package/src/svgrid.filter-menu-scroll.test.ts +112 -112
  424. package/src/svgrid.grand-total.test.ts +188 -188
  425. package/src/svgrid.group-display-mode.test.ts +171 -171
  426. package/src/svgrid.group-footers.test.ts +121 -121
  427. package/src/svgrid.group-pagination.test.ts +153 -153
  428. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  429. package/src/svgrid.tree-data.test.ts +186 -186
  430. package/src/svgrid.wrapper.test.ts +63 -63
  431. package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
  432. package/src/test-setup.ts +62 -62
  433. package/src/themes/index.ts +288 -286
  434. package/src/toast-store.svelte.ts +246 -246
  435. package/src/toast-store.test.ts +147 -147
  436. package/src/tree-row-model.test.ts +168 -168
  437. package/src/ui-buttons.test.ts +144 -144
  438. package/src/ui-inputs.test.ts +118 -118
  439. package/src/ui-localization.test.ts +113 -113
  440. package/src/ui-range.test.ts +70 -70
  441. package/src/ui-selection.test.ts +155 -155
  442. package/src/ui-tier1.test.ts +142 -142
  443. package/src/virtual.test.ts +88 -88
  444. package/src/virtualization/column-virtualizer.test.ts +27 -27
  445. package/src/virtualization/column-virtualizer.ts +30 -30
  446. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  447. package/src/virtualization/types.ts +30 -30
  448. package/src/virtualization/virtualizer.test.ts +47 -47
  449. package/src/virtualization/virtualizer.ts +322 -322
@@ -1,1769 +1,1790 @@
1
- // Type definitions extracted from SvGrid.svelte. These are compile-time
2
- // only - moving them out keeps the component's <script> focused on logic.
3
- import type { Snippet } from "svelte";
4
- import type {
5
- CellEditorType,
6
- ColumnDef,
7
- RowData,
8
- SvGridApi,
9
- TableFeatures,
10
- } from "./index";
11
- import type { ConditionalFormat } from "./conditional-formatting";
12
- import type { GroupDisplayType } from "./group-display";
13
- import type { GridMessages } from "./grid-messages";
14
- import type { GridPivotConfig } from "./pivot-view.svelte";
15
- import type { GridPredicateExpr } from "./filtering/predicate-expr";
16
- import type { MenuItem } from "./SvMenuList.svelte";
17
-
18
- /** The calendar views the scheduler can render. {@link SchedulerConfig}. The
19
- * `timeline*` views are horizontal: time runs left→right and resources are
20
- * rows (a single "All" row without `resourceField`). */
21
- export type SchedulerView =
22
- | "month"
23
- | "week"
24
- | "day"
25
- | "agenda"
26
- | "timelineDay"
27
- | "timelineWeek"
28
- | "timelineMonth"
29
- | "timelineYear";
30
-
31
- /**
32
- * How overlapping ("colliding") time-grid events are laid out:
33
- * - `split` - every collision divides the column width evenly (default).
34
- * - `cap` - show up to `maxColumns` columns; the rest collapse into a
35
- * clickable `+N more` overflow tile.
36
- * - `stack` - overlapping events overlap with a horizontal offset + z-order
37
- * instead of shrinking, so each stays readable (hover to raise).
38
- */
39
- export type SchedulerCollisionMode = "split" | "cap" | "stack";
40
-
41
- /** A scheduler resource - a person / room / machine an event can be assigned to. */
42
- export type SchedulerResource = {
43
- id: string;
44
- title?: string;
45
- color?: string;
46
- /**
47
- * This resource's own working windows (hours), optionally per weekday - e.g. a
48
- * doctor available Mon/Wed/Fri 9-13 and Tue/Thu 14-18. Overrides the global
49
- * `businessHours` / `nonWorkingDays` for this resource's columns: time outside
50
- * every matching window is shaded, and (with `restrictToBusinessHours`)
51
- * non-bookable. A weekday with no matching window is a full day off.
52
- */
53
- availability?: ReadonlyArray<{ days?: ReadonlyArray<number>; start: number; end: number }>;
54
- /**
55
- * Per-date overrides to this resource's weekly `availability` - a specific day
56
- * off (`off: true`, e.g. vacation) or custom hours (`windows`) for that one
57
- * date. Matched by calendar date; takes precedence over `availability` for the
58
- * matching day.
59
- */
60
- dateOverrides?: ReadonlyArray<{
61
- date: Date | number | string;
62
- off?: boolean;
63
- windows?: ReadonlyArray<{ start: number; end: number }>;
64
- }>;
65
- };
66
- import type {
67
- ChartType,
68
- ChartSpec,
69
- ChartAnnotation,
70
- ChartReferenceLine,
71
- ChartValueFormat,
72
- } from "./chart";
73
-
74
- /** One aggregated bucket returned by a server-side `getAggregate`. */
75
- export type ChartAggregateBucket = { category: string; series?: string; value: number };
76
- /** The request a server-side `getAggregate` receives (whole-dataset charting). */
77
- export type ChartAggregateRequest = {
78
- dimension: string | undefined;
79
- measure: string | null;
80
- series?: string;
81
- reduce: "sum" | "avg" | "count";
82
- filterModel: Record<string, unknown>;
83
- };
84
-
85
- /**
86
- * Config for the built-in `charting` prop. All fields optional and additive;
87
- * `charting={true}` is the zero-config form. Column references are column
88
- * field names / ids.
89
- */
90
- export type ChartingConfig<TData extends RowData = RowData> = {
91
- /** Right-side drawer (default) or bottom dock. */
92
- position?: "bottom" | "right";
93
- /** Open the panel on first render. */
94
- defaultOpen?: boolean;
95
- /** Initial chart type. */
96
- defaultType?: ChartType;
97
- /** Docked-bottom height (px). */
98
- height?: number;
99
- /** Drawer width (px). */
100
- width?: number;
101
- /** Clicking a chart category filters the grid on the charted dimension. */
102
- crossFilter?: boolean;
103
- /** Group-by column. */
104
- dimension?: string;
105
- /** Split-by column: one series per distinct value. */
106
- series?: string;
107
- /** Measure column, or several for a multi-series chart. */
108
- measures?: string | string[];
109
- reduce?: "sum" | "avg" | "count";
110
- stacked?: boolean;
111
- stacked100?: boolean;
112
- /** Per-series-label type override (combo). */
113
- seriesTypes?: Record<string, "bar" | "line" | "area">;
114
- /** Per-series-label axis override (dual axis). */
115
- seriesAxes?: Record<string, "left" | "right">;
116
- referenceLines?: ChartReferenceLine[];
117
- averageLine?: boolean;
118
- trend?: "sma" | "ema" | "linear";
119
- annotations?: ChartAnnotation[];
120
- yScale?: "linear" | "log";
121
- timeAxis?: boolean;
122
- valueFormat?: "number" | "currency" | "percent" | "compact";
123
- smooth?: boolean;
124
- orientation?: "vertical" | "horizontal";
125
- donut?: number | boolean;
126
- palette?: string[];
127
- patternFallback?: boolean;
128
- topN?: number;
129
- otherLabel?: string;
130
- sort?: "value-desc" | "value-asc" | "category" | "none";
131
- dataLabels?: boolean;
132
- zoom?: boolean;
133
- brush?: boolean;
134
- /** Show the chart's PNG/SVG export toolbar. */
135
- export?: boolean;
136
- /** Escape hatch: build a fully custom ChartSpec from the (scoped) rows. */
137
- buildSpec?: (rows: TData[]) => ChartSpec | null;
138
- /** Server-side aggregation: chart the whole dataset, not just loaded rows. */
139
- getAggregate?: (
140
- request: ChartAggregateRequest,
141
- ) => Promise<ReadonlyArray<ChartAggregateBucket>>;
142
- /** Bump to force a server-side refetch. */
143
- refreshKey?: unknown;
144
- };
145
-
146
- /**
147
- * The built-in card detail drawer. Set `board.drawer` (`true` for all fields,
148
- * or this object to customize) and opening a card shows a drawer with an
149
- * `SvForm` of its fields, rendered with the UI-kit editors.
150
- */
151
- export type BoardDrawerConfig<TData extends RowData = RowData> = {
152
- /** Fields to show, in order. Omit for every column that has a `field`. */
153
- fields?: ReadonlyArray<keyof TData & string>;
154
- /** Drawer title - a string or derived from the row. Defaults to the title field. */
155
- title?: string | ((row: TData) => string);
156
- /** Which edge the drawer opens from. Defaults to `'right'`. */
157
- side?: "right" | "left" | "top" | "bottom";
158
- /** Drawer size (any CSS length). Defaults to `'380px'`. */
159
- size?: string;
160
- /** Save button label. Defaults to `'Save'`. */
161
- submitLabel?: string;
162
- /** Form columns inside the drawer. Defaults to `1`. */
163
- columns?: number;
164
- };
165
-
166
- /** Board-native helpers passed to `board.cardMenu` for building context items. */
167
- export type BoardMenuContext<TData extends RowData = RowData> = {
168
- /** The board's lanes (id + title). */
169
- lanes: BoardLane[];
170
- /** Move this card to a lane (board-native; fires onCardMove). */
171
- moveTo: (laneId: string) => void;
172
- /** Open this card's editor (inline, or your `onCardEdit`). */
173
- edit: () => void;
174
- };
175
-
176
- /** Board-native helpers passed to `board.laneMenu` for building lane context items. */
177
- export type BoardLaneMenuContext<TData extends RowData = RowData> = {
178
- /** The lane's id. */
179
- laneId: string;
180
- /** The lane's current cards (this swimlane's, if any). */
181
- cards: TData[];
182
- /** Whether the lane is collapsed. */
183
- collapsed: boolean;
184
- /** Collapse / expand the lane (needs `collapsibleLanes`). */
185
- toggleCollapse: () => void;
186
- /** Add a card to the lane (fires `onCardAdd`). */
187
- addCard: (title?: string) => void;
188
- };
189
-
190
- /** The cell a context menu was opened on. Passed to every item's callbacks. */
191
- export type ContextMenuTarget<TData extends RowData = RowData> = {
192
- rowIndex: number;
193
- colIndex: number;
194
- columnId: string;
195
- /** Stable row id (from getRowId / row model), for keying notes etc. */
196
- rowId: string;
197
- row: TData | null;
198
- };
199
-
200
- /**
201
- * A context-menu entry. Either a built-in action key, the `"separator"`
202
- * divider, or a custom item. Built-in keys: `"copy" | "cut" | "paste" |
203
- * "clear" | "row_above" | "row_below" | "remove_row" | "remove_col" |
204
- * "chart"`. The `"chart"` item (chart the selected range) is only shown when
205
- * `charting` is enabled; it is appended to the default menu automatically.
206
- */
207
- export type ContextMenuItem<TData extends RowData = RowData> =
208
- | string
209
- | {
210
- key: string;
211
- label: string;
212
- /** Hide the item entirely for this target. */
213
- hidden?: (target: ContextMenuTarget<TData>) => boolean;
214
- /** Render the item greyed-out and non-clickable for this target. */
215
- disabled?: (target: ContextMenuTarget<TData>) => boolean;
216
- /** Invoked on click. The menu closes afterwards. */
217
- action: (target: ContextMenuTarget<TData>) => void;
218
- };
219
-
220
- /** A single Kanban lane (board column). {@link BoardConfig}. */
221
- export type BoardLane = {
222
- /** Lane id - equals the `groupBy` field value of the cards it holds. */
223
- id: string;
224
- /** Header title. Defaults to the id (or `(empty)` for a blank value). */
225
- title?: string;
226
- /** Accent color (any CSS color) for the lane header bar + card ring. */
227
- color?: string;
228
- /**
229
- * Soft max number of cards. When exceeded the lane header is flagged
230
- * over-limit. Enforcement/styling is an enterprise concern; the count is
231
- * always shown.
232
- */
233
- wipLimit?: number;
234
- };
235
-
236
- /** A checklist item inside a card. See {@link BoardConfig.subtasks}. */
237
- export type BoardSubtask = {
238
- id: string | number;
239
- title: string;
240
- done: boolean;
241
- };
242
-
243
- /** A comment on a card. See {@link BoardConfig.commentsField}. */
244
- export type BoardComment = {
245
- id: string | number;
246
- text: string;
247
- author?: string;
248
- /** Timestamp label (any string). */
249
- at?: string;
250
- };
251
-
252
- /**
253
- * The serializable board layout - the per-card position/edit overlay plus
254
- * collapsed lanes. Persisted by `board.persistKey` and passed to
255
- * `board.onLayoutChange`.
256
- */
257
- export type BoardLayout = {
258
- /** rowId -> lane id. */
259
- laneOf?: Record<string, string>;
260
- /** rowId -> sort order within its lane. */
261
- orderOf?: Record<string, number>;
262
- /** rowId -> swimlane id. */
263
- swimOf?: Record<string, string>;
264
- /** rowId -> edited field values. */
265
- edits?: Record<string, Record<string, unknown>>;
266
- /** lane id -> collapsed. */
267
- collapsed?: Record<string, boolean>;
268
- /** swimlane id -> collapsed. */
269
- collapsedSwim?: Record<string, boolean>;
270
- /** Explicit lane order (ids), when lanes have been drag-reordered. */
271
- laneOrder?: string[];
272
- /** rowId -> subtaskId -> done override. */
273
- subDone?: Record<string, Record<string, boolean>>;
274
- /** rowId -> subtasks added on the card. */
275
- subAdded?: Record<string, BoardSubtask[]>;
276
- };
277
-
278
- /** Emitted when a card's built-in editor is saved. */
279
- export type BoardCardCommitEvent<TData extends RowData = RowData> = {
280
- /** The edited row. */
281
- row: TData;
282
- /** Only the fields that changed, `{ field: newValue }`. */
283
- changes: Record<string, unknown>;
284
- /** The full set of edited field values. */
285
- values: Record<string, unknown>;
286
- };
287
-
288
- /** Emitted when a card is dragged to a new lane and/or position. */
289
- export type BoardCardMoveEvent<TData extends RowData = RowData> = {
290
- /** The dragged row. */
291
- row: TData;
292
- /** Lane the card came from. */
293
- fromLane: string;
294
- /** Lane the card was dropped on. */
295
- toLane: string;
296
- /** Insertion index within the destination lane. */
297
- toIndex: number;
298
- /** Swimlane the card came from (only when `swimlaneBy` is set). */
299
- fromSwimlane?: string;
300
- /** Swimlane the card was dropped on (only when `swimlaneBy` is set). */
301
- toSwimlane?: string;
302
- };
303
-
304
- /**
305
- * Turns the grid into a Kanban board. Set `board` and the grid renders its
306
- * rows as cards in horizontal lanes (bucketed by the `groupBy` field) instead
307
- * of a table. Dragging a card between lanes fires {@link BoardConfig.onCardMove}
308
- * where you reassign the `groupBy` field on your own data.
309
- */
310
- /**
311
- * Chart view of the grid. Setting the `chart` prop on `<SvGrid>` swaps the table
312
- * for a chart driven by the grid's FILTERED + SORTED rows - so the search box,
313
- * column filters and sort all flow through to the chart. Unlike the board and
314
- * scheduler views, the renderer is free: the grid lazy-loads a built-in
315
- * `SvChart` view unless a host overrides it via `registerChartView`.
316
- *
317
- * The config maps directly onto `rowsToChartSpec` - one row field for the
318
- * category axis, one or more for the value series (or a `series` field to pivot
319
- * one series per distinct value).
320
- *
321
- * ```svelte
322
- * <SvGrid {data} {columns}
323
- * chart={{ type: 'bar', category: 'month', value: 'revenue', reduce: 'sum' }} />
324
- * ```
325
- */
326
- export type ChartViewConfig<
327
- TFeatures extends TableFeatures = TableFeatures,
328
- TData extends RowData = RowData,
329
- > = {
330
- /** Chart type. Default `'bar'`. */
331
- type?: ChartType;
332
- /** Row field for the category (x) axis. */
333
- category: keyof TData & string;
334
- /** Row field(s) for the value (y) series. */
335
- value: (keyof TData & string) | Array<keyof TData & string>;
336
- /** Pivot dimension: one series per distinct value of this field. */
337
- series?: keyof TData & string;
338
- /** Aggregation when several rows share a category. Default `'sum'`. */
339
- reduce?: "sum" | "avg" | "count";
340
- /** Stack bar / area series instead of grouping them. */
341
- stacked?: boolean;
342
- /** Stack to 100% (implies `stacked`). */
343
- stacked100?: boolean;
344
- /** Order categories. Default: insertion order (value-desc when `topN` is set). */
345
- sort?: "value-desc" | "value-asc" | "category" | "none";
346
- /** Keep only the top N categories; bucket the rest into "Other". */
347
- topN?: number;
348
- /** Palette for series without an explicit colour. */
349
- palette?: string[];
350
- /** Number format for the value axis, tooltips and data labels. */
351
- valueFormat?: ChartValueFormat;
352
- /** Show the clickable legend. Default `true`. */
353
- legend?: boolean;
354
- /** Draw the value on each bar / point / slice. Default `false`. */
355
- dataLabels?: boolean;
356
- /** Show the search box above the chart (filters rows first). Default `true`. */
357
- searchable?: boolean;
358
- /** Placeholder for the search box. */
359
- searchPlaceholder?: string;
360
- };
361
-
362
- export type BoardConfig<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData> = {
363
- /** Field whose value buckets each row into a lane. */
364
- groupBy: keyof TData & string;
365
- /**
366
- * Explicit, ordered lanes. Omit to derive lanes from the distinct
367
- * `groupBy` values found in the data (first-seen order).
368
- */
369
- lanes?: ReadonlyArray<BoardLane>;
370
- /** Custom card body. Receives the row. Omit for the built-in default card. */
371
- card?: Snippet<[TData]>;
372
- /**
373
- * Fired when a card is dragged to a new lane/position. Update your data
374
- * here (reassign the `groupBy` field, and optionally reorder). Without it
375
- * the board is display-only.
376
- */
377
- onCardMove?: (event: BoardCardMoveEvent<TData>) => void;
378
- /**
379
- * Add-card affordance. A `+` in the lane header (or, with `composer`, a
380
- * type-a-title box at the bottom of the lane) fires this with the lane id
381
- * and - from the composer - the typed title.
382
- */
383
- onCardAdd?: (laneId: string, title?: string) => void;
384
- /**
385
- * Show a quick-add composer at the bottom of each lane (a "+ Add a card"
386
- * button that opens an inline title input; Enter calls `onCardAdd(lane,
387
- * title)`). Without it, `onCardAdd` shows a plain `+` in the header.
388
- */
389
- composer?: boolean;
390
- /**
391
- * Field holding a card's checklist of sub-tasks (`BoardSubtask[]`). The card
392
- * shows a progress chip + bar and expands to an inline checklist with a
393
- * quick-add. Toggles/adds run through an overlay (never mutating your data)
394
- * and fire the callbacks below.
395
- */
396
- subtasks?: keyof TData & string;
397
- /** Fired when a sub-task checkbox is toggled. */
398
- onSubtaskToggle?: (row: TData, subtaskId: string | number, done: boolean) => void;
399
- /** Fired when a sub-task is added from the card. */
400
- onSubtaskAdd?: (row: TData, title: string) => void;
401
- /**
402
- * Field holding label/tag strings (or `{ text, color }`) shown as chips on
403
- * the default card's badge row.
404
- */
405
- labelsField?: keyof TData & string;
406
- /** Field holding a due date (Date | ISO string); shown as a badge, red when overdue. */
407
- dueField?: keyof TData & string;
408
- /**
409
- * Field holding one or more assignee names (string | string[]); shown as
410
- * avatar(s) on the default card's badge row.
411
- */
412
- assigneesField?: keyof TData & string;
413
- /**
414
- * Enable the built-in card editor: double-click a card (or press F2 while
415
- * it is focused) to edit its fields inline. Fields are rendered from the
416
- * columns that declare an `editorType` (or all fields if none do). Ignored
417
- * when `onCardEdit` is set.
418
- */
419
- editable?: boolean;
420
- /**
421
- * Open your own editor instead of the built-in one. Called on double-click /
422
- * F2 with the row; you might open a drawer or route to a detail screen.
423
- */
424
- onCardEdit?: (row: TData) => void;
425
- /**
426
- * Built-in **detail drawer**: opening a card (double-click / F2) shows an
427
- * `SvDrawer` with an `SvForm` of its fields (kit editors). `true` = all
428
- * fields; pass a {@link BoardDrawerConfig} to pick a subset / customize.
429
- * Ignored when `onCardEdit` is set.
430
- */
431
- drawer?: boolean | BoardDrawerConfig<TData>;
432
- /** Fired when the built-in editor is saved. Persist / mirror the changes. */
433
- onCardCommit?: (event: BoardCardCommitEvent<TData>) => void;
434
- /** Field used as the card title. Defaults to the first column's field. */
435
- titleField?: keyof TData & string;
436
- /**
437
- * Column fields shown as label:value meta lines on the default card
438
- * (max 4). Defaults to the first few non-title, non-groupBy columns.
439
- */
440
- cardFields?: ReadonlyArray<keyof TData & string>;
441
- /**
442
- * Second grouping axis: split the board into horizontal **swimlanes** by
443
- * this field. Each swimlane band shows the full lane set with only its own
444
- * cards. Dragging a card into another band reassigns this field too.
445
- */
446
- swimlaneBy?: keyof TData & string;
447
- /** Let users collapse a swimlane band via its header chevron. */
448
- collapsibleSwimlanes?: boolean;
449
- /**
450
- * Field holding a card's comments - `BoardComment[]` (or plain strings, or a
451
- * number for a count only). Renders a comment-count badge that expands to a
452
- * thread; provide the callbacks below to let users write / delete comments.
453
- */
454
- commentsField?: keyof TData & string;
455
- /** Fired when a comment is added on the card; append it to your data. */
456
- onCommentAdd?: (row: TData, text: string) => void;
457
- /** Fired when a comment's delete button is pressed; remove it from your data. */
458
- onCommentDelete?: (row: TData, commentId: string | number) => void;
459
- /**
460
- * Field holding a card's attachments - an array or a number. Renders an
461
- * attachment-count badge on the default card.
462
- */
463
- attachmentsField?: keyof TData & string;
464
- /**
465
- * Field holding a cover colour (any CSS colour string) shown as a strip
466
- * across the top of the default card.
467
- */
468
- coverField?: keyof TData & string;
469
- /**
470
- * Enforce `wipLimit`: reject a drop / keyboard move that would push a lane
471
- * past its limit (the card snaps back). Off by default (the limit is a
472
- * soft, visual flag only).
473
- */
474
- enforceWip?: boolean;
475
- /** Let users collapse a lane to a slim strip by clicking its header. */
476
- collapsibleLanes?: boolean;
477
- /** Let users drag lane headers to reorder lanes (persisted with `persistKey`). */
478
- reorderableLanes?: boolean;
479
- /** Fired after a lane drag-reorder, with the new ordered lane ids. */
480
- onLaneReorder?: (orderedIds: string[]) => void;
481
- /**
482
- * Enable inline lane rename: double-click a lane title to edit it. Fires
483
- * with the lane id and new title - update your own lane config / data.
484
- */
485
- onLaneRename?: (laneId: string, title: string) => void;
486
- /**
487
- * Per-swimlane summary shown in the band header (e.g. a points/$ total or a
488
- * WIP count). Receives the swimlane's cards and its id; return a short string.
489
- */
490
- swimlaneSummary?: (rows: TData[], swimId: string) => string;
491
- /**
492
- * Right-click (or long-press) a card to open a context menu. Return the
493
- * menu items for that card; `ctx` gives board-native `moveTo(laneId)` and
494
- * `edit()` helpers plus the lane list. Return empty/undefined for no menu.
495
- */
496
- cardMenu?: (row: TData, ctx: BoardMenuContext<TData>) => ReadonlyArray<MenuItem> | undefined;
497
- /** Right-click a lane header for a lane context menu (rename / clear / add / collapse). */
498
- laneMenu?: (laneId: string, ctx: BoardLaneMenuContext<TData>) => ReadonlyArray<MenuItem> | undefined;
499
- /**
500
- * Truthy field marks a card as **blocked** (waiting on a dependency): a red
501
- * corner + a "Blocked" badge on the card. If the value is a non-empty string
502
- * it is used as the blocked **reason** (shown in the badge tooltip). A blocked
503
- * card is **locked from moving** (drag + keyboard) until it is unblocked - set
504
- * {@link BoardConfig.flagBlocksMoves} `false` for a purely visual flag.
505
- */
506
- flagField?: keyof TData & string;
507
- /** Whether a blocked (`flagField`) card is locked from moving. Defaults to `true`. */
508
- flagBlocksMoves?: boolean;
509
- /**
510
- * Field holding a created/started date (Date | ISO string); shown as a
511
- * relative **age** badge (e.g. `3d`).
512
- */
513
- ageField?: keyof TData & string;
514
- /**
515
- * Fields to expose as a **facet filter bar** above the board - a chip per
516
- * distinct value; selecting chips filters the visible cards.
517
- */
518
- facets?: ReadonlyArray<keyof TData & string>;
519
- /**
520
- * Enable card **multi-select**: click to select, Ctrl/Cmd-click to toggle,
521
- * and dragging a selected card moves the whole selection. Fires
522
- * `onSelectionChange`.
523
- */
524
- selectable?: boolean;
525
- /** Fired when the selection changes, with the selected rows. */
526
- onSelectionChange?: (rows: TData[]) => void;
527
- /**
528
- * Field holding a card's **child rows** (`TData[]`) - the card gets a
529
- * children count and expands to show them as nested mini-cards (epic ->
530
- * stories). Each child renders its title and, if present, its `groupBy` value.
531
- */
532
- childrenField?: keyof TData & string;
533
- /**
534
- * Optional per-lane summary shown in the lane header (e.g. a story-point or
535
- * dollar total). Receives the lane's cards (the current swimlane's, when
536
- * `swimlaneBy` is set) and the lane id; return a short string.
537
- */
538
- laneSummary?: (rows: TData[], laneId: string) => string;
539
- /** Show the built-in card search box (default `true`). */
540
- searchable?: boolean;
541
- /** Placeholder for the search box. Defaults to `"Search cards..."`. */
542
- searchPlaceholder?: string;
543
- /**
544
- * Virtualize each lane so only the cards in view are in the DOM - for boards
545
- * with thousands of cards per lane. Assumes roughly uniform card height; set
546
- * `cardHeight` to match your cards.
547
- */
548
- virtualized?: boolean;
549
- /** Estimated card height in px used by `virtualized` windowing (default 76). */
550
- cardHeight?: number;
551
- /**
552
- * Persist the board layout (card positions, edits, collapsed lanes) to
553
- * `localStorage` under this key, restored on load. Requires `getRowId` for
554
- * stable identity across reloads.
555
- */
556
- persistKey?: string;
557
- /** Called whenever the board layout changes, with the serializable state. */
558
- onLayoutChange?: (layout: BoardLayout) => void;
559
- };
560
-
561
- /**
562
- * The built-in event detail drawer for the scheduler. Set `scheduler.drawer`
563
- * (`true` for all fields, or this object) and clicking an event opens a drawer
564
- * with an `SvForm` of its fields. Mirrors {@link BoardDrawerConfig}.
565
- */
566
- export type SchedulerDrawerConfig<TData extends RowData = RowData> = {
567
- /** Fields to show, in order. Omit for every column that has a `field`. */
568
- fields?: ReadonlyArray<keyof TData & string>;
569
- /** Drawer title - a string or derived from the row. Defaults to the title field. */
570
- title?: string | ((row: TData) => string);
571
- /** Which edge the drawer opens from. Defaults to `'right'`. */
572
- side?: "right" | "left" | "top" | "bottom";
573
- /** Drawer size (any CSS length). Defaults to `'380px'`. */
574
- size?: string;
575
- /** Save button label. Defaults to `'Save'`. */
576
- submitLabel?: string;
577
- /** Form columns inside the drawer. Defaults to `1`. */
578
- columns?: number;
579
- };
580
-
581
- /** Emitted when an event is dragged to a new time (and/or resource). */
582
- export type SchedulerEventMoveEvent<TData extends RowData = RowData> = {
583
- /** The dragged row. */
584
- row: TData;
585
- /** New start / end after the move. */
586
- start: Date;
587
- end: Date;
588
- /** Whether the event is all-day after the move. */
589
- allDay: boolean;
590
- /** Resource it came from (only with `resourceField`). */
591
- fromResource?: string;
592
- /** Resource it was dropped on (only with `resourceField`). */
593
- toResource?: string;
594
- };
595
-
596
- /** Emitted when an event's start or end edge is dragged to resize it. */
597
- export type SchedulerEventResizeEvent<TData extends RowData = RowData> = {
598
- row: TData;
599
- start: Date;
600
- end: Date;
601
- };
602
-
603
- /**
604
- * A drag-selected range (see `rangeSelectable`). `start`/`end` are a single
605
- * CONTINUOUS datetime range - dragging across days makes it a longer span, not a
606
- * per-day rectangle. `days` / `resourceIds` list the days / resources the range
607
- * touched (for reference); `allDay` is true when the all-day row was dragged.
608
- */
609
- export type SchedulerRangeSelection = {
610
- start: Date;
611
- end: Date;
612
- allDay?: boolean;
613
- /** Every day the range touched (one entry for a within-a-day drag). */
614
- days: Date[];
615
- /** Every resource the range touched (empty without `resourceField`). */
616
- resourceIds: string[];
617
- };
618
-
619
- /** Emitted when an event's built-in editor/drawer is saved. */
620
- export type SchedulerEventCommitEvent<TData extends RowData = RowData> = {
621
- row: TData;
622
- /** Only the fields that changed, `{ field: newValue }`. */
623
- changes: Record<string, unknown>;
624
- /** The full set of edited field values. */
625
- values: Record<string, unknown>;
626
- };
627
-
628
- /**
629
- * One override of a single occurrence of a recurring event (stored in the row's
630
- * `recurrenceExceptionsField`). `occurrenceStart` identifies the occurrence (its
631
- * original start, like an iCal `RECURRENCE-ID`); `deleted` removes just that one,
632
- * otherwise the given fields override it. Times are the same ISO / Date shape you
633
- * store on the row.
634
- */
635
- export type SchedulerException = {
636
- occurrenceStart: string | number | Date;
637
- deleted?: boolean;
638
- start?: string | number | Date;
639
- end?: string | number | Date;
640
- title?: string;
641
- allDay?: boolean;
642
- /**
643
- * Per-occurrence overrides for ANY other field (e.g. attendees, calendar,
644
- * color, resource). Merged over the row for just this occurrence, so "This
645
- * event" can change fields beyond start / end / title / all-day.
646
- */
647
- fields?: Record<string, unknown>;
648
- };
649
-
650
- /** How a change to a recurring event should apply. */
651
- export type SchedulerEditScope = "occurrence" | "following" | "series";
652
-
653
- /**
654
- * Fired when a single occurrence of a recurring event is edited or deleted (the
655
- * user chose "This event"). Append/merge `exception` into the row's
656
- * `recurrenceExceptionsField`; for `deleted` it carries `{ deleted: true }`.
657
- */
658
- export type SchedulerOccurrenceChangeEvent<TData extends RowData = RowData> = {
659
- row: TData;
660
- /** The occurrence's original start (its identity within the series). */
661
- occurrenceStart: Date;
662
- /** The override to store (already in real-instant time). */
663
- exception: SchedulerException;
664
- /**
665
- * Which scope the user chose. `'occurrence'` (default): merge `exception` into
666
- * the row. `'following'` ("this and all following"): split the series - stop
667
- * the original series before `occurrenceStart` and start a NEW series at it
668
- * carrying `exception`'s start/end/deleted. `'series'` never reaches here (it
669
- * edits the base row directly). Handle `'following'` in your own data.
670
- */
671
- scope: SchedulerEditScope;
672
- };
673
-
674
- /**
675
- * Turns the grid into a calendar / scheduler. Set `scheduler` and the grid
676
- * renders its rows as events on a Month / Week / Day / Agenda calendar (bucketed
677
- * by time, and optionally split into per-resource columns) instead of a table.
678
- * Dragging an event fires {@link SchedulerConfig.onEventMove} where you reassign
679
- * the start / end (and resource) on your own data. Like the Kanban board, it is
680
- * a pure *view of the grid*: it renders the grid's filtered + sorted rows and
681
- * writes back only through callbacks, never mutating your data.
682
- */
683
- export type SchedulerConfig<
684
- TFeatures extends TableFeatures = TableFeatures,
685
- TData extends RowData = RowData,
686
- > = {
687
- /** Field holding each event's start (`Date` | epoch-ms | ISO string). Required. */
688
- startField: keyof TData & string;
689
- /** Field holding the end. Omit to use `defaultDurationMin` from the start. */
690
- endField?: keyof TData & string;
691
- /** Boolean field marking an event as all-day (rendered in the all-day row). */
692
- allDayField?: keyof TData & string;
693
- /** Field for the event title. Defaults to the first column's field. */
694
- titleField?: keyof TData & string;
695
- /** Field holding a per-event accent color (any CSS color). Else `color`. */
696
- colorField?: keyof TData & string;
697
- /** Fallback accent color for every event. */
698
- color?: string;
699
- /**
700
- * Field holding a SECONDARY accent color, rendered as a strip on the LEFT edge
701
- * of the event - distinct from the main `colorField`. Lets an event encode two
702
- * dimensions at once (e.g. main color = person, left strip = role).
703
- */
704
- secondaryColorField?: keyof TData & string;
705
- /**
706
- * Field holding a free/busy status that drives a distinct visual treatment
707
- * (Outlook-style): `'busy'` (default solid), `'free'` (hollow / outline),
708
- * `'tentative'` (hatched), `'oof'` / `'outOfOffice'` (distinct tint). Ties to
709
- * iCal `STATUS`. Unrecognised values render as busy.
710
- */
711
- statusField?: keyof TData & string;
712
- /**
713
- * Field holding minutes-before-start for a reminder. When set (and the event
714
- * is upcoming) the scheduler fires `onReminder` once as that lead time is
715
- * crossed - pair it with a toast. Ties to iCal `VALARM`.
716
- */
717
- reminderField?: keyof TData & string;
718
- /** Fired once when an event's reminder lead time is crossed (see `reminderField`). */
719
- onReminder?: (row: TData, minutesUntil: number) => void;
720
- /**
721
- * Field holding a {@link RecurrenceRule} (or array) - the row renders as one
722
- * event per matching day in view, keeping its time-of-day + duration.
723
- */
724
- recurrenceField?: keyof TData & string;
725
- /**
726
- * Field holding an array of {@link SchedulerException} - per-occurrence
727
- * overrides of a recurring event (a moved / edited / deleted single instance).
728
- * When set, editing a recurring occurrence offers "This event" vs "All events"
729
- * and "This event" fires {@link onOccurrenceChange}.
730
- */
731
- recurrenceExceptionsField?: keyof TData & string;
732
- /** Event length in minutes when a row has a start but no `endField`. Default 60. */
733
- defaultDurationMin?: number;
734
-
735
- /** Which views to offer in the toolbar. Default all four. */
736
- views?: ReadonlyArray<SchedulerView>;
737
- /** The view shown first. Default `'month'`. */
738
- initialView?: SchedulerView;
739
- /** The date the calendar opens on. Defaults to "today". */
740
- initialDate?: Date | number | string;
741
- /**
742
- * Controlled anchor date - when this changes the calendar navigates to it (a
743
- * mini date-picker or external "go to" can drive the view). Pair with
744
- * {@link onNavigate} for two-way sync.
745
- */
746
- date?: Date | number | string;
747
- /** Fired when the visible date changes (prev / next / today). */
748
- onNavigate?: (date: Date) => void;
749
- /** First day of the week, 0-6 (0 = Sunday). Default 0. */
750
- weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
751
- /** Time-grid slot size in minutes (week / day snap granularity). Default 30. */
752
- slotMinutes?: number;
753
- /**
754
- * Slot sizes (minutes) offered as a runtime picker in the Week / Day time-grid
755
- * ruler, e.g. `[60, 30, 15, 5]`. When set, a size selector appears in the
756
- * toolbar and the ruler subdivides accordingly; the active size starts at
757
- * `slotMinutes`. Omit to hide the picker (the ruler still uses `slotMinutes`).
758
- */
759
- slotSizes?: ReadonlyArray<number>;
760
- /** First / last hour shown in the time-grid band (0-24). Default 0..24. */
761
- dayStartHour?: number;
762
- dayEndHour?: number;
763
-
764
- // --- booking rules: working hours, non-working days, conflicts -------------
765
- /**
766
- * Working-hours window (hours, e.g. `{ start: 9, end: 17 }`). Time outside it
767
- * is shaded in the Week / Day time-grid. Visual only - see `disableConflicts`
768
- * to enforce.
769
- */
770
- businessHours?: { start: number; end: number };
771
- /** Weekday numbers (0 = Sun … 6 = Sat) shaded as non-working (e.g. `[0, 6]`). */
772
- nonWorkingDays?: ReadonlyArray<number>;
773
- /** Shade elapsed time on today's column (the past is "used up"). */
774
- shadeUntilNow?: boolean;
775
- /**
776
- * Enforce the shaded time: reject a drag / resize / create that lands outside
777
- * `businessHours` or on a `nonWorkingDays` day (snap back + flash). Without
778
- * this the shading is a visual hint only.
779
- */
780
- restrictToBusinessHours?: boolean;
781
- /**
782
- * Prevent double-booking: dragging / resizing / creating an event so it
783
- * overlaps another event **on the same resource** is rejected and reverted.
784
- */
785
- disableConflicts?: boolean;
786
- /**
787
- * Hard-blocked hour bands (e.g. a daily maintenance window `[{ start: 12, end: 13 }]`).
788
- * Unlike `businessHours` these are ALWAYS non-bookable (drop / create rejected,
789
- * no opt-in needed) and rendered as a distinct restricted (hatched) band.
790
- */
791
- restrictedHours?: ReadonlyArray<{ start: number; end: number }>;
792
- /** Specific calendar dates that are fully blocked (no bookings) - e.g. closures. */
793
- restrictedDates?: ReadonlyArray<Date | number | string>;
794
- /**
795
- * Highlighted dates (holidays, launches …) - a coloured strip + optional label
796
- * on that day's column / month cell. Decorative; does not block booking.
797
- */
798
- specialDates?: ReadonlyArray<{ date: Date | number | string; label?: string; color?: string }>;
799
- /** Earliest navigable / bookable date. Prev-nav stops here and creates are blocked before it. */
800
- minDate?: Date | number | string;
801
- /** Latest navigable / bookable date. Next-nav stops here and creates are blocked after it. */
802
- maxDate?: Date | number | string;
803
- /**
804
- * Cap concurrent events per resource at any moment: a drag / resize / create
805
- * that would make more than N events overlap on the same resource is rejected.
806
- */
807
- maxEventsPerSlot?: number;
808
- /**
809
- * Enable **undo / redo** of drag-move + resize with `Ctrl/Cmd+Z` and
810
- * `Ctrl/Cmd+Shift+Z` (or `Ctrl+Y`). The scheduler re-emits the move/resize
811
- * callbacks with the reversed values, so your data follows.
812
- */
813
- history?: boolean;
814
- /**
815
- * Show the current-time indicator - a line across today's column(s) in the
816
- * Week / Day time-grid and the Day timeline, tracking the local time. On by
817
- * default; set to `false` to hide it.
818
- */
819
- nowIndicator?: boolean;
820
- /**
821
- * IANA time zone (e.g. `'America/New_York'`) the whole calendar is shown in -
822
- * the hour ruler, event positions, day boundaries, all-day grouping and the
823
- * now-line. Defaults to the browser's local zone. Event `start`/`end` must be
824
- * instant-unambiguous (UTC / offset ISO or epoch ms) for this to be correct;
825
- * bare local strings are read as wall-clock in this zone.
826
- */
827
- timeZone?: string;
828
- /**
829
- * Extra read-only hour rulers for other zones (a "world clock"), shown left of
830
- * the primary ruler in the Week / Day time-grid. Each entry's `label` heads its
831
- * column (defaults to a short zone abbreviation).
832
- */
833
- secondaryTimeZones?: ReadonlyArray<{ id: string; label?: string }>;
834
- /**
835
- * How overlapping time-grid events are laid out. `split` (default) divides the
836
- * width evenly per collision; `cap` shows up to `maxColumns` then a clickable
837
- * `+N more` tile; `stack` overlaps them with an offset instead of shrinking.
838
- */
839
- collisionMode?: SchedulerCollisionMode;
840
- /** For `collisionMode: 'cap'`: max side-by-side columns before overflow (min 2). Default 3. */
841
- maxColumns?: number;
842
- /** How many days the agenda view spans. Default 30. */
843
- agendaDays?: number;
844
-
845
- /**
846
- * Field whose value groups events by resource (people, rooms, machines). In
847
- * the Week / Day time-grid the columns split into resource x day groups; a
848
- * resource filter/legend appears in every view. See {@link SchedulerResource}.
849
- */
850
- resourceField?: keyof TData & string;
851
- /** Explicit, ordered resources (with colors). Omit to derive from the data. */
852
- resources?: ReadonlyArray<SchedulerResource>;
853
- /**
854
- * Time-grid resource grouping order. `false` (default) groups by resource then
855
- * day (resource-major); `true` groups by day then resource (date-major), like
856
- * Smart's `groupByDate`. Only affects Week / Day when `resourceField` is set.
857
- */
858
- groupByDate?: boolean;
859
-
860
- /** Timeline views only: width (px) of the left resource-label gutter. Default 160. */
861
- resourceAreaWidth?: number;
862
- /** `timelineDay` tick size + move/resize snap, in minutes. Default = `slotMinutes`. */
863
- timelineSlotMinutes?: number;
864
- /** Timeline views only: height (px) of one event lane inside a resource row. Default 26. */
865
- timelineLaneHeight?: number;
866
-
867
- /** Enable drag-to-move and edge-resize. Without it the calendar is read-only. */
868
- editable?: boolean;
869
- /** Fired when an event is dragged to a new time / resource. */
870
- onEventMove?: (event: SchedulerEventMoveEvent<TData>) => void;
871
- /** Fired when an event edge is dragged to resize it. */
872
- onEventResize?: (event: SchedulerEventResizeEvent<TData>) => void;
873
- /**
874
- * Fired to create an event - double-clicking an empty slot, or confirming a
875
- * pending range when no {@link onRangeSelect} is set. `allDay` is `true` when
876
- * the slot / range is an all-day one (the all-day row, a month day cell, or a
877
- * multi-day timeline zoom), so the handler can set the `allDayField`.
878
- */
879
- onEventAdd?: (start: Date, end: Date, resourceId?: string, allDay?: boolean) => void;
880
- /**
881
- * Fired when the event's Delete button is used. Setting this shows a Delete
882
- * button in the detail drawer (and a `Delete` item is easy to add via
883
- * `eventMenu`). Remove the row from your data in the handler.
884
- */
885
- onEventDelete?: (row: TData) => void;
886
- /**
887
- * Fired when a single occurrence of a recurring event is moved / resized /
888
- * deleted with scope "This event". Merge `event.exception` into the row's
889
- * `recurrenceExceptionsField` array (keyed by `occurrenceStart`).
890
- */
891
- onOccurrenceChange?: (event: SchedulerOccurrenceChangeEvent<TData>) => void;
892
-
893
- /**
894
- * Selecting empty cells: click or drag across the time-grid / timeline to mark
895
- * a time range (and, across days / resources, a rectangle of cells). Arrow keys
896
- * move the selection and `Shift`+arrows extend it. Marking only *marks* the
897
- * range - it does NOT create anything. The event is created on an explicit
898
- * confirm: press `Enter`, or right-click the selection and choose "Add Event".
899
- * Confirming fires {@link onRangeSelect}, or falls back to `onEventAdd` for the
900
- * first cell; `Escape` cancels the marker.
901
- *
902
- * On by default; set to `false` to disable.
903
- */
904
- rangeSelectable?: boolean;
905
- /**
906
- * Fired when a pending cell range is confirmed with `Enter` or the "Add Event"
907
- * context menu (see {@link rangeSelectable}) - not on drag release.
908
- */
909
- onRangeSelect?: (selection: SchedulerRangeSelection) => void;
910
- /**
911
- * Multi-selecting existing events: Ctrl/Cmd-click toggles, Shift-click
912
- * range-selects; a plain click clears. Selected events move together when one
913
- * is dragged, and `Delete` removes them (via `onEventDelete`).
914
- *
915
- * On by default; set to `false` to disable.
916
- */
917
- eventSelectable?: boolean;
918
- /** Fired when the set of multi-selected events changes. */
919
- onEventSelectionChange?: (rows: TData[]) => void;
920
-
921
- /**
922
- * An "unscheduled" backlog list shown beside the Week / Day grid: drag an item
923
- * onto the calendar to schedule it. Each item is `{ id, title, durationMin?,
924
- * color? }`. Dropping fires {@link onSchedule} with the drop time + resource.
925
- */
926
- unscheduled?: ReadonlyArray<{ id: string; title: string; durationMin?: number; color?: string }>;
927
- /** Optional heading for the unscheduled backlog panel. Default "Unscheduled". */
928
- backlogTitle?: string;
929
- /** Fired when an unscheduled item is dropped on the grid - create an event from it. */
930
- onSchedule?: (item: { id: string; title: string; durationMin?: number; color?: string }, start: Date, resourceId?: string) => void;
931
- /**
932
- * Fired when an event is dragged OFF the calendar onto the backlog panel -
933
- * remove it from the schedule (and typically push it back to `unscheduled`).
934
- * Requires the backlog panel (an `unscheduled` list) to be visible.
935
- */
936
- onUnschedule?: (row: TData) => void;
937
-
938
- /** Custom event body. Receives the row. Omit for the built-in default (title). */
939
- event?: Snippet<[TData]>;
940
- /**
941
- * Hover tooltip for an event. Set a `Snippet<[TData]>` for custom content, or
942
- * `true` for the built-in tooltip (title + time + resource). Omit to disable.
943
- */
944
- tooltip?: boolean | Snippet<[TData]>;
945
- /** Delay (ms) before the hover tooltip opens. Default 400. */
946
- tooltipDelay?: number;
947
- /** Built-in detail drawer: `true` for all fields, or a config object. */
948
- drawer?: boolean | SchedulerDrawerConfig<TData>;
949
- /** Fired when the drawer / editor is saved. */
950
- onEventCommit?: (event: SchedulerEventCommitEvent<TData>) => void;
951
- /** Right-click menu for an event. Return items or `undefined` to suppress. */
952
- eventMenu?: (row: TData) => MenuItem[] | undefined;
953
-
954
- /** Show the search box (binds to the grid's global filter). Default `true`. */
955
- searchable?: boolean;
956
- searchPlaceholder?: string;
957
- };
958
-
959
- export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData> = {
960
- data: ReadonlyArray<TData>;
961
- columns: Array<ColumnDef<TFeatures, TData>>;
962
- /**
963
- * Kanban board mode. When set, the grid renders its rows as cards in
964
- * horizontal lanes (bucketed by `board.groupBy`) instead of a table. See
965
- * {@link BoardConfig}.
966
- */
967
- board?: BoardConfig<TFeatures, TData>;
968
- /**
969
- * Scheduler / calendar mode. When set, the grid renders its rows as events on
970
- * a Month / Week / Day / Agenda calendar instead of a table. See
971
- * {@link SchedulerConfig}.
972
- */
973
- scheduler?: SchedulerConfig<TFeatures, TData>;
974
- /**
975
- * Chart view. When set, the grid renders its FILTERED + SORTED rows as a chart
976
- * instead of a table (search / filters / sort flow through). Unlike board and
977
- * scheduler, the renderer is free - the grid lazy-loads a built-in `SvChart`
978
- * view, overridable via `registerChartView`. See {@link ChartViewConfig}.
979
- */
980
- chart?: ChartViewConfig<TFeatures, TData>;
981
- /**
982
- * Pivot mode. When set (and `pivotMode` is on), the grid renders its rows as a
983
- * pivot table in place - the same grid, aggregated across `pivot.rows` /
984
- * `pivot.cols` with nested column headers - instead of the flat table. The
985
- * pivot ENGINE ships in `@svgrid/enterprise`; call `enablePivot()` (or
986
- * `installEnterprise(api)`) to register it, otherwise an upsell note shows.
987
- * See {@link GridPivotConfig}.
988
- */
989
- pivot?: GridPivotConfig<TData>;
990
- /**
991
- * Whether pivot mode is currently active. Defaults to `true` when `pivot` is
992
- * set. Bindable so a toolbar toggle can flip between the pivot and the flat
993
- * table over the same data.
994
- */
995
- pivotMode?: boolean;
996
- /** Fired when the in-grid Pivot toggle flips `pivotMode`. */
997
- onPivotModeChange?: (on: boolean) => void;
998
- /**
999
- * Right-click context menu. `true` shows the default item set (copy, cut,
1000
- * paste, clear, insert row above/below, remove row, remove column). Pass an
1001
- * array to customize: strings are built-in keys, `"separator"` is a divider,
1002
- * and objects are custom items. Omitted/`false` disables the menu (native
1003
- * browser menu shows instead).
1004
- */
1005
- contextMenu?: boolean | ReadonlyArray<ContextMenuItem<TData>>;
1006
- /**
1007
- * The feature set built with `tableFeatures({ ... })`. Optional - the
1008
- * `sortable` / `filterable` / `groupable` shortcuts below inject the
1009
- * matching feature for you, so a grid can be configured entirely from
1010
- * the boolean shortcuts without importing the feature constants.
1011
- */
1012
- features?: TFeatures;
1013
- /**
1014
- * Convenience shortcuts to switch a whole capability on without wiring
1015
- * `features` or the finer-grained props by hand. Every capability is OFF
1016
- * by default - a bare grid is a plain read-only table - so set the
1017
- * shortcut `true` to opt in. (`false` / omitted both leave it off; the
1018
- * shortcut is mainly there to turn things ON.)
1019
- *
1020
- * `sortable` - column sorting (injects `rowSortingFeature`)
1021
- * `filterable` - column filtering (injects `columnFilteringFeature`)
1022
- * `editable` - inline cell editing (alias of `enableInlineEditing`)
1023
- * `groupable` - row grouping controls(alias of `showGroupingControls`,
1024
- * also injects `columnGroupingFeature`)
1025
- * `pageable` - pagination footer (alias of `showPagination`)
1026
- *
1027
- * Fine-grained props (`enableInlineEditing`, `showPagination`, ...) still
1028
- * work; the shortcut wins only when it is explicitly set.
1029
- */
1030
- sortable?: boolean;
1031
- filterable?: boolean;
1032
- editable?: boolean;
1033
- /**
1034
- * Client-side tree data: nest rows into a hierarchy by parent id.
1035
- *
1036
- * ```svelte
1037
- * <SvGrid {data} {columns} treeData={{ parentField: 'managerId', column: 'name' }} />
1038
- * ```
1039
- *
1040
- * Unlike grouping, tree rows are real data rows - they keep their cells,
1041
- * editing and selection, and only gain an expander plus indentation in
1042
- * `column`. Rows whose parent is missing become roots rather than vanishing.
1043
- *
1044
- * For NESTED source data (`children: [...]`), flatten it first with
1045
- * `flattenTreeData(data, { childrenField: 'children' })` and point
1046
- * `parentField` at the `__parentId` it stamps on.
1047
- *
1048
- * Setting this replaces row grouping - a row cannot be both.
1049
- */
1050
- treeData?: {
1051
- /** Field holding each row's parent id. */
1052
- parentField: string;
1053
- /** Field holding the row's own id. Defaults to `'id'`. */
1054
- idField?: string;
1055
- /**
1056
- * Column id that carries the expander + indentation. Defaults to the first
1057
- * visible column.
1058
- */
1059
- column?: string;
1060
- /** Indent per depth level, in px. Default `12`. */
1061
- indentPx?: number;
1062
- };
1063
- groupable?: boolean;
1064
- /**
1065
- * Group the rows by these column ids, outermost first - `['region',
1066
- * 'country']` rolls country up inside region.
1067
- *
1068
- * ```svelte
1069
- * <SvGrid {data} {columns} {features} groupBy={['department']} />
1070
- * ```
1071
- *
1072
- * The prop seeds the group-by list and re-applies whenever it changes, so it
1073
- * works both as initial state and as a controlled value. The column menu and
1074
- * `api.setGroupBy()` write the same state; a change from either survives
1075
- * until this prop's own value changes.
1076
- *
1077
- * Ignored when `treeData` is set - a row cannot be both a hierarchy node and
1078
- * bucketed under a group banner.
1079
- */
1080
- groupBy?: ReadonlyArray<string>;
1081
- /**
1082
- * Which group / tree rows are expanded, keyed by row id.
1083
- *
1084
- * Expansion is owned by the engine by default; pass this prop to hoist it
1085
- * (saved views, "expand everything on load", persisted UI state). Like
1086
- * `groupBy` it seeds the state and re-applies whenever it changes.
1087
- *
1088
- * Group row ids are built from the grouping path, not the display label:
1089
- * `group_department_Engineering`, and one level deeper
1090
- * `group_department_Engineering_role_Senior`. Tree rows key off the engine's
1091
- * row id instead (set `getRowId` to make that your own id). Prefer capturing
1092
- * the map from `onExpandedChange` over hand-building these keys.
1093
- */
1094
- expanded?: Record<string, boolean>;
1095
- /**
1096
- * Fired whenever the expanded set changes - chevron clicks,
1097
- * `api.setRowExpanded()`, `expandAllGroups()` / `collapseAllGroups()`.
1098
- * Receives the full next map, so it can be written straight back into
1099
- * `expanded` for a controlled setup.
1100
- */
1101
- onExpandedChange?: (expanded: Record<string, boolean>) => void;
1102
- /**
1103
- * Render a subtotal row after each group's children, carrying that group's
1104
- * aggregate values under the columns they belong to (the columns with an
1105
- * `aggregate` set). Off by default.
1106
- *
1107
- * Footers are inserted after paging, so they never count against `pageSize` -
1108
- * a page shows its `pageSize` data rows plus whatever footers close on it.
1109
- */
1110
- groupFooters?: boolean;
1111
- /**
1112
- * Append a grand-total row at the very end, aggregating the whole filtered
1113
- * set (not just the current page) with each column's `aggregate` function.
1114
- *
1115
- * Independent of `groupFooters`: use it on a flat grid for a bottom totals
1116
- * line, or alongside group subtotals for both. Like group footers it is
1117
- * appended after paging, so it never counts against `pageSize` - but it is
1118
- * only appended on the LAST page, so a total never appears mid-dataset.
1119
- * Columns without an `aggregate` are left blank.
1120
- */
1121
- grandTotalRow?: boolean;
1122
- /**
1123
- * How grouped rows are displayed.
1124
- *
1125
- * - `groupRows` (default): a full-width banner row per group. Unchanged
1126
- * behaviour - existing grids are untouched.
1127
- * - `singleColumn`: one synthetic "Group" column holding every level,
1128
- * indented by depth.
1129
- * - `multipleColumns`: one synthetic column per grouped field.
1130
- *
1131
- * Both column modes hide the grouped source columns, since their values move
1132
- * into the auto column(s), and render group rows as ordinary rows so their
1133
- * aggregate cells line up under the real columns.
1134
- */
1135
- groupDisplayMode?: GroupDisplayType;
1136
- /** Header for the combined `singleColumn` auto-group column. Default `"Group"`. */
1137
- autoGroupColumnHeader?: string;
1138
- /** Width (px) of each auto-group column. Default `220`. */
1139
- autoGroupColumnWidth?: number;
1140
- pageable?: boolean;
1141
- loading?: boolean;
1142
- /**
1143
- * Render `loading` as a non-blocking overlay instead of replacing the
1144
- * whole grid: the current rows stay visible (dimmed, with a top progress
1145
- * bar) during a refetch, and the first load shows shimmer skeleton rows.
1146
- * Ideal for server-paged grids so paging/sorting doesn't flash. Defaults
1147
- * to `false` (the classic full "Loading..." replacement).
1148
- */
1149
- loadingOverlay?: boolean;
1150
- /** Skeleton placeholder rows to show on first load. Defaults to 8. */
1151
- loadingSkeletonRows?: number;
1152
- error?: string | null;
1153
- emptyMessage?: string;
1154
- /**
1155
- * The single place to localize the grid. One object with two fields:
1156
- *
1157
- * - `locale` - BCP-47 tag(s) for the DATA: accent/case-insensitive filter
1158
- * matching AND every column's number / currency / percent / date formatting
1159
- * (when the column's own `format.locales` is unset). The default for
1160
- * `filterLocale` and per-column format locales.
1161
- * - `text` - overrides for the grid's own UI STRINGS (empty state, tool panel,
1162
- * pager, status bar, filter operator labels, context-menu items, upsell
1163
- * notes). Any subset overrides the English defaults; unset keys stay English.
1164
- *
1165
- * ```svelte
1166
- * <SvGrid localization={{ locale: 'fr-FR', text: { noRows: 'Aucune ligne' } }} />
1167
- * ```
1168
- *
1169
- * Omitting it (or any field) is a no-op. See {@link GridMessages}.
1170
- */
1171
- localization?: GridLocalization;
1172
- showGlobalFilter?: boolean;
1173
- showColumnFilters?: boolean;
1174
- /**
1175
- * Quick way to pick a single filtering UI. When set it controls which of
1176
- * the three filter surfaces appears (and is overridden per-surface by the
1177
- * `showGlobalFilter` / `showColumnFilters` / `showFilterRow` props).
1178
- * Defaults to `'menu'` (only the column menu's filter section is shown).
1179
- */
1180
- filterMode?: "row" | "menu" | "global" | "none";
1181
- showGroupingControls?: boolean;
1182
- showRowSelection?: boolean;
1183
- showPagination?: boolean;
1184
- /** Initial page size when pagination is enabled. Defaults to 10. */
1185
- pageSize?: number;
1186
- /** Page-size choices shown in the footer's selector. Defaults to `[10, 25, 50, 100]`. */
1187
- pageSizeOptions?: number[];
1188
- /**
1189
- * Where the pagination footer sits: `'bottom'` (default), `'top'`, or `'both'`.
1190
- * The status bar (when enabled) always stays at the bottom.
1191
- */
1192
- paginationPosition?: 'top' | 'bottom' | 'both';
1193
- /**
1194
- * Server-side pagination. When `true`, the grid renders its native
1195
- * pagination footer from the `rowCount` / `pageIndex` you provide (rather
1196
- * than counting the local rows), does NOT slice `data` (the rows you pass are
1197
- * treated as the current page), and emits `onPaginationChange` when the user
1198
- * pages or changes page size. Pair with `externalSort` / `externalFilter`
1199
- * and a server data source. Requires `showPagination` / `pageable` to show
1200
- * the footer. Controlled: you own `pageIndex` + `pageSize` + `rowCount`.
1201
- */
1202
- externalPagination?: boolean;
1203
- /** Total rows on the server, for the footer's range + page count. Used with `externalPagination`. */
1204
- rowCount?: number;
1205
- /** Current 0-based page index. Used with `externalPagination` (controlled). */
1206
- pageIndex?: number;
1207
- /**
1208
- * Fires when the user changes page or page size while `externalPagination`
1209
- * is on. Fetch that page and update `data` / `rowCount` / `pageIndex`.
1210
- */
1211
- onPaginationChange?: (pagination: { pageIndex: number; pageSize: number }) => void;
1212
- virtualization?: boolean;
1213
- /** Row height in pixels. Pass a function `(rowIndex) => px` for
1214
- * per-row variable heights (e.g. an interactive row-resize feature).
1215
- * Defaults to 30. */
1216
- rowHeight?: number | ((rowIndex: number) => number);
1217
- /**
1218
- * Size each row to its own content instead of a fixed height: cell text wraps
1219
- * and the row grows to fit the tallest cell. Rows are measured after they
1220
- * render, so this works with virtualization - `rowHeight` (or 30) is the
1221
- * estimate used before a row has been measured, which keeps the scrollbar
1222
- * stable while you scroll into new rows.
1223
- *
1224
- * Costs a measurement pass per row, so prefer a fixed `rowHeight` when your
1225
- * content is uniform. Ignored when `rowHeight` is a function (you are already
1226
- * supplying per-row heights).
1227
- */
1228
- autoRowHeight?: boolean;
1229
- /**
1230
- * Height (px) of a single column-header level row. With multi-level
1231
- * (grouped) headers the total header height is `levels * headerHeight`,
1232
- * since each level renders as its own row. When omitted, header rows size
1233
- * to their content (the default). Does not affect the filter row.
1234
- */
1235
- headerHeight?: number;
1236
- overscan?: number;
1237
- /**
1238
- * Height of the grid's scrollable shell. A number is treated as pixels;
1239
- * a string is used as-is, so callers can pass `'100%'` or `'auto'` to
1240
- * make the grid fill its parent. Defaults to 520 px.
1241
- */
1242
- containerHeight?: number | string;
1243
- columnVirtualization?: boolean;
1244
- columnOverscan?: number;
1245
- columnWidth?: number;
1246
- /**
1247
- * Columns pinned to the left/right edge on mount. Each entry is a
1248
- * column id (matches `ColumnDef.field` when no explicit id is set).
1249
- * The internal pinning state is seeded once at mount; user-driven
1250
- * pinning via the column menu still works and overrides this default.
1251
- * Requires `columnVirtualization={false}` to be visible in the menu
1252
- * UI (sticky positioning can't co-exist with column virtualization
1253
- * since the virtualizer recycles DOM nodes).
1254
- */
1255
- initialColumnPinning?: {
1256
- left?: ReadonlyArray<string>;
1257
- right?: ReadonlyArray<string>;
1258
- };
1259
- /**
1260
- * When `true`, columns are scaled proportionally so their total width
1261
- * fills the viewport (no empty space on the right). Disabled by
1262
- * default - explicit `width` values are used as-is. User resizes still
1263
- * win once they happen.
1264
- */
1265
- fitColumns?: boolean;
1266
- /**
1267
- * Make the grid usable on narrow screens. When the grid's own width drops
1268
- * below the breakpoint (default `640`px), pinned columns are un-pinned so the
1269
- * whole grid pans, `fitColumns` scaling is suspended (columns keep their
1270
- * natural widths and scroll), touch panning is smoothed, and columns whose
1271
- * `hideBelow` exceeds the width are hidden. `true` uses the default
1272
- * breakpoint; pass `{ breakpoint }` to change it. Off by default.
1273
- */
1274
- responsive?: boolean | { breakpoint?: number };
1275
- showFilterMenu?: boolean;
1276
- showFilterRow?: boolean;
1277
- enableCellSelection?: boolean;
1278
- /**
1279
- * Highlight the row under the pointer. Default **false** - the hover tint can
1280
- * compete with the cell selection / fill marquee. Set `true` to opt in; when
1281
- * on, the hover no longer paints over selected cells so the selection stays
1282
- * visible.
1283
- */
1284
- enableRowHover?: boolean;
1285
- /**
1286
- * Prepend a header row (the column labels) to copied cell ranges, so pasting
1287
- * into Excel / Sheets includes the headers. Applies per copied range.
1288
- */
1289
- copyHeadersToClipboard?: boolean;
1290
- /**
1291
- * Transform each cell value on its way to the clipboard - e.g. strip
1292
- * currency symbols, expand codes to labels, or redact. Receives the display
1293
- * value plus the row/column context; return the string (or value) to copy.
1294
- */
1295
- processCellForClipboard?: (params: {
1296
- value: unknown;
1297
- column: unknown;
1298
- row: TData;
1299
- rowIndex: number;
1300
- columnId: string;
1301
- }) => unknown;
1302
- enableInlineEditing?: boolean;
1303
- /**
1304
- * Full-row editing. When `true`, starting an edit puts the WHOLE row into
1305
- * edit mode - every editable cell shows an inline editor at once - and a
1306
- * single Enter (or focus leaving the row) commits all of them; Esc cancels
1307
- * the whole row. Requires `enableInlineEditing`. The full-row editor covers
1308
- * text / number / date / datetime / checkbox / list-select editor types.
1309
- */
1310
- fullRowEditing?: boolean;
1311
- enableRowSummaries?: boolean;
1312
- /**
1313
- * Excel-style status bar under the grid showing live aggregates of the
1314
- * selected cell range (count, numeric count, sum, average, min, max).
1315
- * `true` shows the default set; pass `{ aggregates: [...] }` to choose
1316
- * which. Requires `enableCellSelection`.
1317
- */
1318
- statusBar?:
1319
- | boolean
1320
- | {
1321
- aggregates?: ReadonlyArray<
1322
- "count" | "numericCount" | "sum" | "avg" | "min" | "max"
1323
- >;
1324
- };
1325
- /**
1326
- * Show the docked tool panel - the enterprise sidebar with Columns and
1327
- * Filters tabs. A "Columns & Filters" button appears in a toolbar above the
1328
- * grid; the panel docks on the right edge.
1329
- */
1330
- toolPanel?: boolean;
1331
- /**
1332
- * Integrated charting: `true` for the zero-config docked chart panel, or a
1333
- * {@link ChartingConfig} object to author defaults + advanced options.
1334
- */
1335
- charting?: boolean | ChartingConfig<TData>;
1336
- /**
1337
- * Render the header column menu (⋮) as a tabbed popover - **General**,
1338
- * **Filter**, and **Columns** tabs (the AG-Grid layout). Defaults to `false`,
1339
- * which keeps the flat menu (actions list + "Choose columns" submenu).
1340
- */
1341
- columnMenuTabs?: boolean;
1342
- /** Open the tool panel on first render (instead of collapsed). */
1343
- toolPanelDefaultOpen?: boolean;
1344
- /** Which tab the tool panel starts on. Defaults to `'columns'`. */
1345
- toolPanelDefaultTab?: "columns" | "filters";
1346
- /**
1347
- * Quick way to pick which selection surfaces are active. `'row'` shows the
1348
- * selection checkbox column only, `'cell'` allows rectangle/range cell
1349
- * selection only, `'both'` (default) enables both, `'none'` disables both.
1350
- * Overridden per-surface by `showRowSelection` / `enableCellSelection`.
1351
- */
1352
- selectionMode?: "row" | "cell" | "both" | "none";
1353
- /**
1354
- * Render a leading row-number column (1-based) before any selection
1355
- * column. Useful as a permanent anchor when scrolling wide grids.
1356
- */
1357
- showRowNumbers?: boolean;
1358
- /**
1359
- * Paint alternating data rows with the `--sg-row-alt-bg` color (zebra
1360
- * striping). Only data rows stripe - pinned, group, detail, and summary
1361
- * rows keep their single background. Defaults to `false`.
1362
- */
1363
- zebraRows?: boolean;
1364
- /**
1365
- * Width (px) of the row-number column. Defaults to 56, which fits up
1366
- * to "99,999"; bump this when the dataset crosses six digits so the
1367
- * largest row number stays fully visible at the bottom of a scroll.
1368
- */
1369
- rowNumberWidth?: number;
1370
- /** Receives the imperative grid API once the component has mounted. */
1371
- onApiReady?: (api: SvGridApi<TFeatures, TData>) => void;
1372
- /**
1373
- * Fires whenever the row-selection state changes. The first argument
1374
- * is the new selection record `{ [rowId]: true }`; the second is the
1375
- * array of selected `TData` rows.
1376
- */
1377
- onRowSelectionChange?: (
1378
- selection: Record<string, boolean>,
1379
- rows: TData[],
1380
- ) => void;
1381
- /**
1382
- * Fires whenever the cell-selection rectangle changes (mouse, keyboard,
1383
- * or `api.selectCells()`). `ranges` matches `api.getSelected()` -
1384
- * `[rowStart, colStart, rowEnd, colEnd]` rectangles in grid coords.
1385
- * Empty array when the user clears the selection.
1386
- */
1387
- onCellSelectionChange?: (
1388
- ranges: Array<[number, number, number, number]>,
1389
- ) => void;
1390
- /**
1391
- * When `true`, the grid records sort state (and renders sort indicators
1392
- * + cycling on headers) but does NOT actually re-order the rows. The
1393
- * consumer is expected to sort `data` themselves - typically via
1394
- * `onSortingChange`. Use this for tree/hierarchical data, where a flat
1395
- * global sort would break parent-child adjacency. Defaults to `false`.
1396
- */
1397
- externalSort?: boolean;
1398
- /**
1399
- * Fires whenever the sort clauses change. Receives the new array of
1400
- * `{ id, desc }` entries. Pair with `externalSort={true}` when the
1401
- * consumer wants to own the row ordering.
1402
- */
1403
- onSortingChange?: (sorting: Array<{ id: string; desc: boolean }>) => void;
1404
- /**
1405
- * The sort state to start in - `{ id, desc }` entries. Use with `externalSort`
1406
- * when the initial ordering is decided server-side (e.g. a URL `?sort=` param
1407
- * read in a SvelteKit `load`), so the header sort indicators match the already-
1408
- * sorted data on first render. Applied once at mount; user sorting takes over.
1409
- */
1410
- initialSorting?: Array<{ id: string; desc: boolean }>;
1411
- /**
1412
- * The advanced-filter expression to start in (Pro). Applied once at mount;
1413
- * change it afterwards through `api.setAdvancedFilter()`.
1414
- *
1415
- * Filtering only happens once `@svgrid/enterprise`'s `enableAdvancedFilter()`
1416
- * has registered a compiler - without it the expression is stored and
1417
- * reported but no rows are removed, so the free grid degrades to a no-op
1418
- * rather than to a wrong row set.
1419
- */
1420
- initialAdvancedFilter?: GridPredicateExpr | null;
1421
- /**
1422
- * Fires whenever the advanced-filter expression changes, whatever changed it:
1423
- * `api.setAdvancedFilter()`, `clearAllFilters()`, or the toolbar's clear
1424
- * control.
1425
- *
1426
- * The panel that authors the expression is mounted by you, outside the grid,
1427
- * so it cannot see a change the grid made on its own. Without this, clearing
1428
- * from the toolbar leaves that panel showing a filter the grid is no longer
1429
- * applying. Feed this back into the panel's `expression` prop to keep them
1430
- * agreeing.
1431
- */
1432
- onAdvancedFilterChange?: (expr: GridPredicateExpr | null) => void;
1433
- /**
1434
- * When `true`, the grid still records column-filter / global-filter /
1435
- * facet state (so the menu UI works and indicators light up) but does
1436
- * NOT actually filter the rows. The consumer is expected to fetch / sort
1437
- * / filter the data themselves - typically via `onFiltersChange`. Used
1438
- * by server-side data sources. Defaults to `false`.
1439
- */
1440
- externalFilter?: boolean;
1441
- /**
1442
- * Fires whenever any of the in-grid filter state changes - global
1443
- * search, per-column operator filters, or facet (value-checklist)
1444
- * filters. Pair with `externalFilter={true}` when the consumer wants to
1445
- * push the query to the server.
1446
- */
1447
- onFiltersChange?: (filters: {
1448
- global: string;
1449
- columns: Array<{
1450
- id: string;
1451
- operator: FilterOperator;
1452
- value: string;
1453
- /**
1454
- * Upper bound for the `between` operator. Only set when
1455
- * `operator === 'between'` AND the user has typed both values.
1456
- */
1457
- valueTo?: string;
1458
- selectedValues?: Array<string>;
1459
- }>;
1460
- }) => void;
1461
- /**
1462
- * Fires when an inline edit is committed (Enter / Tab / blur). Useful
1463
- * for cascade-recompute pipelines: a parent listens, then refreshes
1464
- * derived columns or aggregates. The wrapper has already written the
1465
- * parsed value back into the row by the time this fires.
1466
- */
1467
- /**
1468
- * Resolve a stable id per row. Drives selection, expansion, edit,
1469
- * and active-cell state. When omitted, the row's array index is
1470
- * used - fine for read-only views but the wrong choice if `data`
1471
- * gets reordered or filtered outside the grid (selection would
1472
- * follow positions, not actual rows). Use a database PK, a UUID,
1473
- * or any stable string.
1474
- */
1475
- getRowId?: (row: TData, index: number) => string;
1476
- /**
1477
- * Conditional class(es) added to every `<tr>` body row. Receives
1478
- * the row's `original` data + its data-array index. Return a
1479
- * string, an array of strings, or an object mapping class names to
1480
- * booleans. Useful for "highlight overdue rows", "tint cancelled
1481
- * orders", and similar row-level state mappings.
1482
- */
1483
- rowClass?: (ctx: {
1484
- row: TData;
1485
- rowIndex: number;
1486
- }) => string | ReadonlyArray<string> | Record<string, boolean> | undefined | null;
1487
- /**
1488
- * Per-cell notes - longer free-form comments shown as a corner
1489
- * indicator + tooltip on hover. Keyed by row id then column id;
1490
- * empty / missing entries mean "no note". The grid owns rendering;
1491
- * you own storage (write your own callbacks to add / edit notes).
1492
- */
1493
- notes?: Record<string, Record<string, string>>;
1494
- /**
1495
- * Allow editing per-cell notes/comments through the UI: the context menu
1496
- * gains an "Edit comment" item that opens a popover editor. Edits are
1497
- * applied to an internal overlay for immediate feedback and emitted via
1498
- * `onNoteChange` so you can persist them back into `notes`.
1499
- */
1500
- editableComments?: boolean;
1501
- /** Fires when a comment is saved or removed (removed = empty `note`). */
1502
- onNoteChange?: (event: { rowId: string; columnId: string; note: string }) => void;
1503
- /**
1504
- * Excel-style conditional formatting. A list of value-driven rules that
1505
- * color cells: `colorScale` (gradient across the column range),
1506
- * `dataBar` (in-cell proportional bar), `iconSet` (arrows / traffic /
1507
- * triangles by threshold), and `rule` (apply a style when a predicate
1508
- * matches). Scope a format to specific columns with `columns: [...]`,
1509
- * or omit it to apply to every column. Later entries win on conflict.
1510
- */
1511
- conditionalFormats?: ReadonlyArray<ConditionalFormat<TData>>;
1512
- /**
1513
- * Which rows feed the min/max range that `colorScale` / `dataBar` formats
1514
- * scale against.
1515
- *
1516
- * - `filtered` (default): every row that survives the filters, ignoring the
1517
- * page slice. The scale follows what you filtered to but does not shift
1518
- * when you page, so the same value keeps the same colour on page 1 and
1519
- * page 2.
1520
- * - `visible`: only the rows currently on screen. Rescales per page - use it
1521
- * when you want each page's heat map normalized to that page.
1522
- * - `all`: the full unfiltered dataset, for a scale that stays put as you
1523
- * filter.
1524
- */
1525
- conditionalStatScope?: "filtered" | "visible" | "all";
1526
- onCellValueChange?: (event: {
1527
- rowIndex: number;
1528
- columnId: string;
1529
- oldValue: unknown;
1530
- newValue: unknown;
1531
- row: TData;
1532
- }) => void;
1533
- /**
1534
- * Fires whenever the active cell changes - click, keyboard move,
1535
- * tab, page-up/down, etc. Consumers (toolbars, ribbon UIs) use this
1536
- * to stay synced with the grid's selection without polling the DOM.
1537
- */
1538
- onActiveCellChange?: (cell: {
1539
- rowIndex: number;
1540
- colIndex: number;
1541
- columnId: string;
1542
- }) => void;
1543
- /**
1544
- * Fires when a data cell (and therefore a row) is single-clicked.
1545
- * Group-header rows are excluded. `value` is the displayed cell value.
1546
- */
1547
- onCellClick?: (event: {
1548
- rowIndex: number;
1549
- colIndex: number;
1550
- columnId: string;
1551
- value: unknown;
1552
- row: TData;
1553
- }) => void;
1554
- /** Fires when a data row is single-clicked (any cell). Group rows excluded. */
1555
- onRowClick?: (event: {
1556
- rowIndex: number;
1557
- columnId: string;
1558
- row: TData;
1559
- }) => void;
1560
- /**
1561
- * Fires when a data cell is double-clicked - independent of whether the
1562
- * cell is editable, so it fires even on read-only grids. Group rows excluded.
1563
- */
1564
- onCellDoubleClick?: (event: {
1565
- rowIndex: number;
1566
- colIndex: number;
1567
- columnId: string;
1568
- value: unknown;
1569
- row: TData;
1570
- }) => void;
1571
- /** Fires when a data row is double-clicked (any cell). Group rows excluded. */
1572
- onRowDoubleClick?: (event: {
1573
- rowIndex: number;
1574
- columnId: string;
1575
- row: TData;
1576
- }) => void;
1577
- /**
1578
- * Fires once each time the body is scrolled to (within ~32px of) the
1579
- * bottom. Re-arms after the user scrolls back up. The canonical hook for
1580
- * infinite / lazy loading - append more rows to `data` when it fires.
1581
- */
1582
- onScrollBottomReached?: (event: {
1583
- scrollTop: number;
1584
- scrollHeight: number;
1585
- clientHeight: number;
1586
- }) => void;
1587
- /**
1588
- * Marks a row as an expandable "detail row". When this returns true the
1589
- * grid renders that row as a SINGLE full-width cell (colspan across every
1590
- * column) using `renderDetailRow`, instead of the normal per-column cells
1591
- * - the canonical Stripe / GitHub "expand a rich panel beneath the row"
1592
- * pattern. Insert the detail rows into `data` yourself (typically right
1593
- * after the row they belong to) and toggle them with your own expanded
1594
- * state. Pair with `virtualization={false}` so the variable-height detail
1595
- * isn't clipped by the fixed-row-height virtualizer.
1596
- */
1597
- isDetailRow?: (row: TData, rowIndex: number) => boolean;
1598
- /**
1599
- * Snippet rendered inside the full-width detail cell for rows where
1600
- * `isDetailRow` is true. Receives the row's data and its index.
1601
- */
1602
- renderDetailRow?: Snippet<[{ row: TData; rowIndex: number }]>;
1603
- /**
1604
- * Server-side group / tree keyboard + accessibility, built into the grid. When
1605
- * set, the grid uses the treegrid role and marks matching rows with
1606
- * `aria-level` / `aria-expanded`, and ArrowRight / ArrowLeft expand / collapse
1607
- * the focused group row (no app-level key handling). Pair with `serverGroupRows`
1608
- * + `SvGroupCell` for the visual expander. Every accessor receives the row data.
1609
- */
1610
- serverGroup?: {
1611
- /** Whether a row is an expandable group / branch. */
1612
- isGroup: (row: TData) => boolean;
1613
- /** Tree depth of the row (0 = top level), for `aria-level`. */
1614
- level: (row: TData) => number;
1615
- /** Whether an expandable row is currently expanded. */
1616
- expanded?: (row: TData) => boolean;
1617
- /** Expand / collapse a group row. Called on ArrowRight / ArrowLeft. */
1618
- onToggle: (row: TData) => void;
1619
- };
1620
- /**
1621
- * Server-side set-filter values. When set, a column's filter checklist is
1622
- * populated by fetching the distinct values from the server (once per column,
1623
- * cached) instead of deriving them from the loaded page - so the checklist
1624
- * shows every value, not just those on screen. Return the distinct string
1625
- * values for the column id.
1626
- */
1627
- serverFilterValues?: (columnId: string) => Promise<string[]>;
1628
- /**
1629
- * Rows to pin to the TOP of the grid - rendered above the regular
1630
- * rows and sticky-positioned so they stay visible while the user
1631
- * scrolls. Typical use: a "totals" or "headline" row that should
1632
- * always be in view. Rows are read-only (no inline editing, no
1633
- * row-selection checkbox). They share the column schema with the
1634
- * main grid; field/format/cell/cellClass all apply.
1635
- */
1636
- pinnedTopRows?: ReadonlyArray<TData>;
1637
- /**
1638
- * Rows to pin to the BOTTOM of the grid - rendered below the regular
1639
- * rows and sticky-positioned (sticks to the bottom of the viewport
1640
- * while the user scrolls). Typical use: a "page totals" or "grand
1641
- * total" row computed from `getDisplayedRows()`.
1642
- */
1643
- pinnedBottomRows?: ReadonlyArray<TData>;
1644
- /**
1645
- * Enables drag-to-reorder on the grid's column headers. When `true`,
1646
- * every header gets `draggable=true` and a drop indicator paints
1647
- * between headers during a drag. On drop the grid mutates its
1648
- * internal column order and fires `onColumnOrderChange` with the
1649
- * new order. Defaults to `false`.
1650
- */
1651
- enableColumnReorder?: boolean;
1652
- /**
1653
- * Initial column order, by `id` (falls back to `field`). When the
1654
- * user reorders columns, this is the starting state. After mount,
1655
- * the grid owns the order internally and emits `onColumnOrderChange`
1656
- * on every change - persist that to `localStorage` to restore.
1657
- */
1658
- columnOrder?: ReadonlyArray<string>;
1659
- /** Fires every time the column order changes (drag or `api.setColumnOrder`). */
1660
- onColumnOrderChange?: (order: ReadonlyArray<string>) => void;
1661
- /**
1662
- * Infer each column's data type (number / boolean / date / ISO date-string /
1663
- * text) from the first data row, for columns that declare neither an
1664
- * explicit `editorType` nor a `cellDataType`. Sets the matching editor,
1665
- * alignment, date format, and filter operators automatically. Explicit
1666
- * column config always wins. Defaults to `false`.
1667
- */
1668
- inferColumnTypes?: boolean;
1669
- /**
1670
- * Enables managed row dragging. When `true`, every row becomes a drag
1671
- * source (grab cursor + a grip in the row-number cell) and a drop
1672
- * indicator paints between rows during a drag. On drop the grid mutates
1673
- * its own internal data - reordering within the grid, or moving the row
1674
- * across grids that share the same {@link rowDragGroup}. Defaults to
1675
- * `false`.
1676
- */
1677
- rowDragManaged?: boolean;
1678
- /**
1679
- * Connection group for cross-grid row dragging. Grids that share the same
1680
- * non-empty `rowDragGroup` string (and have `rowDragManaged` on) can
1681
- * exchange rows: dragging a row out of one and dropping it into another
1682
- * removes it from the source and inserts it into the target. Omit to keep
1683
- * dragging confined to reordering within a single grid.
1684
- */
1685
- rowDragGroup?: string;
1686
- /**
1687
- * Fires on the TARGET grid after a managed row drag settles, with the
1688
- * moved row, its landing index, whether it stayed in the same grid, and
1689
- * the source / target grid ids. Use it to mirror the move into your own
1690
- * state (persistence, server sync). The grid has already applied the
1691
- * change to its internal data by the time this fires.
1692
- */
1693
- onRowDragEnd?: (event: {
1694
- row: TData;
1695
- toIndex: number;
1696
- sameGrid: boolean;
1697
- fromGridId: number;
1698
- toGridId: number;
1699
- }) => void;
1700
- /**
1701
- * Align this grid with others that share the same non-empty
1702
- * `alignedGridGroup` string: horizontal scroll and column-resize widths are
1703
- * kept in lockstep across every grid in the group. Use for a totals/header
1704
- * grid above a body grid, or side-by-side comparison grids that must line up.
1705
- * The grids should declare the same columns (matched by id) for widths to map.
1706
- */
1707
- alignedGridGroup?: string;
1708
- /**
1709
- * BCP-47 locale tag (or array of fallbacks) used for accent- and
1710
- * case-insensitive text filtering / sorting / search. Powered by
1711
- * `Intl.Collator` with `sensitivity: 'base'`, so "cafe", "Café"
1712
- * and "CAFÉ" all match "cafe" without strain. Defaults to the
1713
- * browser's locale.
1714
- */
1715
- filterLocale?: string | ReadonlyArray<string>;
1716
- };
1717
-
1718
- /**
1719
- * The grid's single localization surface (see {@link Props.localization}):
1720
- * `locale` handles the data (filter matching + number/date formatting) and
1721
- * `text` handles the UI strings.
1722
- */
1723
- export type GridLocalization = {
1724
- /** BCP-47 tag(s) for filter matching + number / date formatting. */
1725
- locale?: string | ReadonlyArray<string>;
1726
- /** Overrides for the grid's own UI strings. */
1727
- text?: Partial<GridMessages>;
1728
- };
1729
-
1730
- export type SelectionPoint = { rowIndex: number; colIndex: number };
1731
- export type SelectionRange = {
1732
- anchor: SelectionPoint | null;
1733
- focus: SelectionPoint | null;
1734
- };
1735
- export type CellEditState = {
1736
- rowId: string;
1737
- columnId: string;
1738
- editorType: CellEditorType;
1739
- value: unknown;
1740
- /**
1741
- * The row's underlying data object, captured when the edit started. The
1742
- * commit path resolves the row by id first; this is the fallback for when
1743
- * the row has left the row model mid-edit (a filter typed into the filter
1744
- * row while an editor is open), so the typed value still lands instead of
1745
- * being silently dropped.
1746
- */
1747
- rowRef?: unknown;
1748
- } | null;
1749
- export type FilterOperator =
1750
- | "contains"
1751
- | "notContains"
1752
- | "equals"
1753
- | "notEquals"
1754
- | "startsWith"
1755
- | "endsWith"
1756
- | "regex"
1757
- | "in"
1758
- | "notIn"
1759
- | "greaterThan"
1760
- | "lessThan"
1761
- | "between"
1762
- | "isBlank"
1763
- | "isNotBlank";
1764
- export type FilterOption = {
1765
- value: FilterOperator;
1766
- label: string;
1767
- iconName: string;
1768
- };
1769
- export type MenuPosition = { x: number; y: number };
1
+ // Type definitions extracted from SvGrid.svelte. These are compile-time
2
+ // only - moving them out keeps the component's <script> focused on logic.
3
+ import type { Snippet } from "svelte";
4
+ import type {
5
+ CellEditorType,
6
+ ColumnDef,
7
+ RowData,
8
+ SvGridApi,
9
+ TableFeatures,
10
+ } from "./index";
11
+ import type { ConditionalFormat } from "./conditional-formatting";
12
+ import type { GroupDisplayType } from "./group-display";
13
+ import type { GridMessages } from "./grid-messages";
14
+ import type { GridPivotConfig } from "./pivot-view.svelte";
15
+ import type { GridPredicateExpr } from "./filtering/predicate-expr";
16
+ import type { MenuItem } from "./SvMenuList.svelte";
17
+
18
+ /** The calendar views the scheduler can render. {@link SchedulerConfig}. The
19
+ * `timeline*` views are horizontal: time runs left→right and resources are
20
+ * rows (a single "All" row without `resourceField`). */
21
+ export type SchedulerView =
22
+ | "month"
23
+ | "week"
24
+ | "day"
25
+ | "agenda"
26
+ | "timelineDay"
27
+ | "timelineWeek"
28
+ | "timelineMonth"
29
+ | "timelineYear";
30
+
31
+ /**
32
+ * How overlapping ("colliding") time-grid events are laid out:
33
+ * - `split` - every collision divides the column width evenly (default).
34
+ * - `cap` - show up to `maxColumns` columns; the rest collapse into a
35
+ * clickable `+N more` overflow tile.
36
+ * - `stack` - overlapping events overlap with a horizontal offset + z-order
37
+ * instead of shrinking, so each stays readable (hover to raise).
38
+ */
39
+ export type SchedulerCollisionMode = "split" | "cap" | "stack";
40
+
41
+ /** A scheduler resource - a person / room / machine an event can be assigned to. */
42
+ export type SchedulerResource = {
43
+ id: string;
44
+ title?: string;
45
+ color?: string;
46
+ /**
47
+ * This resource's own working windows (hours), optionally per weekday - e.g. a
48
+ * doctor available Mon/Wed/Fri 9-13 and Tue/Thu 14-18. Overrides the global
49
+ * `businessHours` / `nonWorkingDays` for this resource's columns: time outside
50
+ * every matching window is shaded, and (with `restrictToBusinessHours`)
51
+ * non-bookable. A weekday with no matching window is a full day off.
52
+ */
53
+ availability?: ReadonlyArray<{ days?: ReadonlyArray<number>; start: number; end: number }>;
54
+ /**
55
+ * Per-date overrides to this resource's weekly `availability` - a specific day
56
+ * off (`off: true`, e.g. vacation) or custom hours (`windows`) for that one
57
+ * date. Matched by calendar date; takes precedence over `availability` for the
58
+ * matching day.
59
+ */
60
+ dateOverrides?: ReadonlyArray<{
61
+ date: Date | number | string;
62
+ off?: boolean;
63
+ windows?: ReadonlyArray<{ start: number; end: number }>;
64
+ }>;
65
+ };
66
+ import type {
67
+ ChartType,
68
+ ChartSpec,
69
+ ChartAnnotation,
70
+ ChartReferenceLine,
71
+ ChartValueFormat,
72
+ } from "./chart";
73
+
74
+ /** One aggregated bucket returned by a server-side `getAggregate`. */
75
+ export type ChartAggregateBucket = { category: string; series?: string; value: number };
76
+ /** The request a server-side `getAggregate` receives (whole-dataset charting). */
77
+ export type ChartAggregateRequest = {
78
+ dimension: string | undefined;
79
+ measure: string | null;
80
+ series?: string;
81
+ reduce: "sum" | "avg" | "count";
82
+ filterModel: Record<string, unknown>;
83
+ };
84
+
85
+ /**
86
+ * Config for the built-in `charting` prop. All fields optional and additive;
87
+ * `charting={true}` is the zero-config form. Column references are column
88
+ * field names / ids.
89
+ */
90
+ export type ChartingConfig<TData extends RowData = RowData> = {
91
+ /** Right-side drawer (default) or bottom dock. */
92
+ position?: "bottom" | "right";
93
+ /** Open the panel on first render. */
94
+ defaultOpen?: boolean;
95
+ /** Initial chart type. */
96
+ defaultType?: ChartType;
97
+ /** Docked-bottom height (px). */
98
+ height?: number;
99
+ /** Drawer width (px). */
100
+ width?: number;
101
+ /** Clicking a chart category filters the grid on the charted dimension. */
102
+ crossFilter?: boolean;
103
+ /** Group-by column. */
104
+ dimension?: string;
105
+ /** Split-by column: one series per distinct value. */
106
+ series?: string;
107
+ /** Measure column, or several for a multi-series chart. */
108
+ measures?: string | string[];
109
+ reduce?: "sum" | "avg" | "count";
110
+ stacked?: boolean;
111
+ stacked100?: boolean;
112
+ /** Per-series-label type override (combo). */
113
+ seriesTypes?: Record<string, "bar" | "line" | "area">;
114
+ /** Per-series-label axis override (dual axis). */
115
+ seriesAxes?: Record<string, "left" | "right">;
116
+ referenceLines?: ChartReferenceLine[];
117
+ averageLine?: boolean;
118
+ trend?: "sma" | "ema" | "linear";
119
+ annotations?: ChartAnnotation[];
120
+ yScale?: "linear" | "log";
121
+ timeAxis?: boolean;
122
+ valueFormat?: "number" | "currency" | "percent" | "compact";
123
+ smooth?: boolean;
124
+ orientation?: "vertical" | "horizontal";
125
+ donut?: number | boolean;
126
+ palette?: string[];
127
+ patternFallback?: boolean;
128
+ topN?: number;
129
+ otherLabel?: string;
130
+ sort?: "value-desc" | "value-asc" | "category" | "none";
131
+ dataLabels?: boolean;
132
+ zoom?: boolean;
133
+ brush?: boolean;
134
+ /** Show the chart's PNG/SVG export toolbar. */
135
+ export?: boolean;
136
+ /** Escape hatch: build a fully custom ChartSpec from the (scoped) rows. */
137
+ buildSpec?: (rows: TData[]) => ChartSpec | null;
138
+ /** Server-side aggregation: chart the whole dataset, not just loaded rows. */
139
+ getAggregate?: (
140
+ request: ChartAggregateRequest,
141
+ ) => Promise<ReadonlyArray<ChartAggregateBucket>>;
142
+ /** Bump to force a server-side refetch. */
143
+ refreshKey?: unknown;
144
+ };
145
+
146
+ /**
147
+ * The built-in card detail drawer. Set `board.drawer` (`true` for all fields,
148
+ * or this object to customize) and opening a card shows a drawer with an
149
+ * `SvForm` of its fields, rendered with the UI-kit editors.
150
+ */
151
+ export type BoardDrawerConfig<TData extends RowData = RowData> = {
152
+ /** Fields to show, in order. Omit for every column that has a `field`. */
153
+ fields?: ReadonlyArray<keyof TData & string>;
154
+ /** Drawer title - a string or derived from the row. Defaults to the title field. */
155
+ title?: string | ((row: TData) => string);
156
+ /** Which edge the drawer opens from. Defaults to `'right'`. */
157
+ side?: "right" | "left" | "top" | "bottom";
158
+ /** Drawer size (any CSS length). Defaults to `'380px'`. */
159
+ size?: string;
160
+ /** Save button label. Defaults to `'Save'`. */
161
+ submitLabel?: string;
162
+ /** Form columns inside the drawer. Defaults to `1`. */
163
+ columns?: number;
164
+ };
165
+
166
+ /** Board-native helpers passed to `board.cardMenu` for building context items. */
167
+ export type BoardMenuContext<TData extends RowData = RowData> = {
168
+ /** The board's lanes (id + title). */
169
+ lanes: BoardLane[];
170
+ /** Move this card to a lane (board-native; fires onCardMove). */
171
+ moveTo: (laneId: string) => void;
172
+ /** Open this card's editor (inline, or your `onCardEdit`). */
173
+ edit: () => void;
174
+ };
175
+
176
+ /** Board-native helpers passed to `board.laneMenu` for building lane context items. */
177
+ export type BoardLaneMenuContext<TData extends RowData = RowData> = {
178
+ /** The lane's id. */
179
+ laneId: string;
180
+ /** The lane's current cards (this swimlane's, if any). */
181
+ cards: TData[];
182
+ /** Whether the lane is collapsed. */
183
+ collapsed: boolean;
184
+ /** Collapse / expand the lane (needs `collapsibleLanes`). */
185
+ toggleCollapse: () => void;
186
+ /** Add a card to the lane (fires `onCardAdd`). */
187
+ addCard: (title?: string) => void;
188
+ };
189
+
190
+ /** The cell a context menu was opened on. Passed to every item's callbacks. */
191
+ export type ContextMenuTarget<TData extends RowData = RowData> = {
192
+ rowIndex: number;
193
+ colIndex: number;
194
+ columnId: string;
195
+ /** Stable row id (from getRowId / row model), for keying notes etc. */
196
+ rowId: string;
197
+ row: TData | null;
198
+ };
199
+
200
+ /**
201
+ * A context-menu entry. Either a built-in action key, the `"separator"`
202
+ * divider, or a custom item. Built-in keys: `"copy" | "cut" | "paste" |
203
+ * "clear" | "row_above" | "row_below" | "remove_row" | "remove_col" |
204
+ * "chart"`. The `"chart"` item (chart the selected range) is only shown when
205
+ * `charting` is enabled; it is appended to the default menu automatically.
206
+ */
207
+ export type ContextMenuItem<TData extends RowData = RowData> =
208
+ | string
209
+ | {
210
+ key: string;
211
+ label: string;
212
+ /** Hide the item entirely for this target. */
213
+ hidden?: (target: ContextMenuTarget<TData>) => boolean;
214
+ /** Render the item greyed-out and non-clickable for this target. */
215
+ disabled?: (target: ContextMenuTarget<TData>) => boolean;
216
+ /** Invoked on click. The menu closes afterwards. */
217
+ action: (target: ContextMenuTarget<TData>) => void;
218
+ };
219
+
220
+ /** A single Kanban lane (board column). {@link BoardConfig}. */
221
+ export type BoardLane = {
222
+ /** Lane id - equals the `groupBy` field value of the cards it holds. */
223
+ id: string;
224
+ /** Header title. Defaults to the id (or `(empty)` for a blank value). */
225
+ title?: string;
226
+ /** Accent color (any CSS color) for the lane header bar + card ring. */
227
+ color?: string;
228
+ /**
229
+ * Soft max number of cards. When exceeded the lane header is flagged
230
+ * over-limit. Enforcement/styling is an enterprise concern; the count is
231
+ * always shown.
232
+ */
233
+ wipLimit?: number;
234
+ };
235
+
236
+ /** A checklist item inside a card. See {@link BoardConfig.subtasks}. */
237
+ export type BoardSubtask = {
238
+ id: string | number;
239
+ title: string;
240
+ done: boolean;
241
+ };
242
+
243
+ /** A comment on a card. See {@link BoardConfig.commentsField}. */
244
+ export type BoardComment = {
245
+ id: string | number;
246
+ text: string;
247
+ author?: string;
248
+ /** Timestamp label (any string). */
249
+ at?: string;
250
+ };
251
+
252
+ /**
253
+ * The serializable board layout - the per-card position/edit overlay plus
254
+ * collapsed lanes. Persisted by `board.persistKey` and passed to
255
+ * `board.onLayoutChange`.
256
+ */
257
+ export type BoardLayout = {
258
+ /** rowId -> lane id. */
259
+ laneOf?: Record<string, string>;
260
+ /** rowId -> sort order within its lane. */
261
+ orderOf?: Record<string, number>;
262
+ /** rowId -> swimlane id. */
263
+ swimOf?: Record<string, string>;
264
+ /** rowId -> edited field values. */
265
+ edits?: Record<string, Record<string, unknown>>;
266
+ /** lane id -> collapsed. */
267
+ collapsed?: Record<string, boolean>;
268
+ /** swimlane id -> collapsed. */
269
+ collapsedSwim?: Record<string, boolean>;
270
+ /** Explicit lane order (ids), when lanes have been drag-reordered. */
271
+ laneOrder?: string[];
272
+ /** rowId -> subtaskId -> done override. */
273
+ subDone?: Record<string, Record<string, boolean>>;
274
+ /** rowId -> subtasks added on the card. */
275
+ subAdded?: Record<string, BoardSubtask[]>;
276
+ };
277
+
278
+ /** Emitted when a card's built-in editor is saved. */
279
+ export type BoardCardCommitEvent<TData extends RowData = RowData> = {
280
+ /** The edited row. */
281
+ row: TData;
282
+ /** Only the fields that changed, `{ field: newValue }`. */
283
+ changes: Record<string, unknown>;
284
+ /** The full set of edited field values. */
285
+ values: Record<string, unknown>;
286
+ };
287
+
288
+ /** Emitted when a card is dragged to a new lane and/or position. */
289
+ export type BoardCardMoveEvent<TData extends RowData = RowData> = {
290
+ /** The dragged row. */
291
+ row: TData;
292
+ /** Lane the card came from. */
293
+ fromLane: string;
294
+ /** Lane the card was dropped on. */
295
+ toLane: string;
296
+ /** Insertion index within the destination lane. */
297
+ toIndex: number;
298
+ /** Swimlane the card came from (only when `swimlaneBy` is set). */
299
+ fromSwimlane?: string;
300
+ /** Swimlane the card was dropped on (only when `swimlaneBy` is set). */
301
+ toSwimlane?: string;
302
+ };
303
+
304
+ /**
305
+ * Turns the grid into a Kanban board. Set `board` and the grid renders its
306
+ * rows as cards in horizontal lanes (bucketed by the `groupBy` field) instead
307
+ * of a table. Dragging a card between lanes fires {@link BoardConfig.onCardMove}
308
+ * where you reassign the `groupBy` field on your own data.
309
+ */
310
+ /**
311
+ * Chart view of the grid. Setting the `chart` prop on `<SvGrid>` swaps the table
312
+ * for a chart driven by the grid's FILTERED + SORTED rows - so the search box,
313
+ * column filters and sort all flow through to the chart. Unlike the board and
314
+ * scheduler views, the renderer is free: the grid lazy-loads a built-in
315
+ * `SvChart` view unless a host overrides it via `registerChartView`.
316
+ *
317
+ * The config maps directly onto `rowsToChartSpec` - one row field for the
318
+ * category axis, one or more for the value series (or a `series` field to pivot
319
+ * one series per distinct value).
320
+ *
321
+ * ```svelte
322
+ * <SvGrid {data} {columns}
323
+ * chart={{ type: 'bar', category: 'month', value: 'revenue', reduce: 'sum' }} />
324
+ * ```
325
+ */
326
+ export type ChartViewConfig<
327
+ TFeatures extends TableFeatures = TableFeatures,
328
+ TData extends RowData = RowData,
329
+ > = {
330
+ /** Chart type. Default `'bar'`. */
331
+ type?: ChartType;
332
+ /** Row field for the category (x) axis. */
333
+ category: keyof TData & string;
334
+ /** Row field(s) for the value (y) series. */
335
+ value: (keyof TData & string) | Array<keyof TData & string>;
336
+ /** Pivot dimension: one series per distinct value of this field. */
337
+ series?: keyof TData & string;
338
+ /** Aggregation when several rows share a category. Default `'sum'`. */
339
+ reduce?: "sum" | "avg" | "count";
340
+ /** Stack bar / area series instead of grouping them. */
341
+ stacked?: boolean;
342
+ /** Stack to 100% (implies `stacked`). */
343
+ stacked100?: boolean;
344
+ /** Order categories. Default: insertion order (value-desc when `topN` is set). */
345
+ sort?: "value-desc" | "value-asc" | "category" | "none";
346
+ /** Keep only the top N categories; bucket the rest into "Other". */
347
+ topN?: number;
348
+ /** Palette for series without an explicit colour. */
349
+ palette?: string[];
350
+ /** Number format for the value axis, tooltips and data labels. */
351
+ valueFormat?: ChartValueFormat;
352
+ /** Show the clickable legend. Default `true`. */
353
+ legend?: boolean;
354
+ /** Draw the value on each bar / point / slice. Default `false`. */
355
+ dataLabels?: boolean;
356
+ /** Show the search box above the chart (filters rows first). Default `true`. */
357
+ searchable?: boolean;
358
+ /** Placeholder for the search box. */
359
+ searchPlaceholder?: string;
360
+ };
361
+
362
+ export type BoardConfig<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData> = {
363
+ /** Field whose value buckets each row into a lane. */
364
+ groupBy: keyof TData & string;
365
+ /**
366
+ * Explicit, ordered lanes. Omit to derive lanes from the distinct
367
+ * `groupBy` values found in the data (first-seen order).
368
+ */
369
+ lanes?: ReadonlyArray<BoardLane>;
370
+ /** Custom card body. Receives the row. Omit for the built-in default card. */
371
+ card?: Snippet<[TData]>;
372
+ /**
373
+ * Fired when a card is dragged to a new lane/position. Update your data
374
+ * here (reassign the `groupBy` field, and optionally reorder). Without it
375
+ * the board is display-only.
376
+ */
377
+ onCardMove?: (event: BoardCardMoveEvent<TData>) => void;
378
+ /**
379
+ * Add-card affordance. A `+` in the lane header (or, with `composer`, a
380
+ * type-a-title box at the bottom of the lane) fires this with the lane id
381
+ * and - from the composer - the typed title.
382
+ */
383
+ onCardAdd?: (laneId: string, title?: string) => void;
384
+ /**
385
+ * Show a quick-add composer at the bottom of each lane (a "+ Add a card"
386
+ * button that opens an inline title input; Enter calls `onCardAdd(lane,
387
+ * title)`). Without it, `onCardAdd` shows a plain `+` in the header.
388
+ */
389
+ composer?: boolean;
390
+ /**
391
+ * Field holding a card's checklist of sub-tasks (`BoardSubtask[]`). The card
392
+ * shows a progress chip + bar and expands to an inline checklist with a
393
+ * quick-add. Toggles/adds run through an overlay (never mutating your data)
394
+ * and fire the callbacks below.
395
+ */
396
+ subtasks?: keyof TData & string;
397
+ /** Fired when a sub-task checkbox is toggled. */
398
+ onSubtaskToggle?: (row: TData, subtaskId: string | number, done: boolean) => void;
399
+ /** Fired when a sub-task is added from the card. */
400
+ onSubtaskAdd?: (row: TData, title: string) => void;
401
+ /**
402
+ * Field holding label/tag strings (or `{ text, color }`) shown as chips on
403
+ * the default card's badge row.
404
+ */
405
+ labelsField?: keyof TData & string;
406
+ /** Field holding a due date (Date | ISO string); shown as a badge, red when overdue. */
407
+ dueField?: keyof TData & string;
408
+ /**
409
+ * Field holding one or more assignee names (string | string[]); shown as
410
+ * avatar(s) on the default card's badge row.
411
+ */
412
+ assigneesField?: keyof TData & string;
413
+ /**
414
+ * Enable the built-in card editor: double-click a card (or press F2 while
415
+ * it is focused) to edit its fields inline. Fields are rendered from the
416
+ * columns that declare an `editorType` (or all fields if none do). Ignored
417
+ * when `onCardEdit` is set.
418
+ */
419
+ editable?: boolean;
420
+ /**
421
+ * Open your own editor instead of the built-in one. Called on double-click /
422
+ * F2 with the row; you might open a drawer or route to a detail screen.
423
+ */
424
+ onCardEdit?: (row: TData) => void;
425
+ /**
426
+ * Built-in **detail drawer**: opening a card (double-click / F2) shows an
427
+ * `SvDrawer` with an `SvForm` of its fields (kit editors). `true` = all
428
+ * fields; pass a {@link BoardDrawerConfig} to pick a subset / customize.
429
+ * Ignored when `onCardEdit` is set.
430
+ */
431
+ drawer?: boolean | BoardDrawerConfig<TData>;
432
+ /** Fired when the built-in editor is saved. Persist / mirror the changes. */
433
+ onCardCommit?: (event: BoardCardCommitEvent<TData>) => void;
434
+ /** Field used as the card title. Defaults to the first column's field. */
435
+ titleField?: keyof TData & string;
436
+ /**
437
+ * Column fields shown as label:value meta lines on the default card
438
+ * (max 4). Defaults to the first few non-title, non-groupBy columns.
439
+ */
440
+ cardFields?: ReadonlyArray<keyof TData & string>;
441
+ /**
442
+ * Second grouping axis: split the board into horizontal **swimlanes** by
443
+ * this field. Each swimlane band shows the full lane set with only its own
444
+ * cards. Dragging a card into another band reassigns this field too.
445
+ */
446
+ swimlaneBy?: keyof TData & string;
447
+ /** Let users collapse a swimlane band via its header chevron. */
448
+ collapsibleSwimlanes?: boolean;
449
+ /**
450
+ * Field holding a card's comments - `BoardComment[]` (or plain strings, or a
451
+ * number for a count only). Renders a comment-count badge that expands to a
452
+ * thread; provide the callbacks below to let users write / delete comments.
453
+ */
454
+ commentsField?: keyof TData & string;
455
+ /** Fired when a comment is added on the card; append it to your data. */
456
+ onCommentAdd?: (row: TData, text: string) => void;
457
+ /** Fired when a comment's delete button is pressed; remove it from your data. */
458
+ onCommentDelete?: (row: TData, commentId: string | number) => void;
459
+ /**
460
+ * Field holding a card's attachments - an array or a number. Renders an
461
+ * attachment-count badge on the default card.
462
+ */
463
+ attachmentsField?: keyof TData & string;
464
+ /**
465
+ * Field holding a cover colour (any CSS colour string) shown as a strip
466
+ * across the top of the default card.
467
+ */
468
+ coverField?: keyof TData & string;
469
+ /**
470
+ * Enforce `wipLimit`: reject a drop / keyboard move that would push a lane
471
+ * past its limit (the card snaps back). Off by default (the limit is a
472
+ * soft, visual flag only).
473
+ */
474
+ enforceWip?: boolean;
475
+ /** Let users collapse a lane to a slim strip by clicking its header. */
476
+ collapsibleLanes?: boolean;
477
+ /** Let users drag lane headers to reorder lanes (persisted with `persistKey`). */
478
+ reorderableLanes?: boolean;
479
+ /** Fired after a lane drag-reorder, with the new ordered lane ids. */
480
+ onLaneReorder?: (orderedIds: string[]) => void;
481
+ /**
482
+ * Enable inline lane rename: double-click a lane title to edit it. Fires
483
+ * with the lane id and new title - update your own lane config / data.
484
+ */
485
+ onLaneRename?: (laneId: string, title: string) => void;
486
+ /**
487
+ * Per-swimlane summary shown in the band header (e.g. a points/$ total or a
488
+ * WIP count). Receives the swimlane's cards and its id; return a short string.
489
+ */
490
+ swimlaneSummary?: (rows: TData[], swimId: string) => string;
491
+ /**
492
+ * Right-click (or long-press) a card to open a context menu. Return the
493
+ * menu items for that card; `ctx` gives board-native `moveTo(laneId)` and
494
+ * `edit()` helpers plus the lane list. Return empty/undefined for no menu.
495
+ */
496
+ cardMenu?: (row: TData, ctx: BoardMenuContext<TData>) => ReadonlyArray<MenuItem> | undefined;
497
+ /** Right-click a lane header for a lane context menu (rename / clear / add / collapse). */
498
+ laneMenu?: (laneId: string, ctx: BoardLaneMenuContext<TData>) => ReadonlyArray<MenuItem> | undefined;
499
+ /**
500
+ * Truthy field marks a card as **blocked** (waiting on a dependency): a red
501
+ * corner + a "Blocked" badge on the card. If the value is a non-empty string
502
+ * it is used as the blocked **reason** (shown in the badge tooltip). A blocked
503
+ * card is **locked from moving** (drag + keyboard) until it is unblocked - set
504
+ * {@link BoardConfig.flagBlocksMoves} `false` for a purely visual flag.
505
+ */
506
+ flagField?: keyof TData & string;
507
+ /** Whether a blocked (`flagField`) card is locked from moving. Defaults to `true`. */
508
+ flagBlocksMoves?: boolean;
509
+ /**
510
+ * Field holding a created/started date (Date | ISO string); shown as a
511
+ * relative **age** badge (e.g. `3d`).
512
+ */
513
+ ageField?: keyof TData & string;
514
+ /**
515
+ * Fields to expose as a **facet filter bar** above the board - a chip per
516
+ * distinct value; selecting chips filters the visible cards.
517
+ */
518
+ facets?: ReadonlyArray<keyof TData & string>;
519
+ /**
520
+ * Enable card **multi-select**: click to select, Ctrl/Cmd-click to toggle,
521
+ * and dragging a selected card moves the whole selection. Fires
522
+ * `onSelectionChange`.
523
+ */
524
+ selectable?: boolean;
525
+ /** Fired when the selection changes, with the selected rows. */
526
+ onSelectionChange?: (rows: TData[]) => void;
527
+ /**
528
+ * Field holding a card's **child rows** (`TData[]`) - the card gets a
529
+ * children count and expands to show them as nested mini-cards (epic ->
530
+ * stories). Each child renders its title and, if present, its `groupBy` value.
531
+ */
532
+ childrenField?: keyof TData & string;
533
+ /**
534
+ * Optional per-lane summary shown in the lane header (e.g. a story-point or
535
+ * dollar total). Receives the lane's cards (the current swimlane's, when
536
+ * `swimlaneBy` is set) and the lane id; return a short string.
537
+ */
538
+ laneSummary?: (rows: TData[], laneId: string) => string;
539
+ /** Show the built-in card search box (default `true`). */
540
+ searchable?: boolean;
541
+ /** Placeholder for the search box. Defaults to `"Search cards..."`. */
542
+ searchPlaceholder?: string;
543
+ /**
544
+ * Virtualize each lane so only the cards in view are in the DOM - for boards
545
+ * with thousands of cards per lane. Assumes roughly uniform card height; set
546
+ * `cardHeight` to match your cards.
547
+ */
548
+ virtualized?: boolean;
549
+ /** Estimated card height in px used by `virtualized` windowing (default 76). */
550
+ cardHeight?: number;
551
+ /**
552
+ * Persist the board layout (card positions, edits, collapsed lanes) to
553
+ * `localStorage` under this key, restored on load. Requires `getRowId` for
554
+ * stable identity across reloads.
555
+ */
556
+ persistKey?: string;
557
+ /** Called whenever the board layout changes, with the serializable state. */
558
+ onLayoutChange?: (layout: BoardLayout) => void;
559
+ };
560
+
561
+ /**
562
+ * The built-in event detail drawer for the scheduler. Set `scheduler.drawer`
563
+ * (`true` for all fields, or this object) and clicking an event opens a drawer
564
+ * with an `SvForm` of its fields. Mirrors {@link BoardDrawerConfig}.
565
+ */
566
+ export type SchedulerDrawerConfig<TData extends RowData = RowData> = {
567
+ /** Fields to show, in order. Omit for every column that has a `field`. */
568
+ fields?: ReadonlyArray<keyof TData & string>;
569
+ /** Drawer title - a string or derived from the row. Defaults to the title field. */
570
+ title?: string | ((row: TData) => string);
571
+ /** Which edge the drawer opens from. Defaults to `'right'`. */
572
+ side?: "right" | "left" | "top" | "bottom";
573
+ /** Drawer size (any CSS length). Defaults to `'380px'`. */
574
+ size?: string;
575
+ /** Save button label. Defaults to `'Save'`. */
576
+ submitLabel?: string;
577
+ /** Form columns inside the drawer. Defaults to `1`. */
578
+ columns?: number;
579
+ };
580
+
581
+ /** Emitted when an event is dragged to a new time (and/or resource). */
582
+ export type SchedulerEventMoveEvent<TData extends RowData = RowData> = {
583
+ /** The dragged row. */
584
+ row: TData;
585
+ /** New start / end after the move. */
586
+ start: Date;
587
+ end: Date;
588
+ /** Whether the event is all-day after the move. */
589
+ allDay: boolean;
590
+ /** Resource it came from (only with `resourceField`). */
591
+ fromResource?: string;
592
+ /** Resource it was dropped on (only with `resourceField`). */
593
+ toResource?: string;
594
+ };
595
+
596
+ /** Emitted when an event's start or end edge is dragged to resize it. */
597
+ export type SchedulerEventResizeEvent<TData extends RowData = RowData> = {
598
+ row: TData;
599
+ start: Date;
600
+ end: Date;
601
+ };
602
+
603
+ /**
604
+ * A drag-selected range (see `rangeSelectable`). `start`/`end` are a single
605
+ * CONTINUOUS datetime range - dragging across days makes it a longer span, not a
606
+ * per-day rectangle. `days` / `resourceIds` list the days / resources the range
607
+ * touched (for reference); `allDay` is true when the all-day row was dragged.
608
+ */
609
+ export type SchedulerRangeSelection = {
610
+ start: Date;
611
+ end: Date;
612
+ allDay?: boolean;
613
+ /** Every day the range touched (one entry for a within-a-day drag). */
614
+ days: Date[];
615
+ /** Every resource the range touched (empty without `resourceField`). */
616
+ resourceIds: string[];
617
+ };
618
+
619
+ /** Emitted when an event's built-in editor/drawer is saved. */
620
+ export type SchedulerEventCommitEvent<TData extends RowData = RowData> = {
621
+ row: TData;
622
+ /** Only the fields that changed, `{ field: newValue }`. */
623
+ changes: Record<string, unknown>;
624
+ /** The full set of edited field values. */
625
+ values: Record<string, unknown>;
626
+ };
627
+
628
+ /**
629
+ * One override of a single occurrence of a recurring event (stored in the row's
630
+ * `recurrenceExceptionsField`). `occurrenceStart` identifies the occurrence (its
631
+ * original start, like an iCal `RECURRENCE-ID`); `deleted` removes just that one,
632
+ * otherwise the given fields override it. Times are the same ISO / Date shape you
633
+ * store on the row.
634
+ */
635
+ export type SchedulerException = {
636
+ occurrenceStart: string | number | Date;
637
+ deleted?: boolean;
638
+ start?: string | number | Date;
639
+ end?: string | number | Date;
640
+ title?: string;
641
+ allDay?: boolean;
642
+ /**
643
+ * Per-occurrence overrides for ANY other field (e.g. attendees, calendar,
644
+ * color, resource). Merged over the row for just this occurrence, so "This
645
+ * event" can change fields beyond start / end / title / all-day.
646
+ */
647
+ fields?: Record<string, unknown>;
648
+ };
649
+
650
+ /** How a change to a recurring event should apply. */
651
+ export type SchedulerEditScope = "occurrence" | "following" | "series";
652
+
653
+ /**
654
+ * Fired when a single occurrence of a recurring event is edited or deleted (the
655
+ * user chose "This event"). Append/merge `exception` into the row's
656
+ * `recurrenceExceptionsField`; for `deleted` it carries `{ deleted: true }`.
657
+ */
658
+ export type SchedulerOccurrenceChangeEvent<TData extends RowData = RowData> = {
659
+ row: TData;
660
+ /** The occurrence's original start (its identity within the series). */
661
+ occurrenceStart: Date;
662
+ /** The override to store (already in real-instant time). */
663
+ exception: SchedulerException;
664
+ /**
665
+ * Which scope the user chose. `'occurrence'` (default): merge `exception` into
666
+ * the row. `'following'` ("this and all following"): split the series - stop
667
+ * the original series before `occurrenceStart` and start a NEW series at it
668
+ * carrying `exception`'s start/end/deleted. `'series'` never reaches here (it
669
+ * edits the base row directly). Handle `'following'` in your own data.
670
+ */
671
+ scope: SchedulerEditScope;
672
+ };
673
+
674
+ /**
675
+ * Turns the grid into a calendar / scheduler. Set `scheduler` and the grid
676
+ * renders its rows as events on a Month / Week / Day / Agenda calendar (bucketed
677
+ * by time, and optionally split into per-resource columns) instead of a table.
678
+ * Dragging an event fires {@link SchedulerConfig.onEventMove} where you reassign
679
+ * the start / end (and resource) on your own data. Like the Kanban board, it is
680
+ * a pure *view of the grid*: it renders the grid's filtered + sorted rows and
681
+ * writes back only through callbacks, never mutating your data.
682
+ */
683
+ export type SchedulerConfig<
684
+ TFeatures extends TableFeatures = TableFeatures,
685
+ TData extends RowData = RowData,
686
+ > = {
687
+ /** Field holding each event's start (`Date` | epoch-ms | ISO string). Required. */
688
+ startField: keyof TData & string;
689
+ /** Field holding the end. Omit to use `defaultDurationMin` from the start. */
690
+ endField?: keyof TData & string;
691
+ /** Boolean field marking an event as all-day (rendered in the all-day row). */
692
+ allDayField?: keyof TData & string;
693
+ /** Field for the event title. Defaults to the first column's field. */
694
+ titleField?: keyof TData & string;
695
+ /** Field holding a per-event accent color (any CSS color). Else `color`. */
696
+ colorField?: keyof TData & string;
697
+ /** Fallback accent color for every event. */
698
+ color?: string;
699
+ /**
700
+ * Field holding a SECONDARY accent color, rendered as a strip on the LEFT edge
701
+ * of the event - distinct from the main `colorField`. Lets an event encode two
702
+ * dimensions at once (e.g. main color = person, left strip = role).
703
+ */
704
+ secondaryColorField?: keyof TData & string;
705
+ /**
706
+ * Field holding a free/busy status that drives a distinct visual treatment
707
+ * (Outlook-style): `'busy'` (default solid), `'free'` (hollow / outline),
708
+ * `'tentative'` (hatched), `'oof'` / `'outOfOffice'` (distinct tint). Ties to
709
+ * iCal `STATUS`. Unrecognised values render as busy.
710
+ */
711
+ statusField?: keyof TData & string;
712
+ /**
713
+ * Field holding minutes-before-start for a reminder. When set (and the event
714
+ * is upcoming) the scheduler fires `onReminder` once as that lead time is
715
+ * crossed - pair it with a toast. Ties to iCal `VALARM`.
716
+ */
717
+ reminderField?: keyof TData & string;
718
+ /** Fired once when an event's reminder lead time is crossed (see `reminderField`). */
719
+ onReminder?: (row: TData, minutesUntil: number) => void;
720
+ /**
721
+ * Field holding a {@link RecurrenceRule} (or array) - the row renders as one
722
+ * event per matching day in view, keeping its time-of-day + duration.
723
+ */
724
+ recurrenceField?: keyof TData & string;
725
+ /**
726
+ * Field holding an array of {@link SchedulerException} - per-occurrence
727
+ * overrides of a recurring event (a moved / edited / deleted single instance).
728
+ * When set, editing a recurring occurrence offers "This event" vs "All events"
729
+ * and "This event" fires {@link onOccurrenceChange}.
730
+ */
731
+ recurrenceExceptionsField?: keyof TData & string;
732
+ /** Event length in minutes when a row has a start but no `endField`. Default 60. */
733
+ defaultDurationMin?: number;
734
+
735
+ /** Which views to offer in the toolbar. Default all four. */
736
+ views?: ReadonlyArray<SchedulerView>;
737
+ /** The view shown first. Default `'month'`. */
738
+ initialView?: SchedulerView;
739
+ /** The date the calendar opens on. Defaults to "today". */
740
+ initialDate?: Date | number | string;
741
+ /**
742
+ * Controlled anchor date - when this changes the calendar navigates to it (a
743
+ * mini date-picker or external "go to" can drive the view). Pair with
744
+ * {@link onNavigate} for two-way sync.
745
+ */
746
+ date?: Date | number | string;
747
+ /** Fired when the visible date changes (prev / next / today). */
748
+ onNavigate?: (date: Date) => void;
749
+ /** First day of the week, 0-6 (0 = Sunday). Default 0. */
750
+ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
751
+ /** Time-grid slot size in minutes (week / day snap granularity). Default 30. */
752
+ slotMinutes?: number;
753
+ /**
754
+ * Slot sizes (minutes) offered as a runtime picker in the Week / Day time-grid
755
+ * ruler, e.g. `[60, 30, 15, 5]`. When set, a size selector appears in the
756
+ * toolbar and the ruler subdivides accordingly; the active size starts at
757
+ * `slotMinutes`. Omit to hide the picker (the ruler still uses `slotMinutes`).
758
+ */
759
+ slotSizes?: ReadonlyArray<number>;
760
+ /** First / last hour shown in the time-grid band (0-24). Default 0..24. */
761
+ dayStartHour?: number;
762
+ dayEndHour?: number;
763
+
764
+ // --- booking rules: working hours, non-working days, conflicts -------------
765
+ /**
766
+ * Working-hours window (hours, e.g. `{ start: 9, end: 17 }`). Time outside it
767
+ * is shaded in the Week / Day time-grid. Visual only - see `disableConflicts`
768
+ * to enforce.
769
+ */
770
+ businessHours?: { start: number; end: number };
771
+ /** Weekday numbers (0 = Sun … 6 = Sat) shaded as non-working (e.g. `[0, 6]`). */
772
+ nonWorkingDays?: ReadonlyArray<number>;
773
+ /** Shade elapsed time on today's column (the past is "used up"). */
774
+ shadeUntilNow?: boolean;
775
+ /**
776
+ * Enforce the shaded time: reject a drag / resize / create that lands outside
777
+ * `businessHours` or on a `nonWorkingDays` day (snap back + flash). Without
778
+ * this the shading is a visual hint only.
779
+ */
780
+ restrictToBusinessHours?: boolean;
781
+ /**
782
+ * Prevent double-booking: dragging / resizing / creating an event so it
783
+ * overlaps another event **on the same resource** is rejected and reverted.
784
+ */
785
+ disableConflicts?: boolean;
786
+ /**
787
+ * Hard-blocked hour bands (e.g. a daily maintenance window `[{ start: 12, end: 13 }]`).
788
+ * Unlike `businessHours` these are ALWAYS non-bookable (drop / create rejected,
789
+ * no opt-in needed) and rendered as a distinct restricted (hatched) band.
790
+ */
791
+ restrictedHours?: ReadonlyArray<{ start: number; end: number }>;
792
+ /** Specific calendar dates that are fully blocked (no bookings) - e.g. closures. */
793
+ restrictedDates?: ReadonlyArray<Date | number | string>;
794
+ /**
795
+ * Highlighted dates (holidays, launches …) - a coloured strip + optional label
796
+ * on that day's column / month cell. Decorative; does not block booking.
797
+ */
798
+ specialDates?: ReadonlyArray<{ date: Date | number | string; label?: string; color?: string }>;
799
+ /** Earliest navigable / bookable date. Prev-nav stops here and creates are blocked before it. */
800
+ minDate?: Date | number | string;
801
+ /** Latest navigable / bookable date. Next-nav stops here and creates are blocked after it. */
802
+ maxDate?: Date | number | string;
803
+ /**
804
+ * Cap concurrent events per resource at any moment: a drag / resize / create
805
+ * that would make more than N events overlap on the same resource is rejected.
806
+ */
807
+ maxEventsPerSlot?: number;
808
+ /**
809
+ * Enable **undo / redo** of drag-move + resize with `Ctrl/Cmd+Z` and
810
+ * `Ctrl/Cmd+Shift+Z` (or `Ctrl+Y`). The scheduler re-emits the move/resize
811
+ * callbacks with the reversed values, so your data follows.
812
+ */
813
+ history?: boolean;
814
+ /**
815
+ * Show the current-time indicator - a line across today's column(s) in the
816
+ * Week / Day time-grid and the Day timeline, tracking the local time. On by
817
+ * default; set to `false` to hide it.
818
+ */
819
+ nowIndicator?: boolean;
820
+ /**
821
+ * IANA time zone (e.g. `'America/New_York'`) the whole calendar is shown in -
822
+ * the hour ruler, event positions, day boundaries, all-day grouping and the
823
+ * now-line. Defaults to the browser's local zone. Event `start`/`end` must be
824
+ * instant-unambiguous (UTC / offset ISO or epoch ms) for this to be correct;
825
+ * bare local strings are read as wall-clock in this zone.
826
+ */
827
+ timeZone?: string;
828
+ /**
829
+ * Extra read-only hour rulers for other zones (a "world clock"), shown left of
830
+ * the primary ruler in the Week / Day time-grid. Each entry's `label` heads its
831
+ * column (defaults to a short zone abbreviation).
832
+ */
833
+ secondaryTimeZones?: ReadonlyArray<{ id: string; label?: string }>;
834
+ /**
835
+ * How overlapping time-grid events are laid out. `split` (default) divides the
836
+ * width evenly per collision; `cap` shows up to `maxColumns` then a clickable
837
+ * `+N more` tile; `stack` overlaps them with an offset instead of shrinking.
838
+ */
839
+ collisionMode?: SchedulerCollisionMode;
840
+ /** For `collisionMode: 'cap'`: max side-by-side columns before overflow (min 2). Default 3. */
841
+ maxColumns?: number;
842
+ /** How many days the agenda view spans. Default 30. */
843
+ agendaDays?: number;
844
+
845
+ /**
846
+ * Field whose value groups events by resource (people, rooms, machines). In
847
+ * the Week / Day time-grid the columns split into resource x day groups; a
848
+ * resource filter/legend appears in every view. See {@link SchedulerResource}.
849
+ */
850
+ resourceField?: keyof TData & string;
851
+ /** Explicit, ordered resources (with colors). Omit to derive from the data. */
852
+ resources?: ReadonlyArray<SchedulerResource>;
853
+ /**
854
+ * Time-grid resource grouping order. `false` (default) groups by resource then
855
+ * day (resource-major); `true` groups by day then resource (date-major), like
856
+ * Smart's `groupByDate`. Only affects Week / Day when `resourceField` is set.
857
+ */
858
+ groupByDate?: boolean;
859
+
860
+ /** Timeline views only: width (px) of the left resource-label gutter. Default 160. */
861
+ resourceAreaWidth?: number;
862
+ /** `timelineDay` tick size + move/resize snap, in minutes. Default = `slotMinutes`. */
863
+ timelineSlotMinutes?: number;
864
+ /** Timeline views only: height (px) of one event lane inside a resource row. Default 26. */
865
+ timelineLaneHeight?: number;
866
+
867
+ /** Enable drag-to-move and edge-resize. Without it the calendar is read-only. */
868
+ editable?: boolean;
869
+ /** Fired when an event is dragged to a new time / resource. */
870
+ onEventMove?: (event: SchedulerEventMoveEvent<TData>) => void;
871
+ /** Fired when an event edge is dragged to resize it. */
872
+ onEventResize?: (event: SchedulerEventResizeEvent<TData>) => void;
873
+ /**
874
+ * Fired to create an event - double-clicking an empty slot, or confirming a
875
+ * pending range when no {@link onRangeSelect} is set. `allDay` is `true` when
876
+ * the slot / range is an all-day one (the all-day row, a month day cell, or a
877
+ * multi-day timeline zoom), so the handler can set the `allDayField`.
878
+ */
879
+ onEventAdd?: (start: Date, end: Date, resourceId?: string, allDay?: boolean) => void;
880
+ /**
881
+ * Fired when the event's Delete button is used. Setting this shows a Delete
882
+ * button in the detail drawer (and a `Delete` item is easy to add via
883
+ * `eventMenu`). Remove the row from your data in the handler.
884
+ */
885
+ onEventDelete?: (row: TData) => void;
886
+ /**
887
+ * Fired when a single occurrence of a recurring event is moved / resized /
888
+ * deleted with scope "This event". Merge `event.exception` into the row's
889
+ * `recurrenceExceptionsField` array (keyed by `occurrenceStart`).
890
+ */
891
+ onOccurrenceChange?: (event: SchedulerOccurrenceChangeEvent<TData>) => void;
892
+
893
+ /**
894
+ * Selecting empty cells: click or drag across the time-grid / timeline to mark
895
+ * a time range (and, across days / resources, a rectangle of cells). Arrow keys
896
+ * move the selection and `Shift`+arrows extend it. Marking only *marks* the
897
+ * range - it does NOT create anything. The event is created on an explicit
898
+ * confirm: press `Enter`, or right-click the selection and choose "Add Event".
899
+ * Confirming fires {@link onRangeSelect}, or falls back to `onEventAdd` for the
900
+ * first cell; `Escape` cancels the marker.
901
+ *
902
+ * On by default; set to `false` to disable.
903
+ */
904
+ rangeSelectable?: boolean;
905
+ /**
906
+ * Fired when a pending cell range is confirmed with `Enter` or the "Add Event"
907
+ * context menu (see {@link rangeSelectable}) - not on drag release.
908
+ */
909
+ onRangeSelect?: (selection: SchedulerRangeSelection) => void;
910
+ /**
911
+ * Multi-selecting existing events: Ctrl/Cmd-click toggles, Shift-click
912
+ * range-selects; a plain click clears. Selected events move together when one
913
+ * is dragged, and `Delete` removes them (via `onEventDelete`).
914
+ *
915
+ * On by default; set to `false` to disable.
916
+ */
917
+ eventSelectable?: boolean;
918
+ /** Fired when the set of multi-selected events changes. */
919
+ onEventSelectionChange?: (rows: TData[]) => void;
920
+
921
+ /**
922
+ * An "unscheduled" backlog list shown beside the Week / Day grid: drag an item
923
+ * onto the calendar to schedule it. Each item is `{ id, title, durationMin?,
924
+ * color? }`. Dropping fires {@link onSchedule} with the drop time + resource.
925
+ */
926
+ unscheduled?: ReadonlyArray<{ id: string; title: string; durationMin?: number; color?: string }>;
927
+ /** Optional heading for the unscheduled backlog panel. Default "Unscheduled". */
928
+ backlogTitle?: string;
929
+ /** Fired when an unscheduled item is dropped on the grid - create an event from it. */
930
+ onSchedule?: (item: { id: string; title: string; durationMin?: number; color?: string }, start: Date, resourceId?: string) => void;
931
+ /**
932
+ * Fired when an event is dragged OFF the calendar onto the backlog panel -
933
+ * remove it from the schedule (and typically push it back to `unscheduled`).
934
+ * Requires the backlog panel (an `unscheduled` list) to be visible.
935
+ */
936
+ onUnschedule?: (row: TData) => void;
937
+
938
+ /** Custom event body. Receives the row. Omit for the built-in default (title). */
939
+ event?: Snippet<[TData]>;
940
+ /**
941
+ * Hover tooltip for an event. Set a `Snippet<[TData]>` for custom content, or
942
+ * `true` for the built-in tooltip (title + time + resource). Omit to disable.
943
+ */
944
+ tooltip?: boolean | Snippet<[TData]>;
945
+ /** Delay (ms) before the hover tooltip opens. Default 400. */
946
+ tooltipDelay?: number;
947
+ /** Built-in detail drawer: `true` for all fields, or a config object. */
948
+ drawer?: boolean | SchedulerDrawerConfig<TData>;
949
+ /** Fired when the drawer / editor is saved. */
950
+ onEventCommit?: (event: SchedulerEventCommitEvent<TData>) => void;
951
+ /** Right-click menu for an event. Return items or `undefined` to suppress. */
952
+ eventMenu?: (row: TData) => MenuItem[] | undefined;
953
+
954
+ /** Show the search box (binds to the grid's global filter). Default `true`. */
955
+ searchable?: boolean;
956
+ searchPlaceholder?: string;
957
+ };
958
+
959
+ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData> = {
960
+ data: ReadonlyArray<TData>;
961
+ columns: Array<ColumnDef<TFeatures, TData>>;
962
+ /**
963
+ * Kanban board mode. When set, the grid renders its rows as cards in
964
+ * horizontal lanes (bucketed by `board.groupBy`) instead of a table. See
965
+ * {@link BoardConfig}.
966
+ */
967
+ board?: BoardConfig<TFeatures, TData>;
968
+ /**
969
+ * Scheduler / calendar mode. When set, the grid renders its rows as events on
970
+ * a Month / Week / Day / Agenda calendar instead of a table. See
971
+ * {@link SchedulerConfig}.
972
+ */
973
+ scheduler?: SchedulerConfig<TFeatures, TData>;
974
+ /**
975
+ * Chart view. When set, the grid renders its FILTERED + SORTED rows as a chart
976
+ * instead of a table (search / filters / sort flow through). Unlike board and
977
+ * scheduler, the renderer is free - the grid lazy-loads a built-in `SvChart`
978
+ * view, overridable via `registerChartView`. See {@link ChartViewConfig}.
979
+ */
980
+ chart?: ChartViewConfig<TFeatures, TData>;
981
+ /**
982
+ * Pivot mode. When set (and `pivotMode` is on), the grid renders its rows as a
983
+ * pivot table in place - the same grid, aggregated across `pivot.rows` /
984
+ * `pivot.cols` with nested column headers - instead of the flat table. The
985
+ * pivot ENGINE ships in `@svgrid/enterprise`; call `enablePivot()` (or
986
+ * `installEnterprise(api)`) to register it, otherwise an upsell note shows.
987
+ * See {@link GridPivotConfig}.
988
+ */
989
+ pivot?: GridPivotConfig<TData>;
990
+ /**
991
+ * Whether pivot mode is currently active. Defaults to `true` when `pivot` is
992
+ * set. Bindable so a toolbar toggle can flip between the pivot and the flat
993
+ * table over the same data.
994
+ */
995
+ pivotMode?: boolean;
996
+ /** Fired when the in-grid Pivot toggle flips `pivotMode`. */
997
+ onPivotModeChange?: (on: boolean) => void;
998
+ /**
999
+ * Right-click context menu. `true` shows the default item set (copy, cut,
1000
+ * paste, clear, insert row above/below, remove row, remove column). Pass an
1001
+ * array to customize: strings are built-in keys, `"separator"` is a divider,
1002
+ * and objects are custom items. Omitted/`false` disables the menu (native
1003
+ * browser menu shows instead).
1004
+ */
1005
+ contextMenu?: boolean | ReadonlyArray<ContextMenuItem<TData>>;
1006
+ /**
1007
+ * The feature set built with `tableFeatures({ ... })`. Optional - the
1008
+ * `sortable` / `filterable` / `groupable` shortcuts below inject the
1009
+ * matching feature for you, so a grid can be configured entirely from
1010
+ * the boolean shortcuts without importing the feature constants.
1011
+ */
1012
+ features?: TFeatures;
1013
+ /**
1014
+ * Convenience shortcuts to switch a whole capability on without wiring
1015
+ * `features` or the finer-grained props by hand. Every capability is OFF
1016
+ * by default - a bare grid is a plain read-only table - so set the
1017
+ * shortcut `true` to opt in. (`false` / omitted both leave it off; the
1018
+ * shortcut is mainly there to turn things ON.)
1019
+ *
1020
+ * `sortable` - column sorting (injects `rowSortingFeature`)
1021
+ * `filterable` - column filtering (injects `columnFilteringFeature`)
1022
+ * `editable` - inline cell editing (alias of `enableInlineEditing`)
1023
+ * `selectable` - cell selection (alias of `enableCellSelection`)
1024
+ * `groupable` - row grouping controls(alias of `showGroupingControls`,
1025
+ * also injects `columnGroupingFeature`)
1026
+ * `pageable` - pagination footer (alias of `showPagination`)
1027
+ *
1028
+ * Fine-grained props (`enableInlineEditing`, `showPagination`, ...) still
1029
+ * work; the shortcut wins only when it is explicitly set.
1030
+ */
1031
+ sortable?: boolean;
1032
+ filterable?: boolean;
1033
+ editable?: boolean;
1034
+ /**
1035
+ * Cell selection - click a cell to select it, drag or shift-click to extend
1036
+ * the selection to a range. Alias of `enableCellSelection`, and the highest
1037
+ * priority of the three inputs that decide it:
1038
+ * `selectable` -> `enableCellSelection` -> `selectionMode`.
1039
+ *
1040
+ * NOTE the asymmetry with its siblings, which are all off until you opt in:
1041
+ * this one is **ON by default**, because `selectionMode` defaults to
1042
+ * `'both'`. It is named here so the capability is discoverable next to the
1043
+ * other shortcuts, and so `selectable={false}` is a one-word way to turn
1044
+ * cell selection off (the longhand being `selectionMode="none"`, which also
1045
+ * removes the row-selection surface).
1046
+ *
1047
+ * This is the CELL surface only. The selection **checkbox column** is the
1048
+ * other half of `selectionMode`, controlled by `showRowSelection` - also on
1049
+ * by default, and it needs no feature import (verified: the column renders
1050
+ * and toggles rows with an empty `features` set). Use `selectionMode` when
1051
+ * you want to move both surfaces at once.
1052
+ */
1053
+ selectable?: boolean;
1054
+ /**
1055
+ * Client-side tree data: nest rows into a hierarchy by parent id.
1056
+ *
1057
+ * ```svelte
1058
+ * <SvGrid {data} {columns} treeData={{ parentField: 'managerId', column: 'name' }} />
1059
+ * ```
1060
+ *
1061
+ * Unlike grouping, tree rows are real data rows - they keep their cells,
1062
+ * editing and selection, and only gain an expander plus indentation in
1063
+ * `column`. Rows whose parent is missing become roots rather than vanishing.
1064
+ *
1065
+ * For NESTED source data (`children: [...]`), flatten it first with
1066
+ * `flattenTreeData(data, { childrenField: 'children' })` and point
1067
+ * `parentField` at the `__parentId` it stamps on.
1068
+ *
1069
+ * Setting this replaces row grouping - a row cannot be both.
1070
+ */
1071
+ treeData?: {
1072
+ /** Field holding each row's parent id. */
1073
+ parentField: string;
1074
+ /** Field holding the row's own id. Defaults to `'id'`. */
1075
+ idField?: string;
1076
+ /**
1077
+ * Column id that carries the expander + indentation. Defaults to the first
1078
+ * visible column.
1079
+ */
1080
+ column?: string;
1081
+ /** Indent per depth level, in px. Default `12`. */
1082
+ indentPx?: number;
1083
+ };
1084
+ groupable?: boolean;
1085
+ /**
1086
+ * Group the rows by these column ids, outermost first - `['region',
1087
+ * 'country']` rolls country up inside region.
1088
+ *
1089
+ * ```svelte
1090
+ * <SvGrid {data} {columns} {features} groupBy={['department']} />
1091
+ * ```
1092
+ *
1093
+ * The prop seeds the group-by list and re-applies whenever it changes, so it
1094
+ * works both as initial state and as a controlled value. The column menu and
1095
+ * `api.setGroupBy()` write the same state; a change from either survives
1096
+ * until this prop's own value changes.
1097
+ *
1098
+ * Ignored when `treeData` is set - a row cannot be both a hierarchy node and
1099
+ * bucketed under a group banner.
1100
+ */
1101
+ groupBy?: ReadonlyArray<string>;
1102
+ /**
1103
+ * Which group / tree rows are expanded, keyed by row id.
1104
+ *
1105
+ * Expansion is owned by the engine by default; pass this prop to hoist it
1106
+ * (saved views, "expand everything on load", persisted UI state). Like
1107
+ * `groupBy` it seeds the state and re-applies whenever it changes.
1108
+ *
1109
+ * Group row ids are built from the grouping path, not the display label:
1110
+ * `group_department_Engineering`, and one level deeper
1111
+ * `group_department_Engineering_role_Senior`. Tree rows key off the engine's
1112
+ * row id instead (set `getRowId` to make that your own id). Prefer capturing
1113
+ * the map from `onExpandedChange` over hand-building these keys.
1114
+ */
1115
+ expanded?: Record<string, boolean>;
1116
+ /**
1117
+ * Fired whenever the expanded set changes - chevron clicks,
1118
+ * `api.setRowExpanded()`, `expandAllGroups()` / `collapseAllGroups()`.
1119
+ * Receives the full next map, so it can be written straight back into
1120
+ * `expanded` for a controlled setup.
1121
+ */
1122
+ onExpandedChange?: (expanded: Record<string, boolean>) => void;
1123
+ /**
1124
+ * Render a subtotal row after each group's children, carrying that group's
1125
+ * aggregate values under the columns they belong to (the columns with an
1126
+ * `aggregate` set). Off by default.
1127
+ *
1128
+ * Footers are inserted after paging, so they never count against `pageSize` -
1129
+ * a page shows its `pageSize` data rows plus whatever footers close on it.
1130
+ */
1131
+ groupFooters?: boolean;
1132
+ /**
1133
+ * Append a grand-total row at the very end, aggregating the whole filtered
1134
+ * set (not just the current page) with each column's `aggregate` function.
1135
+ *
1136
+ * Independent of `groupFooters`: use it on a flat grid for a bottom totals
1137
+ * line, or alongside group subtotals for both. Like group footers it is
1138
+ * appended after paging, so it never counts against `pageSize` - but it is
1139
+ * only appended on the LAST page, so a total never appears mid-dataset.
1140
+ * Columns without an `aggregate` are left blank.
1141
+ */
1142
+ grandTotalRow?: boolean;
1143
+ /**
1144
+ * How grouped rows are displayed.
1145
+ *
1146
+ * - `groupRows` (default): a full-width banner row per group. Unchanged
1147
+ * behaviour - existing grids are untouched.
1148
+ * - `singleColumn`: one synthetic "Group" column holding every level,
1149
+ * indented by depth.
1150
+ * - `multipleColumns`: one synthetic column per grouped field.
1151
+ *
1152
+ * Both column modes hide the grouped source columns, since their values move
1153
+ * into the auto column(s), and render group rows as ordinary rows so their
1154
+ * aggregate cells line up under the real columns.
1155
+ */
1156
+ groupDisplayMode?: GroupDisplayType;
1157
+ /** Header for the combined `singleColumn` auto-group column. Default `"Group"`. */
1158
+ autoGroupColumnHeader?: string;
1159
+ /** Width (px) of each auto-group column. Default `220`. */
1160
+ autoGroupColumnWidth?: number;
1161
+ pageable?: boolean;
1162
+ loading?: boolean;
1163
+ /**
1164
+ * Render `loading` as a non-blocking overlay instead of replacing the
1165
+ * whole grid: the current rows stay visible (dimmed, with a top progress
1166
+ * bar) during a refetch, and the first load shows shimmer skeleton rows.
1167
+ * Ideal for server-paged grids so paging/sorting doesn't flash. Defaults
1168
+ * to `false` (the classic full "Loading..." replacement).
1169
+ */
1170
+ loadingOverlay?: boolean;
1171
+ /** Skeleton placeholder rows to show on first load. Defaults to 8. */
1172
+ loadingSkeletonRows?: number;
1173
+ error?: string | null;
1174
+ emptyMessage?: string;
1175
+ /**
1176
+ * The single place to localize the grid. One object with two fields:
1177
+ *
1178
+ * - `locale` - BCP-47 tag(s) for the DATA: accent/case-insensitive filter
1179
+ * matching AND every column's number / currency / percent / date formatting
1180
+ * (when the column's own `format.locales` is unset). The default for
1181
+ * `filterLocale` and per-column format locales.
1182
+ * - `text` - overrides for the grid's own UI STRINGS (empty state, tool panel,
1183
+ * pager, status bar, filter operator labels, context-menu items, upsell
1184
+ * notes). Any subset overrides the English defaults; unset keys stay English.
1185
+ *
1186
+ * ```svelte
1187
+ * <SvGrid localization={{ locale: 'fr-FR', text: { noRows: 'Aucune ligne' } }} />
1188
+ * ```
1189
+ *
1190
+ * Omitting it (or any field) is a no-op. See {@link GridMessages}.
1191
+ */
1192
+ localization?: GridLocalization;
1193
+ showGlobalFilter?: boolean;
1194
+ showColumnFilters?: boolean;
1195
+ /**
1196
+ * Quick way to pick a single filtering UI. When set it controls which of
1197
+ * the three filter surfaces appears (and is overridden per-surface by the
1198
+ * `showGlobalFilter` / `showColumnFilters` / `showFilterRow` props).
1199
+ * Defaults to `'menu'` (only the column menu's filter section is shown).
1200
+ */
1201
+ filterMode?: "row" | "menu" | "global" | "none";
1202
+ showGroupingControls?: boolean;
1203
+ showRowSelection?: boolean;
1204
+ showPagination?: boolean;
1205
+ /** Initial page size when pagination is enabled. Defaults to 10. */
1206
+ pageSize?: number;
1207
+ /** Page-size choices shown in the footer's selector. Defaults to `[10, 25, 50, 100]`. */
1208
+ pageSizeOptions?: number[];
1209
+ /**
1210
+ * Where the pagination footer sits: `'bottom'` (default), `'top'`, or `'both'`.
1211
+ * The status bar (when enabled) always stays at the bottom.
1212
+ */
1213
+ paginationPosition?: 'top' | 'bottom' | 'both';
1214
+ /**
1215
+ * Server-side pagination. When `true`, the grid renders its native
1216
+ * pagination footer from the `rowCount` / `pageIndex` you provide (rather
1217
+ * than counting the local rows), does NOT slice `data` (the rows you pass are
1218
+ * treated as the current page), and emits `onPaginationChange` when the user
1219
+ * pages or changes page size. Pair with `externalSort` / `externalFilter`
1220
+ * and a server data source. Requires `showPagination` / `pageable` to show
1221
+ * the footer. Controlled: you own `pageIndex` + `pageSize` + `rowCount`.
1222
+ */
1223
+ externalPagination?: boolean;
1224
+ /** Total rows on the server, for the footer's range + page count. Used with `externalPagination`. */
1225
+ rowCount?: number;
1226
+ /** Current 0-based page index. Used with `externalPagination` (controlled). */
1227
+ pageIndex?: number;
1228
+ /**
1229
+ * Fires when the user changes page or page size while `externalPagination`
1230
+ * is on. Fetch that page and update `data` / `rowCount` / `pageIndex`.
1231
+ */
1232
+ onPaginationChange?: (pagination: { pageIndex: number; pageSize: number }) => void;
1233
+ virtualization?: boolean;
1234
+ /** Row height in pixels. Pass a function `(rowIndex) => px` for
1235
+ * per-row variable heights (e.g. an interactive row-resize feature).
1236
+ * Defaults to 30. */
1237
+ rowHeight?: number | ((rowIndex: number) => number);
1238
+ /**
1239
+ * Size each row to its own content instead of a fixed height: cell text wraps
1240
+ * and the row grows to fit the tallest cell. Rows are measured after they
1241
+ * render, so this works with virtualization - `rowHeight` (or 30) is the
1242
+ * estimate used before a row has been measured, which keeps the scrollbar
1243
+ * stable while you scroll into new rows.
1244
+ *
1245
+ * Costs a measurement pass per row, so prefer a fixed `rowHeight` when your
1246
+ * content is uniform. Ignored when `rowHeight` is a function (you are already
1247
+ * supplying per-row heights).
1248
+ */
1249
+ autoRowHeight?: boolean;
1250
+ /**
1251
+ * Height (px) of a single column-header level row. With multi-level
1252
+ * (grouped) headers the total header height is `levels * headerHeight`,
1253
+ * since each level renders as its own row. When omitted, header rows size
1254
+ * to their content (the default). Does not affect the filter row.
1255
+ */
1256
+ headerHeight?: number;
1257
+ overscan?: number;
1258
+ /**
1259
+ * Height of the grid's scrollable shell. A number is treated as pixels;
1260
+ * a string is used as-is, so callers can pass `'100%'` or `'auto'` to
1261
+ * make the grid fill its parent. Defaults to 520 px.
1262
+ */
1263
+ containerHeight?: number | string;
1264
+ columnVirtualization?: boolean;
1265
+ columnOverscan?: number;
1266
+ columnWidth?: number;
1267
+ /**
1268
+ * Columns pinned to the left/right edge on mount. Each entry is a
1269
+ * column id (matches `ColumnDef.field` when no explicit id is set).
1270
+ * The internal pinning state is seeded once at mount; user-driven
1271
+ * pinning via the column menu still works and overrides this default.
1272
+ * Requires `columnVirtualization={false}` to be visible in the menu
1273
+ * UI (sticky positioning can't co-exist with column virtualization
1274
+ * since the virtualizer recycles DOM nodes).
1275
+ */
1276
+ initialColumnPinning?: {
1277
+ left?: ReadonlyArray<string>;
1278
+ right?: ReadonlyArray<string>;
1279
+ };
1280
+ /**
1281
+ * When `true`, columns are scaled proportionally so their total width
1282
+ * fills the viewport (no empty space on the right). Disabled by
1283
+ * default - explicit `width` values are used as-is. User resizes still
1284
+ * win once they happen.
1285
+ */
1286
+ fitColumns?: boolean;
1287
+ /**
1288
+ * Make the grid usable on narrow screens. When the grid's own width drops
1289
+ * below the breakpoint (default `640`px), pinned columns are un-pinned so the
1290
+ * whole grid pans, `fitColumns` scaling is suspended (columns keep their
1291
+ * natural widths and scroll), touch panning is smoothed, and columns whose
1292
+ * `hideBelow` exceeds the width are hidden. `true` uses the default
1293
+ * breakpoint; pass `{ breakpoint }` to change it. Off by default.
1294
+ */
1295
+ responsive?: boolean | { breakpoint?: number };
1296
+ showFilterMenu?: boolean;
1297
+ showFilterRow?: boolean;
1298
+ enableCellSelection?: boolean;
1299
+ /**
1300
+ * Highlight the row under the pointer. Default **false** - the hover tint can
1301
+ * compete with the cell selection / fill marquee. Set `true` to opt in; when
1302
+ * on, the hover no longer paints over selected cells so the selection stays
1303
+ * visible.
1304
+ */
1305
+ enableRowHover?: boolean;
1306
+ /**
1307
+ * Prepend a header row (the column labels) to copied cell ranges, so pasting
1308
+ * into Excel / Sheets includes the headers. Applies per copied range.
1309
+ */
1310
+ copyHeadersToClipboard?: boolean;
1311
+ /**
1312
+ * Transform each cell value on its way to the clipboard - e.g. strip
1313
+ * currency symbols, expand codes to labels, or redact. Receives the display
1314
+ * value plus the row/column context; return the string (or value) to copy.
1315
+ */
1316
+ processCellForClipboard?: (params: {
1317
+ value: unknown;
1318
+ column: unknown;
1319
+ row: TData;
1320
+ rowIndex: number;
1321
+ columnId: string;
1322
+ }) => unknown;
1323
+ enableInlineEditing?: boolean;
1324
+ /**
1325
+ * Full-row editing. When `true`, starting an edit puts the WHOLE row into
1326
+ * edit mode - every editable cell shows an inline editor at once - and a
1327
+ * single Enter (or focus leaving the row) commits all of them; Esc cancels
1328
+ * the whole row. Requires `enableInlineEditing`. The full-row editor covers
1329
+ * text / number / date / datetime / checkbox / list-select editor types.
1330
+ */
1331
+ fullRowEditing?: boolean;
1332
+ enableRowSummaries?: boolean;
1333
+ /**
1334
+ * Excel-style status bar under the grid showing live aggregates of the
1335
+ * selected cell range (count, numeric count, sum, average, min, max).
1336
+ * `true` shows the default set; pass `{ aggregates: [...] }` to choose
1337
+ * which. Requires `enableCellSelection`.
1338
+ */
1339
+ statusBar?:
1340
+ | boolean
1341
+ | {
1342
+ aggregates?: ReadonlyArray<
1343
+ "count" | "numericCount" | "sum" | "avg" | "min" | "max"
1344
+ >;
1345
+ };
1346
+ /**
1347
+ * Show the docked tool panel - the enterprise sidebar with Columns and
1348
+ * Filters tabs. A "Columns & Filters" button appears in a toolbar above the
1349
+ * grid; the panel docks on the right edge.
1350
+ */
1351
+ toolPanel?: boolean;
1352
+ /**
1353
+ * Integrated charting: `true` for the zero-config docked chart panel, or a
1354
+ * {@link ChartingConfig} object to author defaults + advanced options.
1355
+ */
1356
+ charting?: boolean | ChartingConfig<TData>;
1357
+ /**
1358
+ * Render the header column menu (⋮) as a tabbed popover - **General**,
1359
+ * **Filter**, and **Columns** tabs (the AG-Grid layout). Defaults to `false`,
1360
+ * which keeps the flat menu (actions list + "Choose columns" submenu).
1361
+ */
1362
+ columnMenuTabs?: boolean;
1363
+ /** Open the tool panel on first render (instead of collapsed). */
1364
+ toolPanelDefaultOpen?: boolean;
1365
+ /** Which tab the tool panel starts on. Defaults to `'columns'`. */
1366
+ toolPanelDefaultTab?: "columns" | "filters";
1367
+ /**
1368
+ * Quick way to pick which selection surfaces are active. `'row'` shows the
1369
+ * selection checkbox column only, `'cell'` allows rectangle/range cell
1370
+ * selection only, `'both'` (default) enables both, `'none'` disables both.
1371
+ * Overridden per-surface by `showRowSelection` / `enableCellSelection`.
1372
+ */
1373
+ selectionMode?: "row" | "cell" | "both" | "none";
1374
+ /**
1375
+ * Render a leading row-number column (1-based) before any selection
1376
+ * column. Useful as a permanent anchor when scrolling wide grids.
1377
+ */
1378
+ showRowNumbers?: boolean;
1379
+ /**
1380
+ * Paint alternating data rows with the `--sg-row-alt-bg` color (zebra
1381
+ * striping). Only data rows stripe - pinned, group, detail, and summary
1382
+ * rows keep their single background. Defaults to `false`.
1383
+ */
1384
+ zebraRows?: boolean;
1385
+ /**
1386
+ * Width (px) of the row-number column. Defaults to 56, which fits up
1387
+ * to "99,999"; bump this when the dataset crosses six digits so the
1388
+ * largest row number stays fully visible at the bottom of a scroll.
1389
+ */
1390
+ rowNumberWidth?: number;
1391
+ /** Receives the imperative grid API once the component has mounted. */
1392
+ onApiReady?: (api: SvGridApi<TFeatures, TData>) => void;
1393
+ /**
1394
+ * Fires whenever the row-selection state changes. The first argument
1395
+ * is the new selection record `{ [rowId]: true }`; the second is the
1396
+ * array of selected `TData` rows.
1397
+ */
1398
+ onRowSelectionChange?: (
1399
+ selection: Record<string, boolean>,
1400
+ rows: TData[],
1401
+ ) => void;
1402
+ /**
1403
+ * Fires whenever the cell-selection rectangle changes (mouse, keyboard,
1404
+ * or `api.selectCells()`). `ranges` matches `api.getSelected()` -
1405
+ * `[rowStart, colStart, rowEnd, colEnd]` rectangles in grid coords.
1406
+ * Empty array when the user clears the selection.
1407
+ */
1408
+ onCellSelectionChange?: (
1409
+ ranges: Array<[number, number, number, number]>,
1410
+ ) => void;
1411
+ /**
1412
+ * When `true`, the grid records sort state (and renders sort indicators
1413
+ * + cycling on headers) but does NOT actually re-order the rows. The
1414
+ * consumer is expected to sort `data` themselves - typically via
1415
+ * `onSortingChange`. Use this for tree/hierarchical data, where a flat
1416
+ * global sort would break parent-child adjacency. Defaults to `false`.
1417
+ */
1418
+ externalSort?: boolean;
1419
+ /**
1420
+ * Fires whenever the sort clauses change. Receives the new array of
1421
+ * `{ id, desc }` entries. Pair with `externalSort={true}` when the
1422
+ * consumer wants to own the row ordering.
1423
+ */
1424
+ onSortingChange?: (sorting: Array<{ id: string; desc: boolean }>) => void;
1425
+ /**
1426
+ * The sort state to start in - `{ id, desc }` entries. Use with `externalSort`
1427
+ * when the initial ordering is decided server-side (e.g. a URL `?sort=` param
1428
+ * read in a SvelteKit `load`), so the header sort indicators match the already-
1429
+ * sorted data on first render. Applied once at mount; user sorting takes over.
1430
+ */
1431
+ initialSorting?: Array<{ id: string; desc: boolean }>;
1432
+ /**
1433
+ * The advanced-filter expression to start in (Pro). Applied once at mount;
1434
+ * change it afterwards through `api.setAdvancedFilter()`.
1435
+ *
1436
+ * Filtering only happens once `@svgrid/enterprise`'s `enableAdvancedFilter()`
1437
+ * has registered a compiler - without it the expression is stored and
1438
+ * reported but no rows are removed, so the free grid degrades to a no-op
1439
+ * rather than to a wrong row set.
1440
+ */
1441
+ initialAdvancedFilter?: GridPredicateExpr | null;
1442
+ /**
1443
+ * Fires whenever the advanced-filter expression changes, whatever changed it:
1444
+ * `api.setAdvancedFilter()`, `clearAllFilters()`, or the toolbar's clear
1445
+ * control.
1446
+ *
1447
+ * The panel that authors the expression is mounted by you, outside the grid,
1448
+ * so it cannot see a change the grid made on its own. Without this, clearing
1449
+ * from the toolbar leaves that panel showing a filter the grid is no longer
1450
+ * applying. Feed this back into the panel's `expression` prop to keep them
1451
+ * agreeing.
1452
+ */
1453
+ onAdvancedFilterChange?: (expr: GridPredicateExpr | null) => void;
1454
+ /**
1455
+ * When `true`, the grid still records column-filter / global-filter /
1456
+ * facet state (so the menu UI works and indicators light up) but does
1457
+ * NOT actually filter the rows. The consumer is expected to fetch / sort
1458
+ * / filter the data themselves - typically via `onFiltersChange`. Used
1459
+ * by server-side data sources. Defaults to `false`.
1460
+ */
1461
+ externalFilter?: boolean;
1462
+ /**
1463
+ * Fires whenever any of the in-grid filter state changes - global
1464
+ * search, per-column operator filters, or facet (value-checklist)
1465
+ * filters. Pair with `externalFilter={true}` when the consumer wants to
1466
+ * push the query to the server.
1467
+ */
1468
+ onFiltersChange?: (filters: {
1469
+ global: string;
1470
+ columns: Array<{
1471
+ id: string;
1472
+ operator: FilterOperator;
1473
+ value: string;
1474
+ /**
1475
+ * Upper bound for the `between` operator. Only set when
1476
+ * `operator === 'between'` AND the user has typed both values.
1477
+ */
1478
+ valueTo?: string;
1479
+ selectedValues?: Array<string>;
1480
+ }>;
1481
+ }) => void;
1482
+ /**
1483
+ * Fires when an inline edit is committed (Enter / Tab / blur). Useful
1484
+ * for cascade-recompute pipelines: a parent listens, then refreshes
1485
+ * derived columns or aggregates. The wrapper has already written the
1486
+ * parsed value back into the row by the time this fires.
1487
+ */
1488
+ /**
1489
+ * Resolve a stable id per row. Drives selection, expansion, edit,
1490
+ * and active-cell state. When omitted, the row's array index is
1491
+ * used - fine for read-only views but the wrong choice if `data`
1492
+ * gets reordered or filtered outside the grid (selection would
1493
+ * follow positions, not actual rows). Use a database PK, a UUID,
1494
+ * or any stable string.
1495
+ */
1496
+ getRowId?: (row: TData, index: number) => string;
1497
+ /**
1498
+ * Conditional class(es) added to every `<tr>` body row. Receives
1499
+ * the row's `original` data + its data-array index. Return a
1500
+ * string, an array of strings, or an object mapping class names to
1501
+ * booleans. Useful for "highlight overdue rows", "tint cancelled
1502
+ * orders", and similar row-level state mappings.
1503
+ */
1504
+ rowClass?: (ctx: {
1505
+ row: TData;
1506
+ rowIndex: number;
1507
+ }) => string | ReadonlyArray<string> | Record<string, boolean> | undefined | null;
1508
+ /**
1509
+ * Per-cell notes - longer free-form comments shown as a corner
1510
+ * indicator + tooltip on hover. Keyed by row id then column id;
1511
+ * empty / missing entries mean "no note". The grid owns rendering;
1512
+ * you own storage (write your own callbacks to add / edit notes).
1513
+ */
1514
+ notes?: Record<string, Record<string, string>>;
1515
+ /**
1516
+ * Allow editing per-cell notes/comments through the UI: the context menu
1517
+ * gains an "Edit comment" item that opens a popover editor. Edits are
1518
+ * applied to an internal overlay for immediate feedback and emitted via
1519
+ * `onNoteChange` so you can persist them back into `notes`.
1520
+ */
1521
+ editableComments?: boolean;
1522
+ /** Fires when a comment is saved or removed (removed = empty `note`). */
1523
+ onNoteChange?: (event: { rowId: string; columnId: string; note: string }) => void;
1524
+ /**
1525
+ * Excel-style conditional formatting. A list of value-driven rules that
1526
+ * color cells: `colorScale` (gradient across the column range),
1527
+ * `dataBar` (in-cell proportional bar), `iconSet` (arrows / traffic /
1528
+ * triangles by threshold), and `rule` (apply a style when a predicate
1529
+ * matches). Scope a format to specific columns with `columns: [...]`,
1530
+ * or omit it to apply to every column. Later entries win on conflict.
1531
+ */
1532
+ conditionalFormats?: ReadonlyArray<ConditionalFormat<TData>>;
1533
+ /**
1534
+ * Which rows feed the min/max range that `colorScale` / `dataBar` formats
1535
+ * scale against.
1536
+ *
1537
+ * - `filtered` (default): every row that survives the filters, ignoring the
1538
+ * page slice. The scale follows what you filtered to but does not shift
1539
+ * when you page, so the same value keeps the same colour on page 1 and
1540
+ * page 2.
1541
+ * - `visible`: only the rows currently on screen. Rescales per page - use it
1542
+ * when you want each page's heat map normalized to that page.
1543
+ * - `all`: the full unfiltered dataset, for a scale that stays put as you
1544
+ * filter.
1545
+ */
1546
+ conditionalStatScope?: "filtered" | "visible" | "all";
1547
+ onCellValueChange?: (event: {
1548
+ rowIndex: number;
1549
+ columnId: string;
1550
+ oldValue: unknown;
1551
+ newValue: unknown;
1552
+ row: TData;
1553
+ }) => void;
1554
+ /**
1555
+ * Fires whenever the active cell changes - click, keyboard move,
1556
+ * tab, page-up/down, etc. Consumers (toolbars, ribbon UIs) use this
1557
+ * to stay synced with the grid's selection without polling the DOM.
1558
+ */
1559
+ onActiveCellChange?: (cell: {
1560
+ rowIndex: number;
1561
+ colIndex: number;
1562
+ columnId: string;
1563
+ }) => void;
1564
+ /**
1565
+ * Fires when a data cell (and therefore a row) is single-clicked.
1566
+ * Group-header rows are excluded. `value` is the displayed cell value.
1567
+ */
1568
+ onCellClick?: (event: {
1569
+ rowIndex: number;
1570
+ colIndex: number;
1571
+ columnId: string;
1572
+ value: unknown;
1573
+ row: TData;
1574
+ }) => void;
1575
+ /** Fires when a data row is single-clicked (any cell). Group rows excluded. */
1576
+ onRowClick?: (event: {
1577
+ rowIndex: number;
1578
+ columnId: string;
1579
+ row: TData;
1580
+ }) => void;
1581
+ /**
1582
+ * Fires when a data cell is double-clicked - independent of whether the
1583
+ * cell is editable, so it fires even on read-only grids. Group rows excluded.
1584
+ */
1585
+ onCellDoubleClick?: (event: {
1586
+ rowIndex: number;
1587
+ colIndex: number;
1588
+ columnId: string;
1589
+ value: unknown;
1590
+ row: TData;
1591
+ }) => void;
1592
+ /** Fires when a data row is double-clicked (any cell). Group rows excluded. */
1593
+ onRowDoubleClick?: (event: {
1594
+ rowIndex: number;
1595
+ columnId: string;
1596
+ row: TData;
1597
+ }) => void;
1598
+ /**
1599
+ * Fires once each time the body is scrolled to (within ~32px of) the
1600
+ * bottom. Re-arms after the user scrolls back up. The canonical hook for
1601
+ * infinite / lazy loading - append more rows to `data` when it fires.
1602
+ */
1603
+ onScrollBottomReached?: (event: {
1604
+ scrollTop: number;
1605
+ scrollHeight: number;
1606
+ clientHeight: number;
1607
+ }) => void;
1608
+ /**
1609
+ * Marks a row as an expandable "detail row". When this returns true the
1610
+ * grid renders that row as a SINGLE full-width cell (colspan across every
1611
+ * column) using `renderDetailRow`, instead of the normal per-column cells
1612
+ * - the canonical Stripe / GitHub "expand a rich panel beneath the row"
1613
+ * pattern. Insert the detail rows into `data` yourself (typically right
1614
+ * after the row they belong to) and toggle them with your own expanded
1615
+ * state. Pair with `virtualization={false}` so the variable-height detail
1616
+ * isn't clipped by the fixed-row-height virtualizer.
1617
+ */
1618
+ isDetailRow?: (row: TData, rowIndex: number) => boolean;
1619
+ /**
1620
+ * Snippet rendered inside the full-width detail cell for rows where
1621
+ * `isDetailRow` is true. Receives the row's data and its index.
1622
+ */
1623
+ renderDetailRow?: Snippet<[{ row: TData; rowIndex: number }]>;
1624
+ /**
1625
+ * Server-side group / tree keyboard + accessibility, built into the grid. When
1626
+ * set, the grid uses the treegrid role and marks matching rows with
1627
+ * `aria-level` / `aria-expanded`, and ArrowRight / ArrowLeft expand / collapse
1628
+ * the focused group row (no app-level key handling). Pair with `serverGroupRows`
1629
+ * + `SvGroupCell` for the visual expander. Every accessor receives the row data.
1630
+ */
1631
+ serverGroup?: {
1632
+ /** Whether a row is an expandable group / branch. */
1633
+ isGroup: (row: TData) => boolean;
1634
+ /** Tree depth of the row (0 = top level), for `aria-level`. */
1635
+ level: (row: TData) => number;
1636
+ /** Whether an expandable row is currently expanded. */
1637
+ expanded?: (row: TData) => boolean;
1638
+ /** Expand / collapse a group row. Called on ArrowRight / ArrowLeft. */
1639
+ onToggle: (row: TData) => void;
1640
+ };
1641
+ /**
1642
+ * Server-side set-filter values. When set, a column's filter checklist is
1643
+ * populated by fetching the distinct values from the server (once per column,
1644
+ * cached) instead of deriving them from the loaded page - so the checklist
1645
+ * shows every value, not just those on screen. Return the distinct string
1646
+ * values for the column id.
1647
+ */
1648
+ serverFilterValues?: (columnId: string) => Promise<string[]>;
1649
+ /**
1650
+ * Rows to pin to the TOP of the grid - rendered above the regular
1651
+ * rows and sticky-positioned so they stay visible while the user
1652
+ * scrolls. Typical use: a "totals" or "headline" row that should
1653
+ * always be in view. Rows are read-only (no inline editing, no
1654
+ * row-selection checkbox). They share the column schema with the
1655
+ * main grid; field/format/cell/cellClass all apply.
1656
+ */
1657
+ pinnedTopRows?: ReadonlyArray<TData>;
1658
+ /**
1659
+ * Rows to pin to the BOTTOM of the grid - rendered below the regular
1660
+ * rows and sticky-positioned (sticks to the bottom of the viewport
1661
+ * while the user scrolls). Typical use: a "page totals" or "grand
1662
+ * total" row computed from `getDisplayedRows()`.
1663
+ */
1664
+ pinnedBottomRows?: ReadonlyArray<TData>;
1665
+ /**
1666
+ * Enables drag-to-reorder on the grid's column headers. When `true`,
1667
+ * every header gets `draggable=true` and a drop indicator paints
1668
+ * between headers during a drag. On drop the grid mutates its
1669
+ * internal column order and fires `onColumnOrderChange` with the
1670
+ * new order. Defaults to `false`.
1671
+ */
1672
+ enableColumnReorder?: boolean;
1673
+ /**
1674
+ * Initial column order, by `id` (falls back to `field`). When the
1675
+ * user reorders columns, this is the starting state. After mount,
1676
+ * the grid owns the order internally and emits `onColumnOrderChange`
1677
+ * on every change - persist that to `localStorage` to restore.
1678
+ */
1679
+ columnOrder?: ReadonlyArray<string>;
1680
+ /** Fires every time the column order changes (drag or `api.setColumnOrder`). */
1681
+ onColumnOrderChange?: (order: ReadonlyArray<string>) => void;
1682
+ /**
1683
+ * Infer each column's data type (number / boolean / date / ISO date-string /
1684
+ * text) from the first data row, for columns that declare neither an
1685
+ * explicit `editorType` nor a `cellDataType`. Sets the matching editor,
1686
+ * alignment, date format, and filter operators automatically. Explicit
1687
+ * column config always wins. Defaults to `false`.
1688
+ */
1689
+ inferColumnTypes?: boolean;
1690
+ /**
1691
+ * Enables managed row dragging. When `true`, every row becomes a drag
1692
+ * source (grab cursor + a grip in the row-number cell) and a drop
1693
+ * indicator paints between rows during a drag. On drop the grid mutates
1694
+ * its own internal data - reordering within the grid, or moving the row
1695
+ * across grids that share the same {@link rowDragGroup}. Defaults to
1696
+ * `false`.
1697
+ */
1698
+ rowDragManaged?: boolean;
1699
+ /**
1700
+ * Connection group for cross-grid row dragging. Grids that share the same
1701
+ * non-empty `rowDragGroup` string (and have `rowDragManaged` on) can
1702
+ * exchange rows: dragging a row out of one and dropping it into another
1703
+ * removes it from the source and inserts it into the target. Omit to keep
1704
+ * dragging confined to reordering within a single grid.
1705
+ */
1706
+ rowDragGroup?: string;
1707
+ /**
1708
+ * Fires on the TARGET grid after a managed row drag settles, with the
1709
+ * moved row, its landing index, whether it stayed in the same grid, and
1710
+ * the source / target grid ids. Use it to mirror the move into your own
1711
+ * state (persistence, server sync). The grid has already applied the
1712
+ * change to its internal data by the time this fires.
1713
+ */
1714
+ onRowDragEnd?: (event: {
1715
+ row: TData;
1716
+ toIndex: number;
1717
+ sameGrid: boolean;
1718
+ fromGridId: number;
1719
+ toGridId: number;
1720
+ }) => void;
1721
+ /**
1722
+ * Align this grid with others that share the same non-empty
1723
+ * `alignedGridGroup` string: horizontal scroll and column-resize widths are
1724
+ * kept in lockstep across every grid in the group. Use for a totals/header
1725
+ * grid above a body grid, or side-by-side comparison grids that must line up.
1726
+ * The grids should declare the same columns (matched by id) for widths to map.
1727
+ */
1728
+ alignedGridGroup?: string;
1729
+ /**
1730
+ * BCP-47 locale tag (or array of fallbacks) used for accent- and
1731
+ * case-insensitive text filtering / sorting / search. Powered by
1732
+ * `Intl.Collator` with `sensitivity: 'base'`, so "cafe", "Café"
1733
+ * and "CAFÉ" all match "cafe" without strain. Defaults to the
1734
+ * browser's locale.
1735
+ */
1736
+ filterLocale?: string | ReadonlyArray<string>;
1737
+ };
1738
+
1739
+ /**
1740
+ * The grid's single localization surface (see {@link Props.localization}):
1741
+ * `locale` handles the data (filter matching + number/date formatting) and
1742
+ * `text` handles the UI strings.
1743
+ */
1744
+ export type GridLocalization = {
1745
+ /** BCP-47 tag(s) for filter matching + number / date formatting. */
1746
+ locale?: string | ReadonlyArray<string>;
1747
+ /** Overrides for the grid's own UI strings. */
1748
+ text?: Partial<GridMessages>;
1749
+ };
1750
+
1751
+ export type SelectionPoint = { rowIndex: number; colIndex: number };
1752
+ export type SelectionRange = {
1753
+ anchor: SelectionPoint | null;
1754
+ focus: SelectionPoint | null;
1755
+ };
1756
+ export type CellEditState = {
1757
+ rowId: string;
1758
+ columnId: string;
1759
+ editorType: CellEditorType;
1760
+ value: unknown;
1761
+ /**
1762
+ * The row's underlying data object, captured when the edit started. The
1763
+ * commit path resolves the row by id first; this is the fallback for when
1764
+ * the row has left the row model mid-edit (a filter typed into the filter
1765
+ * row while an editor is open), so the typed value still lands instead of
1766
+ * being silently dropped.
1767
+ */
1768
+ rowRef?: unknown;
1769
+ } | null;
1770
+ export type FilterOperator =
1771
+ | "contains"
1772
+ | "notContains"
1773
+ | "equals"
1774
+ | "notEquals"
1775
+ | "startsWith"
1776
+ | "endsWith"
1777
+ | "regex"
1778
+ | "in"
1779
+ | "notIn"
1780
+ | "greaterThan"
1781
+ | "lessThan"
1782
+ | "between"
1783
+ | "isBlank"
1784
+ | "isNotBlank";
1785
+ export type FilterOption = {
1786
+ value: FilterOperator;
1787
+ label: string;
1788
+ iconName: string;
1789
+ };
1790
+ export type MenuPosition = { x: number; y: number };