@svgrid/grid 2.2.26 → 2.2.27

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