@vaadin/grid 25.1.0-alpha8 → 25.1.0-beta1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +12 -12
- package/web-types.json +706 -706
- package/web-types.lit.json +248 -248
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/grid",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -20,64 +20,64 @@
|
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
23
|
-
"name": "?
|
|
24
|
-
"description": "When
|
|
23
|
+
"name": "?frozen",
|
|
24
|
+
"description": "When true, the column is frozen. When a column inside of a column group is frozen,\nall of the sibling columns inside the group will get frozen also.",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"name": "?
|
|
31
|
-
"description": "When true, the column is frozen
|
|
30
|
+
"name": "?frozenToEnd",
|
|
31
|
+
"description": "When true, the column is frozen to end of grid.\n\nWhen a column inside of a column group is frozen to end, all of the sibling columns\ninside the group will get frozen to end also.\n\nColumn can not be set as `frozen` and `frozenToEnd` at the same time.",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"name": "?
|
|
38
|
-
"description": "When
|
|
37
|
+
"name": "?hidden",
|
|
38
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
|
-
"name": "?
|
|
45
|
-
"description": "When true, the
|
|
44
|
+
"name": "?resizable",
|
|
45
|
+
"description": "When set to true, the column is user-resizable.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
|
-
"name": "?
|
|
52
|
-
"description": "When
|
|
51
|
+
"name": "?rowHeader",
|
|
52
|
+
"description": "When true, the cells for this column will be rendered with the `role` attribute\nset as `rowheader`, instead of the `gridcell` role value used by default.\n\nWhen a column is set as row header, its cells will be announced by screen readers\nwhile navigating to help user identify the current row as uniquely as possible.",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": ".
|
|
59
|
-
"description": "
|
|
58
|
+
"name": ".footerPartName",
|
|
59
|
+
"description": "Custom part name for the footer cell.",
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
|
-
"name": ".
|
|
66
|
-
"description": "
|
|
65
|
+
"name": ".footerRenderer",
|
|
66
|
+
"description": "Custom function for rendering the footer content.\nReceives two arguments:\n\n- `root` The footer cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
|
-
"name": ".
|
|
73
|
-
"description": "
|
|
72
|
+
"name": ".header",
|
|
73
|
+
"description": "Text content to display in the header cell of the column.",
|
|
74
74
|
"value": {
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
|
-
"name": ".
|
|
80
|
-
"description": "Custom part name for the
|
|
79
|
+
"name": ".headerPartName",
|
|
80
|
+
"description": "Custom part name for the header cell.",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
@@ -90,8 +90,8 @@
|
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
|
-
"name": ".
|
|
94
|
-
"description": "
|
|
93
|
+
"name": ".textAlign",
|
|
94
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|
|
@@ -100,12 +100,12 @@
|
|
|
100
100
|
},
|
|
101
101
|
{
|
|
102
102
|
"name": "vaadin-grid-column",
|
|
103
|
-
"description": "A `<vaadin-grid-column>` is used to configure how a column in `<vaadin-grid>`\nshould look like.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
103
|
+
"description": "A `<vaadin-grid-column>` is used to configure how a column in `<vaadin-grid>`\nshould look like.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-grid) documentation for instructions on how\nto configure the `<vaadin-grid-column>`.",
|
|
104
104
|
"extension": true,
|
|
105
105
|
"attributes": [
|
|
106
106
|
{
|
|
107
|
-
"name": "?
|
|
108
|
-
"description": "
|
|
107
|
+
"name": "?autoWidth",
|
|
108
|
+
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.\n\nFor performance reasons the column width is calculated automatically only once when the grid items\nare rendered for the first time and the calculation only considers the rows which are currently\nrendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell\ncontent changes, the column width might not match the contents anymore.\n\nHidden columns are ignored in the calculation and their widths are not automatically updated when\nyou show a column that was initially hidden.\n\nYou can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`.\n\nThe column width may still grow larger when `flexGrow` is not 0.",
|
|
109
109
|
"value": {
|
|
110
110
|
"kind": "expression"
|
|
111
111
|
}
|
|
@@ -125,92 +125,92 @@
|
|
|
125
125
|
}
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
|
-
"name": "?
|
|
129
|
-
"description": "When true, the cells for this column
|
|
128
|
+
"name": "?hidden",
|
|
129
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
130
130
|
"value": {
|
|
131
131
|
"kind": "expression"
|
|
132
132
|
}
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
|
-
"name": "?
|
|
136
|
-
"description": "When set to true, the
|
|
135
|
+
"name": "?resizable",
|
|
136
|
+
"description": "When set to true, the column is user-resizable.",
|
|
137
137
|
"value": {
|
|
138
138
|
"kind": "expression"
|
|
139
139
|
}
|
|
140
140
|
},
|
|
141
141
|
{
|
|
142
|
-
"name": "?
|
|
143
|
-
"description": "
|
|
142
|
+
"name": "?rowHeader",
|
|
143
|
+
"description": "When true, the cells for this column will be rendered with the `role` attribute\nset as `rowheader`, instead of the `gridcell` role value used by default.\n\nWhen a column is set as row header, its cells will be announced by screen readers\nwhile navigating to help user identify the current row as uniquely as possible.",
|
|
144
144
|
"value": {
|
|
145
145
|
"kind": "expression"
|
|
146
146
|
}
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
|
-
"name": ".
|
|
150
|
-
"description": "
|
|
149
|
+
"name": ".flexGrow",
|
|
150
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
151
151
|
"value": {
|
|
152
152
|
"kind": "expression"
|
|
153
153
|
}
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
|
-
"name": ".
|
|
157
|
-
"description": "
|
|
156
|
+
"name": ".footerPartName",
|
|
157
|
+
"description": "Custom part name for the footer cell.",
|
|
158
158
|
"value": {
|
|
159
159
|
"kind": "expression"
|
|
160
160
|
}
|
|
161
161
|
},
|
|
162
162
|
{
|
|
163
|
-
"name": ".
|
|
164
|
-
"description": "Custom
|
|
163
|
+
"name": ".footerRenderer",
|
|
164
|
+
"description": "Custom function for rendering the footer content.\nReceives two arguments:\n\n- `root` The footer cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
165
165
|
"value": {
|
|
166
166
|
"kind": "expression"
|
|
167
167
|
}
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
|
-
"name": ".
|
|
171
|
-
"description": "
|
|
170
|
+
"name": ".header",
|
|
171
|
+
"description": "Text content to display in the header cell of the column.",
|
|
172
172
|
"value": {
|
|
173
173
|
"kind": "expression"
|
|
174
174
|
}
|
|
175
175
|
},
|
|
176
176
|
{
|
|
177
|
-
"name": ".
|
|
178
|
-
"description": "Custom
|
|
177
|
+
"name": ".headerPartName",
|
|
178
|
+
"description": "Custom part name for the header cell.",
|
|
179
179
|
"value": {
|
|
180
180
|
"kind": "expression"
|
|
181
181
|
}
|
|
182
182
|
},
|
|
183
183
|
{
|
|
184
|
-
"name": ".
|
|
185
|
-
"description": "Custom function for rendering the
|
|
184
|
+
"name": ".headerRenderer",
|
|
185
|
+
"description": "Custom function for rendering the header content.\nReceives two arguments:\n\n- `root` The header cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
186
186
|
"value": {
|
|
187
187
|
"kind": "expression"
|
|
188
188
|
}
|
|
189
189
|
},
|
|
190
190
|
{
|
|
191
|
-
"name": ".
|
|
192
|
-
"description": "
|
|
191
|
+
"name": ".path",
|
|
192
|
+
"description": "Path to an item sub-property whose value gets displayed in the column body cells.\nThe property name is also shown in the column header if an explicit header or renderer isn't defined.",
|
|
193
193
|
"value": {
|
|
194
194
|
"kind": "expression"
|
|
195
195
|
}
|
|
196
196
|
},
|
|
197
197
|
{
|
|
198
|
-
"name": ".
|
|
199
|
-
"description": "
|
|
198
|
+
"name": ".renderer",
|
|
199
|
+
"description": "Custom function for rendering the cell content.\nReceives three arguments:\n\n- `root` The cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.\n - `model.detailsOpened` Details opened state.\n - `model.hasChildren` Whether the item has children.",
|
|
200
200
|
"value": {
|
|
201
201
|
"kind": "expression"
|
|
202
202
|
}
|
|
203
203
|
},
|
|
204
204
|
{
|
|
205
|
-
"name": ".
|
|
206
|
-
"description": "
|
|
205
|
+
"name": ".textAlign",
|
|
206
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
207
207
|
"value": {
|
|
208
208
|
"kind": "expression"
|
|
209
209
|
}
|
|
210
210
|
},
|
|
211
211
|
{
|
|
212
|
-
"name": ".
|
|
213
|
-
"description": "
|
|
212
|
+
"name": ".width",
|
|
213
|
+
"description": "Width of the cells for this column.\n\nPlease note that using the `em` length unit is discouraged as\nit might lead to misalignment issues if the header, body, and footer\ncells have different font sizes. Instead, use `rem` if you need\na length unit relative to the font size.",
|
|
214
214
|
"value": {
|
|
215
215
|
"kind": "expression"
|
|
216
216
|
}
|
|
@@ -251,8 +251,8 @@
|
|
|
251
251
|
"extension": true,
|
|
252
252
|
"attributes": [
|
|
253
253
|
{
|
|
254
|
-
"name": "?
|
|
255
|
-
"description": "
|
|
254
|
+
"name": "?autoWidth",
|
|
255
|
+
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.\n\nFor performance reasons the column width is calculated automatically only once when the grid items\nare rendered for the first time and the calculation only considers the rows which are currently\nrendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell\ncontent changes, the column width might not match the contents anymore.\n\nHidden columns are ignored in the calculation and their widths are not automatically updated when\nyou show a column that was initially hidden.\n\nYou can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`.\n\nThe column width may still grow larger when `flexGrow` is not 0.",
|
|
256
256
|
"value": {
|
|
257
257
|
"kind": "expression"
|
|
258
258
|
}
|
|
@@ -272,92 +272,92 @@
|
|
|
272
272
|
}
|
|
273
273
|
},
|
|
274
274
|
{
|
|
275
|
-
"name": "?
|
|
276
|
-
"description": "When true, the cells for this column
|
|
275
|
+
"name": "?hidden",
|
|
276
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
277
277
|
"value": {
|
|
278
278
|
"kind": "expression"
|
|
279
279
|
}
|
|
280
280
|
},
|
|
281
281
|
{
|
|
282
|
-
"name": "?
|
|
283
|
-
"description": "When set to true, the
|
|
282
|
+
"name": "?resizable",
|
|
283
|
+
"description": "When set to true, the column is user-resizable.",
|
|
284
284
|
"value": {
|
|
285
285
|
"kind": "expression"
|
|
286
286
|
}
|
|
287
287
|
},
|
|
288
288
|
{
|
|
289
|
-
"name": "?
|
|
290
|
-
"description": "
|
|
289
|
+
"name": "?rowHeader",
|
|
290
|
+
"description": "When true, the cells for this column will be rendered with the `role` attribute\nset as `rowheader`, instead of the `gridcell` role value used by default.\n\nWhen a column is set as row header, its cells will be announced by screen readers\nwhile navigating to help user identify the current row as uniquely as possible.",
|
|
291
291
|
"value": {
|
|
292
292
|
"kind": "expression"
|
|
293
293
|
}
|
|
294
294
|
},
|
|
295
295
|
{
|
|
296
|
-
"name": ".
|
|
297
|
-
"description": "
|
|
296
|
+
"name": ".flexGrow",
|
|
297
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
298
298
|
"value": {
|
|
299
299
|
"kind": "expression"
|
|
300
300
|
}
|
|
301
301
|
},
|
|
302
302
|
{
|
|
303
|
-
"name": ".
|
|
304
|
-
"description": "
|
|
303
|
+
"name": ".footerPartName",
|
|
304
|
+
"description": "Custom part name for the footer cell.",
|
|
305
305
|
"value": {
|
|
306
306
|
"kind": "expression"
|
|
307
307
|
}
|
|
308
308
|
},
|
|
309
309
|
{
|
|
310
|
-
"name": ".
|
|
311
|
-
"description": "Custom
|
|
310
|
+
"name": ".footerRenderer",
|
|
311
|
+
"description": "Custom function for rendering the footer content.\nReceives two arguments:\n\n- `root` The footer cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
312
312
|
"value": {
|
|
313
313
|
"kind": "expression"
|
|
314
314
|
}
|
|
315
315
|
},
|
|
316
316
|
{
|
|
317
|
-
"name": ".
|
|
318
|
-
"description": "
|
|
317
|
+
"name": ".header",
|
|
318
|
+
"description": "Text to display as the label of the column filter text-field.",
|
|
319
319
|
"value": {
|
|
320
320
|
"kind": "expression"
|
|
321
321
|
}
|
|
322
322
|
},
|
|
323
323
|
{
|
|
324
|
-
"name": ".
|
|
325
|
-
"description": "Custom
|
|
324
|
+
"name": ".headerPartName",
|
|
325
|
+
"description": "Custom part name for the header cell.",
|
|
326
326
|
"value": {
|
|
327
327
|
"kind": "expression"
|
|
328
328
|
}
|
|
329
329
|
},
|
|
330
330
|
{
|
|
331
|
-
"name": ".
|
|
332
|
-
"description": "Custom function for rendering the
|
|
331
|
+
"name": ".headerRenderer",
|
|
332
|
+
"description": "Custom function for rendering the header content.\nReceives two arguments:\n\n- `root` The header cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
333
333
|
"value": {
|
|
334
334
|
"kind": "expression"
|
|
335
335
|
}
|
|
336
336
|
},
|
|
337
337
|
{
|
|
338
|
-
"name": ".
|
|
339
|
-
"description": "
|
|
338
|
+
"name": ".path",
|
|
339
|
+
"description": "JS Path of the property in the item used for filtering the data.",
|
|
340
340
|
"value": {
|
|
341
341
|
"kind": "expression"
|
|
342
342
|
}
|
|
343
343
|
},
|
|
344
344
|
{
|
|
345
|
-
"name": ".
|
|
346
|
-
"description": "
|
|
345
|
+
"name": ".renderer",
|
|
346
|
+
"description": "Custom function for rendering the cell content.\nReceives three arguments:\n\n- `root` The cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.\n - `model.detailsOpened` Details opened state.\n - `model.hasChildren` Whether the item has children.",
|
|
347
347
|
"value": {
|
|
348
348
|
"kind": "expression"
|
|
349
349
|
}
|
|
350
350
|
},
|
|
351
351
|
{
|
|
352
|
-
"name": ".
|
|
353
|
-
"description": "
|
|
352
|
+
"name": ".textAlign",
|
|
353
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
354
354
|
"value": {
|
|
355
355
|
"kind": "expression"
|
|
356
356
|
}
|
|
357
357
|
},
|
|
358
358
|
{
|
|
359
|
-
"name": ".
|
|
360
|
-
"description": "
|
|
359
|
+
"name": ".width",
|
|
360
|
+
"description": "Width of the cells for this column.\n\nPlease note that using the `em` length unit is discouraged as\nit might lead to misalignment issues if the header, body, and footer\ncells have different font sizes. Instead, use `rem` if you need\na length unit relative to the font size.",
|
|
361
361
|
"value": {
|
|
362
362
|
"kind": "expression"
|
|
363
363
|
}
|
|
@@ -366,138 +366,138 @@
|
|
|
366
366
|
},
|
|
367
367
|
{
|
|
368
368
|
"name": "vaadin-grid-selection-column",
|
|
369
|
-
"description": "`<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`\nthat provides default renderers and functionality for item selection.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>\n\n <vaadin-grid-column>\n ...\n```\n\nBy default the selection column displays `<vaadin-checkbox>` elements in the\ncolumn cells. The checkboxes in the body rows toggle selection of the corresponding row items.\n\nWhen the grid data is provided as an array of [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
369
|
+
"description": "`<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`\nthat provides default renderers and functionality for item selection.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>\n\n <vaadin-grid-column>\n ...\n```\n\nBy default the selection column displays `<vaadin-checkbox>` elements in the\ncolumn cells. The checkboxes in the body rows toggle selection of the corresponding row items.\n\nWhen the grid data is provided as an array of [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-grid#property-items),\nthe column header gets an additional checkbox that can be used for toggling\nselection for all the items at once.\n\n__The default content can also be overridden__",
|
|
370
370
|
"extension": true,
|
|
371
371
|
"attributes": [
|
|
372
372
|
{
|
|
373
|
-
"name": "?
|
|
374
|
-
"description": "When
|
|
373
|
+
"name": "?autoSelect",
|
|
374
|
+
"description": "When true, the active item gets automatically selected.",
|
|
375
375
|
"value": {
|
|
376
376
|
"kind": "expression"
|
|
377
377
|
}
|
|
378
378
|
},
|
|
379
379
|
{
|
|
380
|
-
"name": "?
|
|
381
|
-
"description": "
|
|
380
|
+
"name": "?autoWidth",
|
|
381
|
+
"description": "Override `autoWidth` to enable auto-width",
|
|
382
382
|
"value": {
|
|
383
383
|
"kind": "expression"
|
|
384
384
|
}
|
|
385
385
|
},
|
|
386
386
|
{
|
|
387
|
-
"name": "?
|
|
388
|
-
"description": "When true,
|
|
387
|
+
"name": "?dragSelect",
|
|
388
|
+
"description": "When true, rows can be selected by dragging over the selection column.",
|
|
389
389
|
"value": {
|
|
390
390
|
"kind": "expression"
|
|
391
391
|
}
|
|
392
392
|
},
|
|
393
393
|
{
|
|
394
|
-
"name": "?
|
|
395
|
-
"description": "When true, the
|
|
394
|
+
"name": "?frozen",
|
|
395
|
+
"description": "When true, the column is frozen. When a column inside of a column group is frozen,\nall of the sibling columns inside the group will get frozen also.",
|
|
396
396
|
"value": {
|
|
397
397
|
"kind": "expression"
|
|
398
398
|
}
|
|
399
399
|
},
|
|
400
400
|
{
|
|
401
|
-
"name": "?
|
|
402
|
-
"description": "When
|
|
401
|
+
"name": "?frozenToEnd",
|
|
402
|
+
"description": "When true, the column is frozen to end of grid.\n\nWhen a column inside of a column group is frozen to end, all of the sibling columns\ninside the group will get frozen to end also.\n\nColumn can not be set as `frozen` and `frozenToEnd` at the same time.",
|
|
403
403
|
"value": {
|
|
404
404
|
"kind": "expression"
|
|
405
405
|
}
|
|
406
406
|
},
|
|
407
407
|
{
|
|
408
|
-
"name": "?
|
|
409
|
-
"description": "
|
|
408
|
+
"name": "?hidden",
|
|
409
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
410
410
|
"value": {
|
|
411
411
|
"kind": "expression"
|
|
412
412
|
}
|
|
413
413
|
},
|
|
414
414
|
{
|
|
415
|
-
"name": "?
|
|
416
|
-
"description": "When true,
|
|
415
|
+
"name": "?resizable",
|
|
416
|
+
"description": "When set to true, the column is user-resizable.",
|
|
417
417
|
"value": {
|
|
418
418
|
"kind": "expression"
|
|
419
419
|
}
|
|
420
420
|
},
|
|
421
421
|
{
|
|
422
|
-
"name": "?
|
|
423
|
-
"description": "When true, the
|
|
422
|
+
"name": "?rowHeader",
|
|
423
|
+
"description": "When true, the cells for this column will be rendered with the `role` attribute\nset as `rowheader`, instead of the `gridcell` role value used by default.\n\nWhen a column is set as row header, its cells will be announced by screen readers\nwhile navigating to help user identify the current row as uniquely as possible.",
|
|
424
424
|
"value": {
|
|
425
425
|
"kind": "expression"
|
|
426
426
|
}
|
|
427
427
|
},
|
|
428
428
|
{
|
|
429
|
-
"name": "?
|
|
430
|
-
"description": "When true,
|
|
429
|
+
"name": "?selectAll",
|
|
430
|
+
"description": "When true, all the items are selected.",
|
|
431
431
|
"value": {
|
|
432
432
|
"kind": "expression"
|
|
433
433
|
}
|
|
434
434
|
},
|
|
435
435
|
{
|
|
436
|
-
"name": ".
|
|
437
|
-
"description": "
|
|
436
|
+
"name": ".flexGrow",
|
|
437
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
438
438
|
"value": {
|
|
439
439
|
"kind": "expression"
|
|
440
440
|
}
|
|
441
441
|
},
|
|
442
442
|
{
|
|
443
|
-
"name": ".
|
|
444
|
-
"description": "
|
|
443
|
+
"name": ".footerPartName",
|
|
444
|
+
"description": "Custom part name for the footer cell.",
|
|
445
445
|
"value": {
|
|
446
446
|
"kind": "expression"
|
|
447
447
|
}
|
|
448
448
|
},
|
|
449
449
|
{
|
|
450
|
-
"name": ".
|
|
451
|
-
"description": "Custom
|
|
450
|
+
"name": ".footerRenderer",
|
|
451
|
+
"description": "Custom function for rendering the footer content.\nReceives two arguments:\n\n- `root` The footer cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
452
452
|
"value": {
|
|
453
453
|
"kind": "expression"
|
|
454
454
|
}
|
|
455
455
|
},
|
|
456
456
|
{
|
|
457
|
-
"name": ".
|
|
458
|
-
"description": "
|
|
457
|
+
"name": ".header",
|
|
458
|
+
"description": "Text content to display in the header cell of the column.",
|
|
459
459
|
"value": {
|
|
460
460
|
"kind": "expression"
|
|
461
461
|
}
|
|
462
462
|
},
|
|
463
463
|
{
|
|
464
|
-
"name": ".
|
|
465
|
-
"description": "Custom
|
|
464
|
+
"name": ".headerPartName",
|
|
465
|
+
"description": "Custom part name for the header cell.",
|
|
466
466
|
"value": {
|
|
467
467
|
"kind": "expression"
|
|
468
468
|
}
|
|
469
469
|
},
|
|
470
470
|
{
|
|
471
|
-
"name": ".
|
|
472
|
-
"description": "Custom function for rendering the
|
|
471
|
+
"name": ".headerRenderer",
|
|
472
|
+
"description": "Custom function for rendering the header content.\nReceives two arguments:\n\n- `root` The header cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
473
473
|
"value": {
|
|
474
474
|
"kind": "expression"
|
|
475
475
|
}
|
|
476
476
|
},
|
|
477
477
|
{
|
|
478
|
-
"name": ".
|
|
479
|
-
"description": "
|
|
478
|
+
"name": ".path",
|
|
479
|
+
"description": "Path to an item sub-property whose value gets displayed in the column body cells.\nThe property name is also shown in the column header if an explicit header or renderer isn't defined.",
|
|
480
480
|
"value": {
|
|
481
481
|
"kind": "expression"
|
|
482
482
|
}
|
|
483
483
|
},
|
|
484
484
|
{
|
|
485
|
-
"name": ".
|
|
486
|
-
"description": "
|
|
485
|
+
"name": ".renderer",
|
|
486
|
+
"description": "Custom function for rendering the cell content.\nReceives three arguments:\n\n- `root` The cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.\n - `model.detailsOpened` Details opened state.\n - `model.hasChildren` Whether the item has children.",
|
|
487
487
|
"value": {
|
|
488
488
|
"kind": "expression"
|
|
489
489
|
}
|
|
490
490
|
},
|
|
491
491
|
{
|
|
492
|
-
"name": ".
|
|
493
|
-
"description": "
|
|
492
|
+
"name": ".textAlign",
|
|
493
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
494
494
|
"value": {
|
|
495
495
|
"kind": "expression"
|
|
496
496
|
}
|
|
497
497
|
},
|
|
498
498
|
{
|
|
499
|
-
"name": ".
|
|
500
|
-
"description": "
|
|
499
|
+
"name": ".width",
|
|
500
|
+
"description": "Width of the cells for this column.",
|
|
501
501
|
"value": {
|
|
502
502
|
"kind": "expression"
|
|
503
503
|
}
|
|
@@ -517,15 +517,15 @@
|
|
|
517
517
|
"extension": true,
|
|
518
518
|
"attributes": [
|
|
519
519
|
{
|
|
520
|
-
"name": ".
|
|
521
|
-
"description": "
|
|
520
|
+
"name": ".direction",
|
|
521
|
+
"description": "How to sort the data.\nPossible values are `asc` to use an ascending algorithm, `desc` to sort the data in\ndescending direction, or `null` for not sorting the data.",
|
|
522
522
|
"value": {
|
|
523
523
|
"kind": "expression"
|
|
524
524
|
}
|
|
525
525
|
},
|
|
526
526
|
{
|
|
527
|
-
"name": ".
|
|
528
|
-
"description": "
|
|
527
|
+
"name": ".path",
|
|
528
|
+
"description": "JS Path of the property in the item used for sorting the data.",
|
|
529
529
|
"value": {
|
|
530
530
|
"kind": "expression"
|
|
531
531
|
}
|
|
@@ -545,8 +545,8 @@
|
|
|
545
545
|
"extension": true,
|
|
546
546
|
"attributes": [
|
|
547
547
|
{
|
|
548
|
-
"name": "?
|
|
549
|
-
"description": "
|
|
548
|
+
"name": "?autoWidth",
|
|
549
|
+
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.\n\nFor performance reasons the column width is calculated automatically only once when the grid items\nare rendered for the first time and the calculation only considers the rows which are currently\nrendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell\ncontent changes, the column width might not match the contents anymore.\n\nHidden columns are ignored in the calculation and their widths are not automatically updated when\nyou show a column that was initially hidden.\n\nYou can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`.\n\nThe column width may still grow larger when `flexGrow` is not 0.",
|
|
550
550
|
"value": {
|
|
551
551
|
"kind": "expression"
|
|
552
552
|
}
|
|
@@ -566,78 +566,78 @@
|
|
|
566
566
|
}
|
|
567
567
|
},
|
|
568
568
|
{
|
|
569
|
-
"name": "?
|
|
570
|
-
"description": "When true, the cells for this column
|
|
569
|
+
"name": "?hidden",
|
|
570
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
571
571
|
"value": {
|
|
572
572
|
"kind": "expression"
|
|
573
573
|
}
|
|
574
574
|
},
|
|
575
575
|
{
|
|
576
|
-
"name": "?
|
|
577
|
-
"description": "When set to true, the
|
|
576
|
+
"name": "?resizable",
|
|
577
|
+
"description": "When set to true, the column is user-resizable.",
|
|
578
578
|
"value": {
|
|
579
579
|
"kind": "expression"
|
|
580
580
|
}
|
|
581
581
|
},
|
|
582
582
|
{
|
|
583
|
-
"name": "?
|
|
584
|
-
"description": "
|
|
583
|
+
"name": "?rowHeader",
|
|
584
|
+
"description": "When true, the cells for this column will be rendered with the `role` attribute\nset as `rowheader`, instead of the `gridcell` role value used by default.\n\nWhen a column is set as row header, its cells will be announced by screen readers\nwhile navigating to help user identify the current row as uniquely as possible.",
|
|
585
585
|
"value": {
|
|
586
586
|
"kind": "expression"
|
|
587
587
|
}
|
|
588
588
|
},
|
|
589
589
|
{
|
|
590
|
-
"name": ".
|
|
591
|
-
"description": "
|
|
590
|
+
"name": ".direction",
|
|
591
|
+
"description": "How to sort the data.\nPossible values are `asc` to use an ascending algorithm, `desc` to sort the data in\ndescending direction, or `null` for not sorting the data.",
|
|
592
592
|
"value": {
|
|
593
593
|
"kind": "expression"
|
|
594
594
|
}
|
|
595
595
|
},
|
|
596
596
|
{
|
|
597
|
-
"name": ".
|
|
598
|
-
"description": "
|
|
597
|
+
"name": ".flexGrow",
|
|
598
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
599
599
|
"value": {
|
|
600
600
|
"kind": "expression"
|
|
601
601
|
}
|
|
602
602
|
},
|
|
603
603
|
{
|
|
604
|
-
"name": ".
|
|
605
|
-
"description": "Custom part name for the
|
|
604
|
+
"name": ".footerPartName",
|
|
605
|
+
"description": "Custom part name for the footer cell.",
|
|
606
606
|
"value": {
|
|
607
607
|
"kind": "expression"
|
|
608
608
|
}
|
|
609
609
|
},
|
|
610
610
|
{
|
|
611
|
-
"name": ".
|
|
612
|
-
"description": "Custom
|
|
611
|
+
"name": ".footerRenderer",
|
|
612
|
+
"description": "Custom function for rendering the footer content.\nReceives two arguments:\n\n- `root` The footer cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
613
613
|
"value": {
|
|
614
614
|
"kind": "expression"
|
|
615
615
|
}
|
|
616
616
|
},
|
|
617
617
|
{
|
|
618
|
-
"name": ".
|
|
619
|
-
"description": "
|
|
618
|
+
"name": ".header",
|
|
619
|
+
"description": "Text content to display in the header cell of the column.",
|
|
620
620
|
"value": {
|
|
621
621
|
"kind": "expression"
|
|
622
622
|
}
|
|
623
623
|
},
|
|
624
624
|
{
|
|
625
|
-
"name": ".
|
|
626
|
-
"description": "Custom
|
|
625
|
+
"name": ".headerPartName",
|
|
626
|
+
"description": "Custom part name for the header cell.",
|
|
627
627
|
"value": {
|
|
628
628
|
"kind": "expression"
|
|
629
629
|
}
|
|
630
630
|
},
|
|
631
631
|
{
|
|
632
|
-
"name": ".
|
|
633
|
-
"description": "
|
|
632
|
+
"name": ".headerRenderer",
|
|
633
|
+
"description": "Custom function for rendering the header content.\nReceives two arguments:\n\n- `root` The header cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
634
634
|
"value": {
|
|
635
635
|
"kind": "expression"
|
|
636
636
|
}
|
|
637
637
|
},
|
|
638
638
|
{
|
|
639
|
-
"name": ".
|
|
640
|
-
"description": "
|
|
639
|
+
"name": ".path",
|
|
640
|
+
"description": "JS Path of the property in the item used for sorting the data.",
|
|
641
641
|
"value": {
|
|
642
642
|
"kind": "expression"
|
|
643
643
|
}
|
|
@@ -650,15 +650,15 @@
|
|
|
650
650
|
}
|
|
651
651
|
},
|
|
652
652
|
{
|
|
653
|
-
"name": ".
|
|
654
|
-
"description": "
|
|
653
|
+
"name": ".textAlign",
|
|
654
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
655
655
|
"value": {
|
|
656
656
|
"kind": "expression"
|
|
657
657
|
}
|
|
658
658
|
},
|
|
659
659
|
{
|
|
660
|
-
"name": ".
|
|
661
|
-
"description": "
|
|
660
|
+
"name": ".width",
|
|
661
|
+
"description": "Width of the cells for this column.\n\nPlease note that using the `em` length unit is discouraged as\nit might lead to misalignment issues if the header, body, and footer\ncells have different font sizes. Instead, use `rem` if you need\na length unit relative to the font size.",
|
|
662
662
|
"value": {
|
|
663
663
|
"kind": "expression"
|
|
664
664
|
}
|
|
@@ -678,15 +678,15 @@
|
|
|
678
678
|
"extension": true,
|
|
679
679
|
"attributes": [
|
|
680
680
|
{
|
|
681
|
-
"name": "?
|
|
682
|
-
"description": "
|
|
681
|
+
"name": "?expanded",
|
|
682
|
+
"description": "Sublevel toggle state.",
|
|
683
683
|
"value": {
|
|
684
684
|
"kind": "expression"
|
|
685
685
|
}
|
|
686
686
|
},
|
|
687
687
|
{
|
|
688
|
-
"name": "?
|
|
689
|
-
"description": "
|
|
688
|
+
"name": "?leaf",
|
|
689
|
+
"description": "Hides the toggle icon and disables toggling a tree sublevel.",
|
|
690
690
|
"value": {
|
|
691
691
|
"kind": "expression"
|
|
692
692
|
}
|
|
@@ -713,8 +713,8 @@
|
|
|
713
713
|
"extension": true,
|
|
714
714
|
"attributes": [
|
|
715
715
|
{
|
|
716
|
-
"name": "?
|
|
717
|
-
"description": "
|
|
716
|
+
"name": "?autoWidth",
|
|
717
|
+
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.\n\nFor performance reasons the column width is calculated automatically only once when the grid items\nare rendered for the first time and the calculation only considers the rows which are currently\nrendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell\ncontent changes, the column width might not match the contents anymore.\n\nHidden columns are ignored in the calculation and their widths are not automatically updated when\nyou show a column that was initially hidden.\n\nYou can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`.\n\nThe column width may still grow larger when `flexGrow` is not 0.",
|
|
718
718
|
"value": {
|
|
719
719
|
"kind": "expression"
|
|
720
720
|
}
|
|
@@ -734,92 +734,92 @@
|
|
|
734
734
|
}
|
|
735
735
|
},
|
|
736
736
|
{
|
|
737
|
-
"name": "?
|
|
738
|
-
"description": "When true, the cells for this column
|
|
737
|
+
"name": "?hidden",
|
|
738
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
739
739
|
"value": {
|
|
740
740
|
"kind": "expression"
|
|
741
741
|
}
|
|
742
742
|
},
|
|
743
743
|
{
|
|
744
|
-
"name": "?
|
|
745
|
-
"description": "When set to true, the
|
|
744
|
+
"name": "?resizable",
|
|
745
|
+
"description": "When set to true, the column is user-resizable.",
|
|
746
746
|
"value": {
|
|
747
747
|
"kind": "expression"
|
|
748
748
|
}
|
|
749
749
|
},
|
|
750
750
|
{
|
|
751
|
-
"name": "?
|
|
752
|
-
"description": "
|
|
751
|
+
"name": "?rowHeader",
|
|
752
|
+
"description": "When true, the cells for this column will be rendered with the `role` attribute\nset as `rowheader`, instead of the `gridcell` role value used by default.\n\nWhen a column is set as row header, its cells will be announced by screen readers\nwhile navigating to help user identify the current row as uniquely as possible.",
|
|
753
753
|
"value": {
|
|
754
754
|
"kind": "expression"
|
|
755
755
|
}
|
|
756
756
|
},
|
|
757
757
|
{
|
|
758
|
-
"name": ".
|
|
759
|
-
"description": "
|
|
758
|
+
"name": ".flexGrow",
|
|
759
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
760
760
|
"value": {
|
|
761
761
|
"kind": "expression"
|
|
762
762
|
}
|
|
763
763
|
},
|
|
764
764
|
{
|
|
765
|
-
"name": ".
|
|
766
|
-
"description": "
|
|
765
|
+
"name": ".footerPartName",
|
|
766
|
+
"description": "Custom part name for the footer cell.",
|
|
767
767
|
"value": {
|
|
768
768
|
"kind": "expression"
|
|
769
769
|
}
|
|
770
770
|
},
|
|
771
771
|
{
|
|
772
|
-
"name": ".
|
|
773
|
-
"description": "Custom
|
|
772
|
+
"name": ".footerRenderer",
|
|
773
|
+
"description": "Custom function for rendering the footer content.\nReceives two arguments:\n\n- `root` The footer cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
774
774
|
"value": {
|
|
775
775
|
"kind": "expression"
|
|
776
776
|
}
|
|
777
777
|
},
|
|
778
778
|
{
|
|
779
|
-
"name": ".
|
|
780
|
-
"description": "
|
|
779
|
+
"name": ".header",
|
|
780
|
+
"description": "Text content to display in the header cell of the column.",
|
|
781
781
|
"value": {
|
|
782
782
|
"kind": "expression"
|
|
783
783
|
}
|
|
784
784
|
},
|
|
785
785
|
{
|
|
786
|
-
"name": ".
|
|
787
|
-
"description": "Custom
|
|
786
|
+
"name": ".headerPartName",
|
|
787
|
+
"description": "Custom part name for the header cell.",
|
|
788
788
|
"value": {
|
|
789
789
|
"kind": "expression"
|
|
790
790
|
}
|
|
791
791
|
},
|
|
792
792
|
{
|
|
793
|
-
"name": ".
|
|
794
|
-
"description": "Custom function for rendering the
|
|
793
|
+
"name": ".headerRenderer",
|
|
794
|
+
"description": "Custom function for rendering the header content.\nReceives two arguments:\n\n- `root` The header cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
795
795
|
"value": {
|
|
796
796
|
"kind": "expression"
|
|
797
797
|
}
|
|
798
798
|
},
|
|
799
799
|
{
|
|
800
|
-
"name": ".
|
|
801
|
-
"description": "
|
|
800
|
+
"name": ".path",
|
|
801
|
+
"description": "JS Path of the property in the item used as text content for the tree toggle.",
|
|
802
802
|
"value": {
|
|
803
803
|
"kind": "expression"
|
|
804
804
|
}
|
|
805
805
|
},
|
|
806
806
|
{
|
|
807
|
-
"name": ".
|
|
808
|
-
"description": "
|
|
807
|
+
"name": ".renderer",
|
|
808
|
+
"description": "Custom function for rendering the cell content.\nReceives three arguments:\n\n- `root` The cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.\n - `model.detailsOpened` Details opened state.\n - `model.hasChildren` Whether the item has children.",
|
|
809
809
|
"value": {
|
|
810
810
|
"kind": "expression"
|
|
811
811
|
}
|
|
812
812
|
},
|
|
813
813
|
{
|
|
814
|
-
"name": ".
|
|
815
|
-
"description": "
|
|
814
|
+
"name": ".textAlign",
|
|
815
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
816
816
|
"value": {
|
|
817
817
|
"kind": "expression"
|
|
818
818
|
}
|
|
819
819
|
},
|
|
820
820
|
{
|
|
821
|
-
"name": ".
|
|
822
|
-
"description": "
|
|
821
|
+
"name": ".width",
|
|
822
|
+
"description": "Width of the cells for this column.\n\nPlease note that using the `em` length unit is discouraged as\nit might lead to misalignment issues if the header, body, and footer\ncells have different font sizes. Instead, use `rem` if you need\na length unit relative to the font size.",
|
|
823
823
|
"value": {
|
|
824
824
|
"kind": "expression"
|
|
825
825
|
}
|
|
@@ -828,40 +828,40 @@
|
|
|
828
828
|
},
|
|
829
829
|
{
|
|
830
830
|
"name": "vaadin-grid",
|
|
831
|
-
"description": "`<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the\nthe grid can be populated by using renderer callback function.\n\n### Quick Start\n\nStart with an assigning an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-grid#property-items) property to visualize your data.\n\nUse the [`<vaadin-grid-column>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-grid-column) element to configure the grid columns. Set `path` and `header`\nshorthand properties for the columns to define what gets rendered in the cells of the column.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-column path=\"name.first\" header=\"First name\"></vaadin-grid-column>\n <vaadin-grid-column path=\"name.last\" header=\"Last name\"></vaadin-grid-column>\n <vaadin-grid-column path=\"email\"></vaadin-grid-column>\n</vaadin-grid>\n```\n\nFor custom content `vaadin-grid-column` element provides you with three types of `renderer` callback functions: `headerRenderer`,\n`renderer` and `footerRenderer`.\n\nEach of those renderer functions provides `root`, `column`, `model` arguments when applicable.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `column`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\nRenderers are called on initialization of new column cells and each time the\nrelated row model is updated. DOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-column></vaadin-grid-column>\n <vaadin-grid-column></vaadin-grid-column>\n <vaadin-grid-column></vaadin-grid-column>\n</vaadin-grid>\n```\n```js\nconst grid = document.querySelector('vaadin-grid');\ngrid.items = [{'name': 'John', 'surname': 'Lennon', 'role': 'singer'},\n {'name': 'Ringo', 'surname': 'Starr', 'role': 'drums'}];\n\nconst columns = grid.querySelectorAll('vaadin-grid-column');\n\ncolumns[0].headerRenderer = function(root) {\n root.textContent = 'Name';\n};\ncolumns[0].renderer = function(root, column, model) {\n root.textContent = model.item.name;\n};\n\ncolumns[1].headerRenderer = function(root) {\n root.textContent = 'Surname';\n};\ncolumns[1].renderer = function(root, column, model) {\n root.textContent = model.item.surname;\n};\n\ncolumns[2].headerRenderer = function(root) {\n root.textContent = 'Role';\n};\ncolumns[2].renderer = function(root, column, model) {\n root.textContent = model.item.role;\n};\n```\n\nThe following properties are available in the `model` argument:\n\nProperty name | Type | Description\n--------------|------|------------\n`index`| Number | The index of the item.\n`item` | String or Object | The item.\n`level` | Number | Number of the item's tree sublevel, starts from 0.\n`expanded` | Boolean | True if the item's tree sublevel is expanded.\n`selected` | Boolean | True if the item is selected.\n`detailsOpened` | Boolean | True if the item's row details are open.\n`hasChildren` | Boolean | True if the item has children\n\nThe following helper elements can be used for further customization:\n- [`<vaadin-grid-column-group>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-grid-column-group)\n- [`<vaadin-grid-filter>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-grid-filter)\n- [`<vaadin-grid-sorter>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-grid-sorter)\n- [`<vaadin-grid-selection-column>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-grid-selection-column)\n- [`<vaadin-grid-tree-toggle>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-grid-tree-toggle)\n\n__Note that the helper elements must be explicitly imported.__\nIf you want to import everything at once you can use the `all-imports.js` entrypoint.\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively\nprovide the `<vaadin-grid>` data through the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-grid#property-dataProvider) function property.\nThe `<vaadin-grid>` calls this function lazily, only when it needs more data\nto be displayed.\n\nSee the [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-grid#property-dataProvider) property\ndocumentation for the detailed data provider arguments description.\n\n__Note that expanding the tree grid's item will trigger a call to the `dataProvider`.__\n\n__Also, note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```javascript\ngrid.dataProvider = ({page, pageSize}, callback) => {\n // page: the requested page index\n // pageSize: number of items on one page\n const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;\n\n fetch(url)\n .then((res) => res.json())\n .then(({ employees, totalSize }) => {\n callback(employees, totalSize);\n });\n};\n```\n\n__Alternatively, you can use the `size` property to set the total number of items:__\n\n```javascript\ngrid.size = 200; // The total number of items\ngrid.dataProvider = ({page, pageSize}, callback) => {\n const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;\n\n fetch(url)\n .then((res) => res.json())\n .then((resJson) => callback(resJson.employees));\n};\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------------|----------------\n`row` | Row in the internal table\n`body-row` | Body row in the internal table\n`header-row` | Header row in the internal table\n`footer-row` | Footer row in the internal table\n`collapsed-row` | Collapsed row\n`expanded-row` | Expanded row\n`selected-row` | Selected row\n`nonselectable-row` | Row that the user may not select or deselect\n`details-opened-row` | Row with details open\n`odd-row` | Odd row\n`even-row` | Even row\n`first-row` | The first body row\n`first-header-row` | The first header row\n`first-footer-row` | The first footer row\n`last-row` | The last body row\n`last-header-row` | The last header row\n`last-footer-row` | The last footer row\n`dragstart-row` | Set on the row for one frame when drag is starting.\n`dragover-above-row` | Set on the row when the a row is dragged over above\n`dragover-below-row` | Set on the row when the a row is dragged over below\n`dragover-on-top-row` | Set on the row when the a row is dragged over on top\n`drag-disabled-row` | Set to a row that isn't available for dragging\n`drop-disabled-row` | Set to a row that can't be dropped on top of\n`cell` | Cell in the internal table\n`header-cell` | Header cell in the internal table\n`body-cell` | Body cell in the internal table\n`footer-cell` | Footer cell in the internal table\n`details-cell` | Row details cell in the internal table\n`focused-cell` | Focused cell in the internal table\n`odd-row-cell` | Cell in an odd row\n`even-row-cell` | Cell in an even row\n`first-row-cell` | Cell in the first body row\n`last-row-cell` | Cell in the last body row\n`first-header-row-cell` | Cell in the first header row\n`first-footer-row-cell` | Cell in the first footer row\n`last-header-row-cell` | Cell in the last header row\n`last-footer-row-cell` | Cell in the last footer row\n`loading-row-cell` | Cell in a row that is waiting for data from data provider\n`selected-row-cell` | Cell in a selected row\n`nonselectable-row-cell` | Cell in a row that the user may not select or deselect\n`collapsed-row-cell` | Cell in a collapsed row\n`expanded-row-cell` | Cell in an expanded row\n`details-opened-row-cell` | Cell in an row with details open\n`dragstart-row-cell` | Cell in the ghost image row, but not in a source row\n`drag-source-row-cell` | Cell in a source row, but not in the ghost image\n`dragover-above-row-cell` | Cell in a row that has another row dragged over above\n`dragover-below-row-cell` | Cell in a row that has another row dragged over below\n`dragover-on-top-row-cell` | Cell in a row that has another row dragged over on top\n`drag-disabled-row-cell` | Cell in a row that isn't available for dragging\n`drop-disabled-row-cell` | Cell in a row that can't be dropped on top of\n`frozen-cell` | Frozen cell in the internal table\n`frozen-to-end-cell` | Frozen to end cell in the internal table\n`last-frozen-cell` | Last frozen cell\n`first-frozen-to-end-cell` | First cell frozen to end\n`first-column-cell` | First visible cell on a row\n`last-column-cell` | Last visible cell on a row\n`reorder-allowed-cell` | Cell in a column where another column can be reordered\n`reorder-dragging-cell` | Cell in a column currently being reordered\n`resize-handle` | Handle for resizing the columns\n`empty-state` | The container for the content to be displayed when there are no body rows to show\n`reorder-ghost` | Ghost element of the header cell being dragged\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n----------------------|---------------------------------------------------------------------------------------------------|-----------\n`loading` | Set when the grid is loading data from data provider | :host\n`interacting` | Keyboard navigation in interaction mode | :host\n`navigating` | Keyboard navigation in navigation mode | :host\n`overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host\n`reordering` | Set when the grid's columns are being reordered | :host\n`dragover` | Set when the grid (not a specific row) is dragged over | :host\n`dragging-rows` | Set when grid rows are dragged | :host\n`reorder-status` | Reflects the status of a cell while columns are being reordered | cell\n`frozen` | Frozen cell | cell\n`frozen-to-end` | Cell frozen to end | cell\n`last-frozen` | Last frozen cell | cell\n`first-frozen-to-end` | First cell frozen to end | cell\n`first-column` | First visible cell on a row | cell\n`last-column` | Last visible cell on a row | cell\n`selected` | Selected row | row\n`expanded` | Expanded row | row\n`details-opened` | Row with details open | row\n`loading` | Row that is waiting for data from data provider | row\n`odd` | Odd row | row\n`first` | The first body row | row\n`last` | The last body row | row\n`dragstart` | Set for one frame when starting to drag a row. The value is a number when dragging multiple rows | row\n`dragover` | Set when the row is dragged over | row\n`drag-disabled` | Set to a row that isn't available for dragging | row\n`drop-disabled` | Set to a row that can't be dropped on top of | row\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
831
|
+
"description": "`<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the\nthe grid can be populated by using renderer callback function.\n\n### Quick Start\n\nStart with an assigning an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-grid#property-items) property to visualize your data.\n\nUse the [`<vaadin-grid-column>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-grid-column) element to configure the grid columns. Set `path` and `header`\nshorthand properties for the columns to define what gets rendered in the cells of the column.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-column path=\"name.first\" header=\"First name\"></vaadin-grid-column>\n <vaadin-grid-column path=\"name.last\" header=\"Last name\"></vaadin-grid-column>\n <vaadin-grid-column path=\"email\"></vaadin-grid-column>\n</vaadin-grid>\n```\n\nFor custom content `vaadin-grid-column` element provides you with three types of `renderer` callback functions: `headerRenderer`,\n`renderer` and `footerRenderer`.\n\nEach of those renderer functions provides `root`, `column`, `model` arguments when applicable.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `column`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\nRenderers are called on initialization of new column cells and each time the\nrelated row model is updated. DOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-column></vaadin-grid-column>\n <vaadin-grid-column></vaadin-grid-column>\n <vaadin-grid-column></vaadin-grid-column>\n</vaadin-grid>\n```\n```js\nconst grid = document.querySelector('vaadin-grid');\ngrid.items = [{'name': 'John', 'surname': 'Lennon', 'role': 'singer'},\n {'name': 'Ringo', 'surname': 'Starr', 'role': 'drums'}];\n\nconst columns = grid.querySelectorAll('vaadin-grid-column');\n\ncolumns[0].headerRenderer = function(root) {\n root.textContent = 'Name';\n};\ncolumns[0].renderer = function(root, column, model) {\n root.textContent = model.item.name;\n};\n\ncolumns[1].headerRenderer = function(root) {\n root.textContent = 'Surname';\n};\ncolumns[1].renderer = function(root, column, model) {\n root.textContent = model.item.surname;\n};\n\ncolumns[2].headerRenderer = function(root) {\n root.textContent = 'Role';\n};\ncolumns[2].renderer = function(root, column, model) {\n root.textContent = model.item.role;\n};\n```\n\nThe following properties are available in the `model` argument:\n\nProperty name | Type | Description\n--------------|------|------------\n`index`| Number | The index of the item.\n`item` | String or Object | The item.\n`level` | Number | Number of the item's tree sublevel, starts from 0.\n`expanded` | Boolean | True if the item's tree sublevel is expanded.\n`selected` | Boolean | True if the item is selected.\n`detailsOpened` | Boolean | True if the item's row details are open.\n`hasChildren` | Boolean | True if the item has children\n\nThe following helper elements can be used for further customization:\n- [`<vaadin-grid-column-group>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-grid-column-group)\n- [`<vaadin-grid-filter>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-grid-filter)\n- [`<vaadin-grid-sorter>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-grid-sorter)\n- [`<vaadin-grid-selection-column>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-grid-selection-column)\n- [`<vaadin-grid-tree-toggle>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-grid-tree-toggle)\n\n__Note that the helper elements must be explicitly imported.__\nIf you want to import everything at once you can use the `all-imports.js` entrypoint.\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively\nprovide the `<vaadin-grid>` data through the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-grid#property-dataProvider) function property.\nThe `<vaadin-grid>` calls this function lazily, only when it needs more data\nto be displayed.\n\nSee the [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta1/#/elements/vaadin-grid#property-dataProvider) property\ndocumentation for the detailed data provider arguments description.\n\n__Note that expanding the tree grid's item will trigger a call to the `dataProvider`.__\n\n__Also, note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```javascript\ngrid.dataProvider = ({page, pageSize}, callback) => {\n // page: the requested page index\n // pageSize: number of items on one page\n const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;\n\n fetch(url)\n .then((res) => res.json())\n .then(({ employees, totalSize }) => {\n callback(employees, totalSize);\n });\n};\n```\n\n__Alternatively, you can use the `size` property to set the total number of items:__\n\n```javascript\ngrid.size = 200; // The total number of items\ngrid.dataProvider = ({page, pageSize}, callback) => {\n const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;\n\n fetch(url)\n .then((res) => res.json())\n .then((resJson) => callback(resJson.employees));\n};\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------------|----------------\n`row` | Row in the internal table\n`body-row` | Body row in the internal table\n`header-row` | Header row in the internal table\n`footer-row` | Footer row in the internal table\n`collapsed-row` | Collapsed row\n`expanded-row` | Expanded row\n`selected-row` | Selected row\n`nonselectable-row` | Row that the user may not select or deselect\n`details-opened-row` | Row with details open\n`odd-row` | Odd row\n`even-row` | Even row\n`first-row` | The first body row\n`first-header-row` | The first header row\n`first-footer-row` | The first footer row\n`last-row` | The last body row\n`last-header-row` | The last header row\n`last-footer-row` | The last footer row\n`dragstart-row` | Set on the row for one frame when drag is starting.\n`dragover-above-row` | Set on the row when the a row is dragged over above\n`dragover-below-row` | Set on the row when the a row is dragged over below\n`dragover-on-top-row` | Set on the row when the a row is dragged over on top\n`drag-disabled-row` | Set to a row that isn't available for dragging\n`drop-disabled-row` | Set to a row that can't be dropped on top of\n`cell` | Cell in the internal table\n`header-cell` | Header cell in the internal table\n`body-cell` | Body cell in the internal table\n`footer-cell` | Footer cell in the internal table\n`details-cell` | Row details cell in the internal table\n`focused-cell` | Focused cell in the internal table\n`odd-row-cell` | Cell in an odd row\n`even-row-cell` | Cell in an even row\n`first-row-cell` | Cell in the first body row\n`last-row-cell` | Cell in the last body row\n`first-header-row-cell` | Cell in the first header row\n`first-footer-row-cell` | Cell in the first footer row\n`last-header-row-cell` | Cell in the last header row\n`last-footer-row-cell` | Cell in the last footer row\n`loading-row-cell` | Cell in a row that is waiting for data from data provider\n`selected-row-cell` | Cell in a selected row\n`nonselectable-row-cell` | Cell in a row that the user may not select or deselect\n`collapsed-row-cell` | Cell in a collapsed row\n`expanded-row-cell` | Cell in an expanded row\n`details-opened-row-cell` | Cell in an row with details open\n`dragstart-row-cell` | Cell in the ghost image row, but not in a source row\n`drag-source-row-cell` | Cell in a source row, but not in the ghost image\n`dragover-above-row-cell` | Cell in a row that has another row dragged over above\n`dragover-below-row-cell` | Cell in a row that has another row dragged over below\n`dragover-on-top-row-cell` | Cell in a row that has another row dragged over on top\n`drag-disabled-row-cell` | Cell in a row that isn't available for dragging\n`drop-disabled-row-cell` | Cell in a row that can't be dropped on top of\n`frozen-cell` | Frozen cell in the internal table\n`frozen-to-end-cell` | Frozen to end cell in the internal table\n`last-frozen-cell` | Last frozen cell\n`first-frozen-to-end-cell` | First cell frozen to end\n`first-column-cell` | First visible cell on a row\n`last-column-cell` | Last visible cell on a row\n`reorder-allowed-cell` | Cell in a column where another column can be reordered\n`reorder-dragging-cell` | Cell in a column currently being reordered\n`resize-handle` | Handle for resizing the columns\n`empty-state` | The container for the content to be displayed when there are no body rows to show\n`reorder-ghost` | Ghost element of the header cell being dragged\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n----------------------|---------------------------------------------------------------------------------------------------|-----------\n`loading` | Set when the grid is loading data from data provider | :host\n`interacting` | Keyboard navigation in interaction mode | :host\n`navigating` | Keyboard navigation in navigation mode | :host\n`overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host\n`reordering` | Set when the grid's columns are being reordered | :host\n`dragover` | Set when the grid (not a specific row) is dragged over | :host\n`dragging-rows` | Set when grid rows are dragged | :host\n`reorder-status` | Reflects the status of a cell while columns are being reordered | cell\n`frozen` | Frozen cell | cell\n`frozen-to-end` | Cell frozen to end | cell\n`last-frozen` | Last frozen cell | cell\n`first-frozen-to-end` | First cell frozen to end | cell\n`first-column` | First visible cell on a row | cell\n`last-column` | Last visible cell on a row | cell\n`selected` | Selected row | row\n`expanded` | Expanded row | row\n`details-opened` | Row with details open | row\n`loading` | Row that is waiting for data from data provider | row\n`odd` | Odd row | row\n`first` | The first body row | row\n`last` | The last body row | row\n`dragstart` | Set for one frame when starting to drag a row. The value is a number when dragging multiple rows | row\n`dragover` | Set when the row is dragged over | row\n`drag-disabled` | Set to a row that isn't available for dragging | row\n`drop-disabled` | Set to a row that can't be dropped on top of | row\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
832
832
|
"extension": true,
|
|
833
833
|
"attributes": [
|
|
834
834
|
{
|
|
835
|
-
"name": "?
|
|
836
|
-
"description": "
|
|
835
|
+
"name": "?allRowsVisible",
|
|
836
|
+
"description": "If true, the grid's height is defined by its rows.\n\nEffectively, this disables the grid's virtual scrolling so that all the rows are rendered in the DOM at once.\nIf the grid has a large number of items, using the feature is discouraged to avoid performance issues.",
|
|
837
837
|
"value": {
|
|
838
838
|
"kind": "expression"
|
|
839
839
|
}
|
|
840
840
|
},
|
|
841
841
|
{
|
|
842
|
-
"name": "?
|
|
843
|
-
"description": "
|
|
842
|
+
"name": "?columnReorderingAllowed",
|
|
843
|
+
"description": "Set to true to allow column reordering.",
|
|
844
844
|
"value": {
|
|
845
845
|
"kind": "expression"
|
|
846
846
|
}
|
|
847
847
|
},
|
|
848
848
|
{
|
|
849
|
-
"name": "?
|
|
850
|
-
"description": "
|
|
849
|
+
"name": "?multiSort",
|
|
850
|
+
"description": "When `true`, all `<vaadin-grid-sorter>` are applied for sorting.",
|
|
851
851
|
"value": {
|
|
852
852
|
"kind": "expression"
|
|
853
853
|
}
|
|
854
854
|
},
|
|
855
855
|
{
|
|
856
|
-
"name": "?
|
|
857
|
-
"description": "
|
|
856
|
+
"name": "?multiSortOnShiftClick",
|
|
857
|
+
"description": "When `true`, Shift-clicking an unsorted column's sorter adds it to the multi-sort.\nShift + Space does the same action via keyboard. This property has precedence over the\n`multiSort` property. If `multiSortOnShiftClick` is true, the multiSort property is effectively ignored.",
|
|
858
858
|
"value": {
|
|
859
859
|
"kind": "expression"
|
|
860
860
|
}
|
|
861
861
|
},
|
|
862
862
|
{
|
|
863
|
-
"name": "?
|
|
864
|
-
"description": "
|
|
863
|
+
"name": "?rowsDraggable",
|
|
864
|
+
"description": "Marks the grid's rows to be available for dragging.",
|
|
865
865
|
"value": {
|
|
866
866
|
"kind": "expression"
|
|
867
867
|
}
|
|
@@ -881,85 +881,85 @@
|
|
|
881
881
|
}
|
|
882
882
|
},
|
|
883
883
|
{
|
|
884
|
-
"name": ".
|
|
885
|
-
"description": "
|
|
884
|
+
"name": ".cellPartNameGenerator",
|
|
885
|
+
"description": "A function that allows generating CSS `part` names for grid cells in Shadow DOM based\non their row and column, for styling from outside using the `::part()` selector.\n\nThe return value should be the generated part name as a string, or multiple part names\nseparated by whitespace characters.\n\nReceives two arguments:\n- `column` The `<vaadin-grid-column>` element (`undefined` for details-cell).\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.",
|
|
886
886
|
"value": {
|
|
887
887
|
"kind": "expression"
|
|
888
888
|
}
|
|
889
889
|
},
|
|
890
890
|
{
|
|
891
|
-
"name": ".
|
|
892
|
-
"description": "
|
|
891
|
+
"name": ".columnRendering",
|
|
892
|
+
"description": "Allows you to choose between modes for rendering columns in the grid:\n\n\"eager\" (default): All columns are rendered upfront, regardless of their visibility within the viewport.\nThis mode should generally be preferred, as it avoids the limitations imposed by the \"lazy\" mode.\nUse this mode unless the grid has a large number of columns and performance outweighs the limitations\nin priority.\n\n\"lazy\": Optimizes the rendering of cells when there are multiple columns in the grid by virtualizing\nhorizontal scrolling. In this mode, body cells are rendered only when their corresponding columns are\ninside the visible viewport.\n\nUsing \"lazy\" rendering should be used only if you're dealing with a large number of columns and performance\nis your highest priority. For most use cases, the default \"eager\" mode is recommended due to the\nlimitations imposed by the \"lazy\" mode.\n\nWhen using the \"lazy\" mode, keep the following limitations in mind:\n\n- Row Height: When only a number of columns are visible at once, the height of a row can only be that of\nthe highest cell currently visible on that row. Make sure each cell on a single row has the same height\nas all other cells on that row. If row cells have different heights, users may experience jumpiness when\nscrolling the grid horizontally as lazily rendered cells with different heights are scrolled into view.\n\n- Auto-width Columns: For the columns that are initially outside the visible viewport but still use auto-width,\nonly the header content is taken into account when calculating the column width because the body cells\nof the columns outside the viewport are not initially rendered.\n\n- Screen Reader Compatibility: Screen readers may not be able to associate the focused cells with the correct\nheaders when only a subset of the body cells on a row is rendered.\n\n- Keyboard Navigation: Tabbing through focusable elements inside the grid body may not work as expected because\nsome of the columns that would include focusable elements in the body cells may be outside the visible viewport\nand thus not rendered.",
|
|
893
893
|
"value": {
|
|
894
894
|
"kind": "expression"
|
|
895
895
|
}
|
|
896
896
|
},
|
|
897
897
|
{
|
|
898
|
-
"name": ".
|
|
899
|
-
"description": "
|
|
898
|
+
"name": ".dataProvider",
|
|
899
|
+
"description": "Function that provides items lazily. Receives arguments `params`, `callback`\n\n`params.page` Requested page index\n\n`params.pageSize` Current page size\n\n`params.filters` Currently applied filters\n\n`params.sortOrders` Currently applied sorting orders\n\n`params.parentItem` When tree is used, and sublevel items\nare requested, reference to parent item of the requested sublevel.\nOtherwise `undefined`.\n\n`callback(items, size)` Callback function with arguments:\n - `items` Current page of items\n - `size` Total number of items. When tree sublevel items\n are requested, total number of items in the requested sublevel.\n Optional when tree is not used, required for tree.",
|
|
900
900
|
"value": {
|
|
901
901
|
"kind": "expression"
|
|
902
902
|
}
|
|
903
903
|
},
|
|
904
904
|
{
|
|
905
|
-
"name": ".
|
|
906
|
-
"description": "
|
|
905
|
+
"name": ".detailsOpenedItems",
|
|
906
|
+
"description": "An array containing references to items with open row details.",
|
|
907
907
|
"value": {
|
|
908
908
|
"kind": "expression"
|
|
909
909
|
}
|
|
910
910
|
},
|
|
911
911
|
{
|
|
912
|
-
"name": ".
|
|
913
|
-
"description": "
|
|
912
|
+
"name": ".dragFilter",
|
|
913
|
+
"description": "A function that filters dragging of specific grid rows. The return value should be false\nif dragging of the row should be disabled.\n\nReceives one argument:\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.",
|
|
914
914
|
"value": {
|
|
915
915
|
"kind": "expression"
|
|
916
916
|
}
|
|
917
917
|
},
|
|
918
918
|
{
|
|
919
|
-
"name": ".
|
|
920
|
-
"description": "
|
|
919
|
+
"name": ".dropFilter",
|
|
920
|
+
"description": "A function that filters dropping on specific grid rows. The return value should be false\nif dropping on the row should be disabled.\n\nReceives one argument:\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.",
|
|
921
921
|
"value": {
|
|
922
922
|
"kind": "expression"
|
|
923
923
|
}
|
|
924
924
|
},
|
|
925
925
|
{
|
|
926
|
-
"name": ".
|
|
927
|
-
"description": "
|
|
926
|
+
"name": ".dropMode",
|
|
927
|
+
"description": "Defines the locations within the Grid row where an element can be dropped.\n\nPossible values are:\n- `between`: The drop event can happen between Grid rows.\n- `on-top`: The drop event can happen on top of Grid rows.\n- `on-top-or-between`: The drop event can happen either on top of or between Grid rows.\n- `on-grid`: The drop event will not happen on any specific row, it will show the drop target outline around the whole grid.",
|
|
928
928
|
"value": {
|
|
929
929
|
"kind": "expression"
|
|
930
930
|
}
|
|
931
931
|
},
|
|
932
932
|
{
|
|
933
|
-
"name": ".
|
|
934
|
-
"description": "An array
|
|
933
|
+
"name": ".expandedItems",
|
|
934
|
+
"description": "An array that contains the expanded items.",
|
|
935
935
|
"value": {
|
|
936
936
|
"kind": "expression"
|
|
937
937
|
}
|
|
938
938
|
},
|
|
939
939
|
{
|
|
940
|
-
"name": ".
|
|
941
|
-
"description": "
|
|
940
|
+
"name": ".isItemSelectable",
|
|
941
|
+
"description": "A function to check whether a specific item in the grid may be\nselected or deselected by the user. Used by the selection column to\nconditionally enable to disable checkboxes for individual items. This\nfunction does not prevent programmatic selection/deselection of\nitems. Changing the function does not modify the currently selected\nitems.\n\nConfiguring this function hides the select all checkbox of the grid\nselection column, which means users can not select or deselect all\nitems anymore, nor do they get feedback on whether all items are\nselected or not.\n\nReceives an item instance and should return a boolean indicating\nwhether users may change the selection state of that item.",
|
|
942
942
|
"value": {
|
|
943
943
|
"kind": "expression"
|
|
944
944
|
}
|
|
945
945
|
},
|
|
946
946
|
{
|
|
947
|
-
"name": ".
|
|
948
|
-
"description": "
|
|
947
|
+
"name": ".itemHasChildrenPath",
|
|
948
|
+
"description": "Path to an item sub-property that indicates whether the item has child items.",
|
|
949
949
|
"value": {
|
|
950
950
|
"kind": "expression"
|
|
951
951
|
}
|
|
952
952
|
},
|
|
953
953
|
{
|
|
954
|
-
"name": ".
|
|
955
|
-
"description": "
|
|
954
|
+
"name": ".itemIdPath",
|
|
955
|
+
"description": "Path to an item sub-property that identifies the item.",
|
|
956
956
|
"value": {
|
|
957
957
|
"kind": "expression"
|
|
958
958
|
}
|
|
959
959
|
},
|
|
960
960
|
{
|
|
961
|
-
"name": ".
|
|
962
|
-
"description": "
|
|
961
|
+
"name": ".items",
|
|
962
|
+
"description": "An array containing the items which will be passed to renderer functions.",
|
|
963
963
|
"value": {
|
|
964
964
|
"kind": "expression"
|
|
965
965
|
}
|
|
@@ -972,29 +972,29 @@
|
|
|
972
972
|
}
|
|
973
973
|
},
|
|
974
974
|
{
|
|
975
|
-
"name": ".
|
|
976
|
-
"description": "
|
|
975
|
+
"name": ".pageSize",
|
|
976
|
+
"description": "Number of items fetched at a time from the dataprovider.",
|
|
977
977
|
"value": {
|
|
978
978
|
"kind": "expression"
|
|
979
979
|
}
|
|
980
980
|
},
|
|
981
981
|
{
|
|
982
|
-
"name": ".
|
|
983
|
-
"description": "
|
|
982
|
+
"name": ".rowDetailsRenderer",
|
|
983
|
+
"description": "Custom function for rendering the content of the row details.\nReceives three arguments:\n\n- `root` The row details content DOM element. Append your content to it.\n- `grid` The `<vaadin-grid>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.level` The number of the item's tree sublevel, starts from 0.\n - `model.expanded` True if the item's tree sublevel is expanded.\n - `model.selected` True if the item is selected.",
|
|
984
984
|
"value": {
|
|
985
985
|
"kind": "expression"
|
|
986
986
|
}
|
|
987
987
|
},
|
|
988
988
|
{
|
|
989
|
-
"name": ".
|
|
990
|
-
"description": "
|
|
989
|
+
"name": ".selectedItems",
|
|
990
|
+
"description": "An array that contains the selected items.",
|
|
991
991
|
"value": {
|
|
992
992
|
"kind": "expression"
|
|
993
993
|
}
|
|
994
994
|
},
|
|
995
995
|
{
|
|
996
|
-
"name": ".
|
|
997
|
-
"description": "
|
|
996
|
+
"name": ".size",
|
|
997
|
+
"description": "The number of root-level items in the grid.",
|
|
998
998
|
"value": {
|
|
999
999
|
"kind": "expression"
|
|
1000
1000
|
}
|
|
@@ -1014,85 +1014,85 @@
|
|
|
1014
1014
|
}
|
|
1015
1015
|
},
|
|
1016
1016
|
{
|
|
1017
|
-
"name": "@
|
|
1018
|
-
"description": "Fired when a
|
|
1017
|
+
"name": "@cell-focus",
|
|
1018
|
+
"description": "Fired when a cell is focused with click or keyboard navigation.\n\nUse context property of @see {@link GridCellFocusEvent} to get detail information about the event.",
|
|
1019
1019
|
"value": {
|
|
1020
1020
|
"kind": "expression"
|
|
1021
1021
|
}
|
|
1022
1022
|
},
|
|
1023
1023
|
{
|
|
1024
|
-
"name": "@
|
|
1025
|
-
"description": "Fired when the
|
|
1024
|
+
"name": "@column-reorder",
|
|
1025
|
+
"description": "Fired when the columns in the grid are reordered.",
|
|
1026
1026
|
"value": {
|
|
1027
1027
|
"kind": "expression"
|
|
1028
1028
|
}
|
|
1029
1029
|
},
|
|
1030
1030
|
{
|
|
1031
|
-
"name": "@
|
|
1032
|
-
"description": "Fired when the
|
|
1031
|
+
"name": "@column-resize",
|
|
1032
|
+
"description": "Fired when a column in the grid is resized by the user.",
|
|
1033
1033
|
"value": {
|
|
1034
1034
|
"kind": "expression"
|
|
1035
1035
|
}
|
|
1036
1036
|
},
|
|
1037
1037
|
{
|
|
1038
|
-
"name": "@
|
|
1039
|
-
"description": "Fired when the
|
|
1038
|
+
"name": "@data-provider-changed",
|
|
1039
|
+
"description": "Fired when the `dataProvider` property changes.",
|
|
1040
1040
|
"value": {
|
|
1041
1041
|
"kind": "expression"
|
|
1042
1042
|
}
|
|
1043
1043
|
},
|
|
1044
1044
|
{
|
|
1045
|
-
"name": "@
|
|
1046
|
-
"description": "Fired when the `
|
|
1045
|
+
"name": "@expanded-items-changed",
|
|
1046
|
+
"description": "Fired when the `expandedItems` property changes.",
|
|
1047
1047
|
"value": {
|
|
1048
1048
|
"kind": "expression"
|
|
1049
1049
|
}
|
|
1050
1050
|
},
|
|
1051
1051
|
{
|
|
1052
|
-
"name": "@
|
|
1053
|
-
"description": "Fired when
|
|
1052
|
+
"name": "@grid-dragend",
|
|
1053
|
+
"description": "Fired when the dragging of the rows ends.",
|
|
1054
1054
|
"value": {
|
|
1055
1055
|
"kind": "expression"
|
|
1056
1056
|
}
|
|
1057
1057
|
},
|
|
1058
1058
|
{
|
|
1059
|
-
"name": "@
|
|
1060
|
-
"description": "Fired when
|
|
1059
|
+
"name": "@grid-dragstart",
|
|
1060
|
+
"description": "Fired when starting to drag grid rows.",
|
|
1061
1061
|
"value": {
|
|
1062
1062
|
"kind": "expression"
|
|
1063
1063
|
}
|
|
1064
1064
|
},
|
|
1065
1065
|
{
|
|
1066
|
-
"name": "@grid-
|
|
1067
|
-
"description": "Fired when
|
|
1066
|
+
"name": "@grid-drop",
|
|
1067
|
+
"description": "Fired when a drop occurs on top of the grid.",
|
|
1068
1068
|
"value": {
|
|
1069
1069
|
"kind": "expression"
|
|
1070
1070
|
}
|
|
1071
1071
|
},
|
|
1072
1072
|
{
|
|
1073
|
-
"name": "@
|
|
1074
|
-
"description": "Fired when
|
|
1073
|
+
"name": "@item-toggle",
|
|
1074
|
+
"description": "Fired when the user selects or deselects an item through the selection column.",
|
|
1075
1075
|
"value": {
|
|
1076
1076
|
"kind": "expression"
|
|
1077
1077
|
}
|
|
1078
1078
|
},
|
|
1079
1079
|
{
|
|
1080
|
-
"name": "@
|
|
1081
|
-
"description": "Fired when
|
|
1080
|
+
"name": "@loading-changed",
|
|
1081
|
+
"description": "Fired when the `loading` property changes.",
|
|
1082
1082
|
"value": {
|
|
1083
1083
|
"kind": "expression"
|
|
1084
1084
|
}
|
|
1085
1085
|
},
|
|
1086
1086
|
{
|
|
1087
|
-
"name": "@
|
|
1088
|
-
"description": "Fired when the `
|
|
1087
|
+
"name": "@selected-items-changed",
|
|
1088
|
+
"description": "Fired when the `selectedItems` property changes.",
|
|
1089
1089
|
"value": {
|
|
1090
1090
|
"kind": "expression"
|
|
1091
1091
|
}
|
|
1092
1092
|
},
|
|
1093
1093
|
{
|
|
1094
|
-
"name": "@
|
|
1095
|
-
"description": "Fired when the `
|
|
1094
|
+
"name": "@size-changed",
|
|
1095
|
+
"description": "Fired when the `size` property changes.",
|
|
1096
1096
|
"value": {
|
|
1097
1097
|
"kind": "expression"
|
|
1098
1098
|
}
|