@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.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
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -11,11 +11,11 @@
|
|
|
11
11
|
"description": "A `<vaadin-grid-column-group>` is used to make groups of columns in `<vaadin-grid>` and\nto configure additional headers and footers.\n\nGroups can be nested to create complex header and footer configurations.\n\n#### Example:\n```html\n<vaadin-grid-column-group resizable id=\"columnGroup\">\n <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n</vaadin-grid-column-group>\n```\n```js\nconst columnGroup = document.querySelector('#columnGroup');\ncolumnGroup.headerRenderer = (root, columnGroup) => {\n root.textContent = 'header';\n}\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => { ... };\ncolumn1.renderer = (root, column, model) => { ... };\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => { ... };\ncolumn2.renderer = (root, column, model) => { ... };\n```",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
|
-
"name": "
|
|
15
|
-
"description": "
|
|
14
|
+
"name": "footer-part-name",
|
|
15
|
+
"description": "Custom part name for the footer cell.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"
|
|
18
|
+
"string",
|
|
19
19
|
"null",
|
|
20
20
|
"undefined"
|
|
21
21
|
]
|
|
@@ -40,64 +40,64 @@
|
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
|
-
"name": "
|
|
44
|
-
"description": "
|
|
43
|
+
"name": "header",
|
|
44
|
+
"description": "Text content to display in the header cell of the column.",
|
|
45
45
|
"value": {
|
|
46
46
|
"type": [
|
|
47
|
-
"
|
|
47
|
+
"string",
|
|
48
|
+
"null",
|
|
49
|
+
"undefined"
|
|
48
50
|
]
|
|
49
51
|
}
|
|
50
52
|
},
|
|
51
53
|
{
|
|
52
|
-
"name": "
|
|
53
|
-
"description": "
|
|
54
|
+
"name": "header-part-name",
|
|
55
|
+
"description": "Custom part name for the header cell.",
|
|
54
56
|
"value": {
|
|
55
57
|
"type": [
|
|
56
|
-
"
|
|
58
|
+
"string",
|
|
57
59
|
"null",
|
|
58
60
|
"undefined"
|
|
59
61
|
]
|
|
60
62
|
}
|
|
61
63
|
},
|
|
62
64
|
{
|
|
63
|
-
"name": "
|
|
64
|
-
"description": "
|
|
65
|
+
"name": "hidden",
|
|
66
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
65
67
|
"value": {
|
|
66
68
|
"type": [
|
|
67
|
-
"
|
|
69
|
+
"boolean",
|
|
68
70
|
"null",
|
|
69
71
|
"undefined"
|
|
70
72
|
]
|
|
71
73
|
}
|
|
72
74
|
},
|
|
73
75
|
{
|
|
74
|
-
"name": "
|
|
75
|
-
"description": "
|
|
76
|
+
"name": "resizable",
|
|
77
|
+
"description": "When set to true, the column is user-resizable.",
|
|
76
78
|
"value": {
|
|
77
79
|
"type": [
|
|
78
|
-
"
|
|
80
|
+
"boolean",
|
|
79
81
|
"null",
|
|
80
82
|
"undefined"
|
|
81
83
|
]
|
|
82
84
|
}
|
|
83
85
|
},
|
|
84
86
|
{
|
|
85
|
-
"name": "header
|
|
86
|
-
"description": "
|
|
87
|
+
"name": "row-header",
|
|
88
|
+
"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.",
|
|
87
89
|
"value": {
|
|
88
90
|
"type": [
|
|
89
|
-
"
|
|
90
|
-
"null",
|
|
91
|
-
"undefined"
|
|
91
|
+
"boolean"
|
|
92
92
|
]
|
|
93
93
|
}
|
|
94
94
|
},
|
|
95
95
|
{
|
|
96
|
-
"name": "
|
|
97
|
-
"description": "
|
|
96
|
+
"name": "text-align",
|
|
97
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
98
98
|
"value": {
|
|
99
99
|
"type": [
|
|
100
|
-
"
|
|
100
|
+
"GridColumnTextAlign",
|
|
101
101
|
"null",
|
|
102
102
|
"undefined"
|
|
103
103
|
]
|
|
@@ -118,28 +118,30 @@
|
|
|
118
118
|
"js": {
|
|
119
119
|
"properties": [
|
|
120
120
|
{
|
|
121
|
-
"name": "
|
|
122
|
-
"description": "
|
|
121
|
+
"name": "footerPartName",
|
|
122
|
+
"description": "Custom part name for the footer cell.",
|
|
123
123
|
"value": {
|
|
124
124
|
"type": [
|
|
125
|
-
"
|
|
125
|
+
"string",
|
|
126
126
|
"null",
|
|
127
127
|
"undefined"
|
|
128
128
|
]
|
|
129
129
|
}
|
|
130
130
|
},
|
|
131
131
|
{
|
|
132
|
-
"name": "
|
|
133
|
-
"description": "
|
|
132
|
+
"name": "footerRenderer",
|
|
133
|
+
"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.",
|
|
134
134
|
"value": {
|
|
135
135
|
"type": [
|
|
136
|
-
"
|
|
136
|
+
"GridHeaderFooterRenderer",
|
|
137
|
+
"null",
|
|
138
|
+
"undefined"
|
|
137
139
|
]
|
|
138
140
|
}
|
|
139
141
|
},
|
|
140
142
|
{
|
|
141
|
-
"name": "
|
|
142
|
-
"description": "When true, the column is frozen
|
|
143
|
+
"name": "frozen",
|
|
144
|
+
"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.",
|
|
143
145
|
"value": {
|
|
144
146
|
"type": [
|
|
145
147
|
"boolean"
|
|
@@ -147,8 +149,8 @@
|
|
|
147
149
|
}
|
|
148
150
|
},
|
|
149
151
|
{
|
|
150
|
-
"name": "
|
|
151
|
-
"description": "When true, the
|
|
152
|
+
"name": "frozenToEnd",
|
|
153
|
+
"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.",
|
|
152
154
|
"value": {
|
|
153
155
|
"type": [
|
|
154
156
|
"boolean"
|
|
@@ -156,19 +158,19 @@
|
|
|
156
158
|
}
|
|
157
159
|
},
|
|
158
160
|
{
|
|
159
|
-
"name": "
|
|
160
|
-
"description": "
|
|
161
|
+
"name": "header",
|
|
162
|
+
"description": "Text content to display in the header cell of the column.",
|
|
161
163
|
"value": {
|
|
162
164
|
"type": [
|
|
163
|
-
"
|
|
165
|
+
"string",
|
|
164
166
|
"null",
|
|
165
167
|
"undefined"
|
|
166
168
|
]
|
|
167
169
|
}
|
|
168
170
|
},
|
|
169
171
|
{
|
|
170
|
-
"name": "
|
|
171
|
-
"description": "
|
|
172
|
+
"name": "headerPartName",
|
|
173
|
+
"description": "Custom part name for the header cell.",
|
|
172
174
|
"value": {
|
|
173
175
|
"type": [
|
|
174
176
|
"string",
|
|
@@ -178,55 +180,53 @@
|
|
|
178
180
|
}
|
|
179
181
|
},
|
|
180
182
|
{
|
|
181
|
-
"name": "
|
|
182
|
-
"description": "
|
|
183
|
+
"name": "headerRenderer",
|
|
184
|
+
"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.",
|
|
183
185
|
"value": {
|
|
184
186
|
"type": [
|
|
185
|
-
"
|
|
187
|
+
"GridHeaderFooterRenderer",
|
|
186
188
|
"null",
|
|
187
189
|
"undefined"
|
|
188
190
|
]
|
|
189
191
|
}
|
|
190
192
|
},
|
|
191
193
|
{
|
|
192
|
-
"name": "
|
|
193
|
-
"description": "
|
|
194
|
+
"name": "hidden",
|
|
195
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
194
196
|
"value": {
|
|
195
197
|
"type": [
|
|
196
|
-
"
|
|
198
|
+
"boolean",
|
|
197
199
|
"null",
|
|
198
200
|
"undefined"
|
|
199
201
|
]
|
|
200
202
|
}
|
|
201
203
|
},
|
|
202
204
|
{
|
|
203
|
-
"name": "
|
|
204
|
-
"description": "
|
|
205
|
+
"name": "resizable",
|
|
206
|
+
"description": "When set to true, the column is user-resizable.",
|
|
205
207
|
"value": {
|
|
206
208
|
"type": [
|
|
207
|
-
"
|
|
209
|
+
"boolean",
|
|
208
210
|
"null",
|
|
209
211
|
"undefined"
|
|
210
212
|
]
|
|
211
213
|
}
|
|
212
214
|
},
|
|
213
215
|
{
|
|
214
|
-
"name": "
|
|
215
|
-
"description": "
|
|
216
|
+
"name": "rowHeader",
|
|
217
|
+
"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.",
|
|
216
218
|
"value": {
|
|
217
219
|
"type": [
|
|
218
|
-
"
|
|
219
|
-
"null",
|
|
220
|
-
"undefined"
|
|
220
|
+
"boolean"
|
|
221
221
|
]
|
|
222
222
|
}
|
|
223
223
|
},
|
|
224
224
|
{
|
|
225
|
-
"name": "
|
|
226
|
-
"description": "
|
|
225
|
+
"name": "textAlign",
|
|
226
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
227
227
|
"value": {
|
|
228
228
|
"type": [
|
|
229
|
-
"
|
|
229
|
+
"GridColumnTextAlign",
|
|
230
230
|
"null",
|
|
231
231
|
"undefined"
|
|
232
232
|
]
|
|
@@ -238,40 +238,40 @@
|
|
|
238
238
|
},
|
|
239
239
|
{
|
|
240
240
|
"name": "vaadin-grid-column",
|
|
241
|
-
"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-
|
|
241
|
+
"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>`.",
|
|
242
242
|
"attributes": [
|
|
243
243
|
{
|
|
244
|
-
"name": "
|
|
245
|
-
"description": "
|
|
244
|
+
"name": "auto-width",
|
|
245
|
+
"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.",
|
|
246
246
|
"value": {
|
|
247
247
|
"type": [
|
|
248
|
-
"boolean"
|
|
249
|
-
"null",
|
|
250
|
-
"undefined"
|
|
248
|
+
"boolean"
|
|
251
249
|
]
|
|
252
250
|
}
|
|
253
251
|
},
|
|
254
252
|
{
|
|
255
|
-
"name": "
|
|
256
|
-
"description": "
|
|
253
|
+
"name": "flex-grow",
|
|
254
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
257
255
|
"value": {
|
|
258
256
|
"type": [
|
|
259
|
-
"
|
|
257
|
+
"number"
|
|
260
258
|
]
|
|
261
259
|
}
|
|
262
260
|
},
|
|
263
261
|
{
|
|
264
|
-
"name": "
|
|
265
|
-
"description": "
|
|
262
|
+
"name": "footer-part-name",
|
|
263
|
+
"description": "Custom part name for the footer cell.",
|
|
266
264
|
"value": {
|
|
267
265
|
"type": [
|
|
268
|
-
"
|
|
266
|
+
"string",
|
|
267
|
+
"null",
|
|
268
|
+
"undefined"
|
|
269
269
|
]
|
|
270
270
|
}
|
|
271
271
|
},
|
|
272
272
|
{
|
|
273
|
-
"name": "
|
|
274
|
-
"description": "When true, the
|
|
273
|
+
"name": "frozen",
|
|
274
|
+
"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.",
|
|
275
275
|
"value": {
|
|
276
276
|
"type": [
|
|
277
277
|
"boolean"
|
|
@@ -279,13 +279,11 @@
|
|
|
279
279
|
}
|
|
280
280
|
},
|
|
281
281
|
{
|
|
282
|
-
"name": "
|
|
283
|
-
"description": "When
|
|
282
|
+
"name": "frozen-to-end",
|
|
283
|
+
"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.",
|
|
284
284
|
"value": {
|
|
285
285
|
"type": [
|
|
286
|
-
"boolean"
|
|
287
|
-
"null",
|
|
288
|
-
"undefined"
|
|
286
|
+
"boolean"
|
|
289
287
|
]
|
|
290
288
|
}
|
|
291
289
|
},
|
|
@@ -301,30 +299,30 @@
|
|
|
301
299
|
}
|
|
302
300
|
},
|
|
303
301
|
{
|
|
304
|
-
"name": "
|
|
305
|
-
"description": "
|
|
302
|
+
"name": "header-part-name",
|
|
303
|
+
"description": "Custom part name for the header cell.",
|
|
306
304
|
"value": {
|
|
307
305
|
"type": [
|
|
308
|
-
"
|
|
306
|
+
"string",
|
|
309
307
|
"null",
|
|
310
308
|
"undefined"
|
|
311
309
|
]
|
|
312
310
|
}
|
|
313
311
|
},
|
|
314
312
|
{
|
|
315
|
-
"name": "
|
|
316
|
-
"description": "
|
|
313
|
+
"name": "hidden",
|
|
314
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
317
315
|
"value": {
|
|
318
316
|
"type": [
|
|
319
|
-
"
|
|
317
|
+
"boolean",
|
|
320
318
|
"null",
|
|
321
319
|
"undefined"
|
|
322
320
|
]
|
|
323
321
|
}
|
|
324
322
|
},
|
|
325
323
|
{
|
|
326
|
-
"name": "
|
|
327
|
-
"description": "
|
|
324
|
+
"name": "path",
|
|
325
|
+
"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.",
|
|
328
326
|
"value": {
|
|
329
327
|
"type": [
|
|
330
328
|
"string",
|
|
@@ -334,48 +332,50 @@
|
|
|
334
332
|
}
|
|
335
333
|
},
|
|
336
334
|
{
|
|
337
|
-
"name": "
|
|
338
|
-
"description": "
|
|
335
|
+
"name": "resizable",
|
|
336
|
+
"description": "When set to true, the column is user-resizable.",
|
|
339
337
|
"value": {
|
|
340
338
|
"type": [
|
|
341
|
-
"
|
|
339
|
+
"boolean",
|
|
342
340
|
"null",
|
|
343
341
|
"undefined"
|
|
344
342
|
]
|
|
345
343
|
}
|
|
346
344
|
},
|
|
347
345
|
{
|
|
348
|
-
"name": "
|
|
349
|
-
"description": "
|
|
346
|
+
"name": "row-header",
|
|
347
|
+
"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.",
|
|
350
348
|
"value": {
|
|
351
349
|
"type": [
|
|
352
|
-
"
|
|
350
|
+
"boolean"
|
|
353
351
|
]
|
|
354
352
|
}
|
|
355
353
|
},
|
|
356
354
|
{
|
|
357
|
-
"name": "
|
|
358
|
-
"description": "
|
|
355
|
+
"name": "text-align",
|
|
356
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
359
357
|
"value": {
|
|
360
358
|
"type": [
|
|
361
|
-
"
|
|
359
|
+
"GridColumnTextAlign",
|
|
362
360
|
"null",
|
|
363
361
|
"undefined"
|
|
364
362
|
]
|
|
365
363
|
}
|
|
366
364
|
},
|
|
367
365
|
{
|
|
368
|
-
"name": "
|
|
369
|
-
"description": "
|
|
366
|
+
"name": "theme",
|
|
367
|
+
"description": "The theme variants to apply to the component.",
|
|
370
368
|
"value": {
|
|
371
369
|
"type": [
|
|
372
|
-
"
|
|
370
|
+
"string",
|
|
371
|
+
"null",
|
|
372
|
+
"undefined"
|
|
373
373
|
]
|
|
374
374
|
}
|
|
375
375
|
},
|
|
376
376
|
{
|
|
377
|
-
"name": "
|
|
378
|
-
"description": "
|
|
377
|
+
"name": "width",
|
|
378
|
+
"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.",
|
|
379
379
|
"value": {
|
|
380
380
|
"type": [
|
|
381
381
|
"string",
|
|
@@ -388,19 +388,8 @@
|
|
|
388
388
|
"js": {
|
|
389
389
|
"properties": [
|
|
390
390
|
{
|
|
391
|
-
"name": "
|
|
392
|
-
"description": "
|
|
393
|
-
"value": {
|
|
394
|
-
"type": [
|
|
395
|
-
"boolean",
|
|
396
|
-
"null",
|
|
397
|
-
"undefined"
|
|
398
|
-
]
|
|
399
|
-
}
|
|
400
|
-
},
|
|
401
|
-
{
|
|
402
|
-
"name": "frozen",
|
|
403
|
-
"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.",
|
|
391
|
+
"name": "autoWidth",
|
|
392
|
+
"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.",
|
|
404
393
|
"value": {
|
|
405
394
|
"type": [
|
|
406
395
|
"boolean"
|
|
@@ -408,59 +397,57 @@
|
|
|
408
397
|
}
|
|
409
398
|
},
|
|
410
399
|
{
|
|
411
|
-
"name": "
|
|
412
|
-
"description": "
|
|
400
|
+
"name": "flexGrow",
|
|
401
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
413
402
|
"value": {
|
|
414
403
|
"type": [
|
|
415
|
-
"
|
|
404
|
+
"number"
|
|
416
405
|
]
|
|
417
406
|
}
|
|
418
407
|
},
|
|
419
408
|
{
|
|
420
|
-
"name": "
|
|
421
|
-
"description": "
|
|
409
|
+
"name": "footerPartName",
|
|
410
|
+
"description": "Custom part name for the footer cell.",
|
|
422
411
|
"value": {
|
|
423
412
|
"type": [
|
|
424
|
-
"
|
|
413
|
+
"string",
|
|
414
|
+
"null",
|
|
415
|
+
"undefined"
|
|
425
416
|
]
|
|
426
417
|
}
|
|
427
418
|
},
|
|
428
419
|
{
|
|
429
|
-
"name": "
|
|
430
|
-
"description": "
|
|
420
|
+
"name": "footerRenderer",
|
|
421
|
+
"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.",
|
|
431
422
|
"value": {
|
|
432
423
|
"type": [
|
|
433
|
-
"
|
|
424
|
+
"GridHeaderFooterRenderer",
|
|
434
425
|
"null",
|
|
435
426
|
"undefined"
|
|
436
427
|
]
|
|
437
428
|
}
|
|
438
429
|
},
|
|
439
430
|
{
|
|
440
|
-
"name": "
|
|
441
|
-
"description": "
|
|
431
|
+
"name": "frozen",
|
|
432
|
+
"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.",
|
|
442
433
|
"value": {
|
|
443
434
|
"type": [
|
|
444
|
-
"
|
|
445
|
-
"null",
|
|
446
|
-
"undefined"
|
|
435
|
+
"boolean"
|
|
447
436
|
]
|
|
448
437
|
}
|
|
449
438
|
},
|
|
450
439
|
{
|
|
451
|
-
"name": "
|
|
452
|
-
"description": "
|
|
440
|
+
"name": "frozenToEnd",
|
|
441
|
+
"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.",
|
|
453
442
|
"value": {
|
|
454
443
|
"type": [
|
|
455
|
-
"
|
|
456
|
-
"null",
|
|
457
|
-
"undefined"
|
|
444
|
+
"boolean"
|
|
458
445
|
]
|
|
459
446
|
}
|
|
460
447
|
},
|
|
461
448
|
{
|
|
462
|
-
"name": "
|
|
463
|
-
"description": "
|
|
449
|
+
"name": "header",
|
|
450
|
+
"description": "Text content to display in the header cell of the column.",
|
|
464
451
|
"value": {
|
|
465
452
|
"type": [
|
|
466
453
|
"string",
|
|
@@ -470,8 +457,8 @@
|
|
|
470
457
|
}
|
|
471
458
|
},
|
|
472
459
|
{
|
|
473
|
-
"name": "
|
|
474
|
-
"description": "Custom part name for the
|
|
460
|
+
"name": "headerPartName",
|
|
461
|
+
"description": "Custom part name for the header cell.",
|
|
475
462
|
"value": {
|
|
476
463
|
"type": [
|
|
477
464
|
"string",
|
|
@@ -492,19 +479,19 @@
|
|
|
492
479
|
}
|
|
493
480
|
},
|
|
494
481
|
{
|
|
495
|
-
"name": "
|
|
496
|
-
"description": "
|
|
482
|
+
"name": "hidden",
|
|
483
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
497
484
|
"value": {
|
|
498
485
|
"type": [
|
|
499
|
-
"
|
|
486
|
+
"boolean",
|
|
500
487
|
"null",
|
|
501
488
|
"undefined"
|
|
502
489
|
]
|
|
503
490
|
}
|
|
504
491
|
},
|
|
505
492
|
{
|
|
506
|
-
"name": "
|
|
507
|
-
"description": "
|
|
493
|
+
"name": "path",
|
|
494
|
+
"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.",
|
|
508
495
|
"value": {
|
|
509
496
|
"type": [
|
|
510
497
|
"string",
|
|
@@ -514,42 +501,55 @@
|
|
|
514
501
|
}
|
|
515
502
|
},
|
|
516
503
|
{
|
|
517
|
-
"name": "
|
|
518
|
-
"description": "
|
|
504
|
+
"name": "renderer",
|
|
505
|
+
"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.",
|
|
519
506
|
"value": {
|
|
520
507
|
"type": [
|
|
521
|
-
"
|
|
508
|
+
"GridBodyRenderer",
|
|
509
|
+
"null",
|
|
510
|
+
"undefined"
|
|
522
511
|
]
|
|
523
512
|
}
|
|
524
513
|
},
|
|
525
514
|
{
|
|
526
|
-
"name": "
|
|
527
|
-
"description": "
|
|
515
|
+
"name": "resizable",
|
|
516
|
+
"description": "When set to true, the column is user-resizable.",
|
|
528
517
|
"value": {
|
|
529
518
|
"type": [
|
|
530
|
-
"
|
|
519
|
+
"boolean",
|
|
531
520
|
"null",
|
|
532
521
|
"undefined"
|
|
533
522
|
]
|
|
534
523
|
}
|
|
535
524
|
},
|
|
536
525
|
{
|
|
537
|
-
"name": "
|
|
538
|
-
"description": "
|
|
526
|
+
"name": "rowHeader",
|
|
527
|
+
"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.",
|
|
539
528
|
"value": {
|
|
540
529
|
"type": [
|
|
541
|
-
"
|
|
530
|
+
"boolean"
|
|
531
|
+
]
|
|
532
|
+
}
|
|
533
|
+
},
|
|
534
|
+
{
|
|
535
|
+
"name": "textAlign",
|
|
536
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
537
|
+
"value": {
|
|
538
|
+
"type": [
|
|
539
|
+
"GridColumnTextAlign",
|
|
542
540
|
"null",
|
|
543
541
|
"undefined"
|
|
544
542
|
]
|
|
545
543
|
}
|
|
546
544
|
},
|
|
547
545
|
{
|
|
548
|
-
"name": "
|
|
549
|
-
"description": "
|
|
546
|
+
"name": "width",
|
|
547
|
+
"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.",
|
|
550
548
|
"value": {
|
|
551
549
|
"type": [
|
|
552
|
-
"
|
|
550
|
+
"string",
|
|
551
|
+
"null",
|
|
552
|
+
"undefined"
|
|
553
553
|
]
|
|
554
554
|
}
|
|
555
555
|
}
|
|
@@ -573,8 +573,8 @@
|
|
|
573
573
|
}
|
|
574
574
|
},
|
|
575
575
|
{
|
|
576
|
-
"name": "
|
|
577
|
-
"description": "
|
|
576
|
+
"name": "theme",
|
|
577
|
+
"description": "The theme variants to apply to the component.",
|
|
578
578
|
"value": {
|
|
579
579
|
"type": [
|
|
580
580
|
"string",
|
|
@@ -584,8 +584,8 @@
|
|
|
584
584
|
}
|
|
585
585
|
},
|
|
586
586
|
{
|
|
587
|
-
"name": "
|
|
588
|
-
"description": "
|
|
587
|
+
"name": "value",
|
|
588
|
+
"description": "Current filter value.",
|
|
589
589
|
"value": {
|
|
590
590
|
"type": [
|
|
591
591
|
"string",
|
|
@@ -633,37 +633,37 @@
|
|
|
633
633
|
"description": "`<vaadin-grid-filter-column>` is a helper element for the `<vaadin-grid>`\nthat provides default header renderer and functionality for filtering.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-filter-column path=\"name.first\"></vaadin-grid-filter-column>\n\n <vaadin-grid-column>\n ...\n```",
|
|
634
634
|
"attributes": [
|
|
635
635
|
{
|
|
636
|
-
"name": "
|
|
637
|
-
"description": "
|
|
636
|
+
"name": "auto-width",
|
|
637
|
+
"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.",
|
|
638
638
|
"value": {
|
|
639
639
|
"type": [
|
|
640
|
-
"boolean"
|
|
641
|
-
"null",
|
|
642
|
-
"undefined"
|
|
640
|
+
"boolean"
|
|
643
641
|
]
|
|
644
642
|
}
|
|
645
643
|
},
|
|
646
644
|
{
|
|
647
|
-
"name": "
|
|
648
|
-
"description": "
|
|
645
|
+
"name": "flex-grow",
|
|
646
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
649
647
|
"value": {
|
|
650
648
|
"type": [
|
|
651
|
-
"
|
|
649
|
+
"number"
|
|
652
650
|
]
|
|
653
651
|
}
|
|
654
652
|
},
|
|
655
653
|
{
|
|
656
|
-
"name": "
|
|
657
|
-
"description": "
|
|
654
|
+
"name": "footer-part-name",
|
|
655
|
+
"description": "Custom part name for the footer cell.",
|
|
658
656
|
"value": {
|
|
659
657
|
"type": [
|
|
660
|
-
"
|
|
658
|
+
"string",
|
|
659
|
+
"null",
|
|
660
|
+
"undefined"
|
|
661
661
|
]
|
|
662
662
|
}
|
|
663
663
|
},
|
|
664
664
|
{
|
|
665
|
-
"name": "
|
|
666
|
-
"description": "When true, the
|
|
665
|
+
"name": "frozen",
|
|
666
|
+
"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.",
|
|
667
667
|
"value": {
|
|
668
668
|
"type": [
|
|
669
669
|
"boolean"
|
|
@@ -671,13 +671,11 @@
|
|
|
671
671
|
}
|
|
672
672
|
},
|
|
673
673
|
{
|
|
674
|
-
"name": "
|
|
675
|
-
"description": "When
|
|
674
|
+
"name": "frozen-to-end",
|
|
675
|
+
"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.",
|
|
676
676
|
"value": {
|
|
677
677
|
"type": [
|
|
678
|
-
"boolean"
|
|
679
|
-
"null",
|
|
680
|
-
"undefined"
|
|
678
|
+
"boolean"
|
|
681
679
|
]
|
|
682
680
|
}
|
|
683
681
|
},
|
|
@@ -693,30 +691,30 @@
|
|
|
693
691
|
}
|
|
694
692
|
},
|
|
695
693
|
{
|
|
696
|
-
"name": "
|
|
697
|
-
"description": "
|
|
694
|
+
"name": "header-part-name",
|
|
695
|
+
"description": "Custom part name for the header cell.",
|
|
698
696
|
"value": {
|
|
699
697
|
"type": [
|
|
700
|
-
"
|
|
698
|
+
"string",
|
|
701
699
|
"null",
|
|
702
700
|
"undefined"
|
|
703
701
|
]
|
|
704
702
|
}
|
|
705
703
|
},
|
|
706
704
|
{
|
|
707
|
-
"name": "
|
|
708
|
-
"description": "
|
|
705
|
+
"name": "hidden",
|
|
706
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
709
707
|
"value": {
|
|
710
708
|
"type": [
|
|
711
|
-
"
|
|
709
|
+
"boolean",
|
|
712
710
|
"null",
|
|
713
711
|
"undefined"
|
|
714
712
|
]
|
|
715
713
|
}
|
|
716
714
|
},
|
|
717
715
|
{
|
|
718
|
-
"name": "
|
|
719
|
-
"description": "
|
|
716
|
+
"name": "path",
|
|
717
|
+
"description": "JS Path of the property in the item used for filtering the data.",
|
|
720
718
|
"value": {
|
|
721
719
|
"type": [
|
|
722
720
|
"string",
|
|
@@ -726,48 +724,50 @@
|
|
|
726
724
|
}
|
|
727
725
|
},
|
|
728
726
|
{
|
|
729
|
-
"name": "
|
|
730
|
-
"description": "
|
|
727
|
+
"name": "resizable",
|
|
728
|
+
"description": "When set to true, the column is user-resizable.",
|
|
731
729
|
"value": {
|
|
732
730
|
"type": [
|
|
733
|
-
"
|
|
731
|
+
"boolean",
|
|
734
732
|
"null",
|
|
735
733
|
"undefined"
|
|
736
734
|
]
|
|
737
735
|
}
|
|
738
736
|
},
|
|
739
737
|
{
|
|
740
|
-
"name": "
|
|
741
|
-
"description": "
|
|
738
|
+
"name": "row-header",
|
|
739
|
+
"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.",
|
|
742
740
|
"value": {
|
|
743
741
|
"type": [
|
|
744
|
-
"
|
|
742
|
+
"boolean"
|
|
745
743
|
]
|
|
746
744
|
}
|
|
747
745
|
},
|
|
748
746
|
{
|
|
749
|
-
"name": "
|
|
750
|
-
"description": "
|
|
747
|
+
"name": "text-align",
|
|
748
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
751
749
|
"value": {
|
|
752
750
|
"type": [
|
|
753
|
-
"
|
|
751
|
+
"GridColumnTextAlign",
|
|
754
752
|
"null",
|
|
755
753
|
"undefined"
|
|
756
754
|
]
|
|
757
755
|
}
|
|
758
756
|
},
|
|
759
757
|
{
|
|
760
|
-
"name": "
|
|
761
|
-
"description": "
|
|
758
|
+
"name": "theme",
|
|
759
|
+
"description": "The theme variants to apply to the component.",
|
|
762
760
|
"value": {
|
|
763
761
|
"type": [
|
|
764
|
-
"
|
|
762
|
+
"string",
|
|
763
|
+
"null",
|
|
764
|
+
"undefined"
|
|
765
765
|
]
|
|
766
766
|
}
|
|
767
767
|
},
|
|
768
768
|
{
|
|
769
|
-
"name": "
|
|
770
|
-
"description": "
|
|
769
|
+
"name": "width",
|
|
770
|
+
"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.",
|
|
771
771
|
"value": {
|
|
772
772
|
"type": [
|
|
773
773
|
"string",
|
|
@@ -780,19 +780,8 @@
|
|
|
780
780
|
"js": {
|
|
781
781
|
"properties": [
|
|
782
782
|
{
|
|
783
|
-
"name": "
|
|
784
|
-
"description": "
|
|
785
|
-
"value": {
|
|
786
|
-
"type": [
|
|
787
|
-
"boolean",
|
|
788
|
-
"null",
|
|
789
|
-
"undefined"
|
|
790
|
-
]
|
|
791
|
-
}
|
|
792
|
-
},
|
|
793
|
-
{
|
|
794
|
-
"name": "frozen",
|
|
795
|
-
"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.",
|
|
783
|
+
"name": "autoWidth",
|
|
784
|
+
"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.",
|
|
796
785
|
"value": {
|
|
797
786
|
"type": [
|
|
798
787
|
"boolean"
|
|
@@ -800,59 +789,57 @@
|
|
|
800
789
|
}
|
|
801
790
|
},
|
|
802
791
|
{
|
|
803
|
-
"name": "
|
|
804
|
-
"description": "
|
|
792
|
+
"name": "flexGrow",
|
|
793
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
805
794
|
"value": {
|
|
806
795
|
"type": [
|
|
807
|
-
"
|
|
796
|
+
"number"
|
|
808
797
|
]
|
|
809
798
|
}
|
|
810
799
|
},
|
|
811
800
|
{
|
|
812
|
-
"name": "
|
|
813
|
-
"description": "
|
|
801
|
+
"name": "footerPartName",
|
|
802
|
+
"description": "Custom part name for the footer cell.",
|
|
814
803
|
"value": {
|
|
815
804
|
"type": [
|
|
816
|
-
"
|
|
805
|
+
"string",
|
|
806
|
+
"null",
|
|
807
|
+
"undefined"
|
|
817
808
|
]
|
|
818
809
|
}
|
|
819
810
|
},
|
|
820
811
|
{
|
|
821
|
-
"name": "
|
|
822
|
-
"description": "
|
|
812
|
+
"name": "footerRenderer",
|
|
813
|
+
"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.",
|
|
823
814
|
"value": {
|
|
824
815
|
"type": [
|
|
825
|
-
"
|
|
816
|
+
"GridHeaderFooterRenderer",
|
|
826
817
|
"null",
|
|
827
818
|
"undefined"
|
|
828
819
|
]
|
|
829
820
|
}
|
|
830
821
|
},
|
|
831
822
|
{
|
|
832
|
-
"name": "
|
|
833
|
-
"description": "
|
|
823
|
+
"name": "frozen",
|
|
824
|
+
"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.",
|
|
834
825
|
"value": {
|
|
835
826
|
"type": [
|
|
836
|
-
"
|
|
837
|
-
"null",
|
|
838
|
-
"undefined"
|
|
827
|
+
"boolean"
|
|
839
828
|
]
|
|
840
829
|
}
|
|
841
830
|
},
|
|
842
831
|
{
|
|
843
|
-
"name": "
|
|
844
|
-
"description": "
|
|
832
|
+
"name": "frozenToEnd",
|
|
833
|
+
"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.",
|
|
845
834
|
"value": {
|
|
846
835
|
"type": [
|
|
847
|
-
"
|
|
848
|
-
"null",
|
|
849
|
-
"undefined"
|
|
836
|
+
"boolean"
|
|
850
837
|
]
|
|
851
838
|
}
|
|
852
839
|
},
|
|
853
840
|
{
|
|
854
|
-
"name": "
|
|
855
|
-
"description": "
|
|
841
|
+
"name": "header",
|
|
842
|
+
"description": "Text to display as the label of the column filter text-field.",
|
|
856
843
|
"value": {
|
|
857
844
|
"type": [
|
|
858
845
|
"string",
|
|
@@ -862,8 +849,8 @@
|
|
|
862
849
|
}
|
|
863
850
|
},
|
|
864
851
|
{
|
|
865
|
-
"name": "
|
|
866
|
-
"description": "Custom part name for the
|
|
852
|
+
"name": "headerPartName",
|
|
853
|
+
"description": "Custom part name for the header cell.",
|
|
867
854
|
"value": {
|
|
868
855
|
"type": [
|
|
869
856
|
"string",
|
|
@@ -884,19 +871,19 @@
|
|
|
884
871
|
}
|
|
885
872
|
},
|
|
886
873
|
{
|
|
887
|
-
"name": "
|
|
888
|
-
"description": "
|
|
874
|
+
"name": "hidden",
|
|
875
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
889
876
|
"value": {
|
|
890
877
|
"type": [
|
|
891
|
-
"
|
|
878
|
+
"boolean",
|
|
892
879
|
"null",
|
|
893
880
|
"undefined"
|
|
894
881
|
]
|
|
895
882
|
}
|
|
896
883
|
},
|
|
897
884
|
{
|
|
898
|
-
"name": "
|
|
899
|
-
"description": "
|
|
885
|
+
"name": "path",
|
|
886
|
+
"description": "JS Path of the property in the item used for filtering the data.",
|
|
900
887
|
"value": {
|
|
901
888
|
"type": [
|
|
902
889
|
"string",
|
|
@@ -906,42 +893,55 @@
|
|
|
906
893
|
}
|
|
907
894
|
},
|
|
908
895
|
{
|
|
909
|
-
"name": "
|
|
910
|
-
"description": "
|
|
896
|
+
"name": "renderer",
|
|
897
|
+
"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.",
|
|
911
898
|
"value": {
|
|
912
899
|
"type": [
|
|
913
|
-
"
|
|
900
|
+
"GridBodyRenderer",
|
|
901
|
+
"null",
|
|
902
|
+
"undefined"
|
|
914
903
|
]
|
|
915
904
|
}
|
|
916
905
|
},
|
|
917
906
|
{
|
|
918
|
-
"name": "
|
|
919
|
-
"description": "
|
|
907
|
+
"name": "resizable",
|
|
908
|
+
"description": "When set to true, the column is user-resizable.",
|
|
920
909
|
"value": {
|
|
921
910
|
"type": [
|
|
922
|
-
"
|
|
911
|
+
"boolean",
|
|
923
912
|
"null",
|
|
924
913
|
"undefined"
|
|
925
914
|
]
|
|
926
915
|
}
|
|
927
916
|
},
|
|
928
917
|
{
|
|
929
|
-
"name": "
|
|
930
|
-
"description": "
|
|
918
|
+
"name": "rowHeader",
|
|
919
|
+
"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.",
|
|
931
920
|
"value": {
|
|
932
921
|
"type": [
|
|
933
|
-
"
|
|
922
|
+
"boolean"
|
|
923
|
+
]
|
|
924
|
+
}
|
|
925
|
+
},
|
|
926
|
+
{
|
|
927
|
+
"name": "textAlign",
|
|
928
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
929
|
+
"value": {
|
|
930
|
+
"type": [
|
|
931
|
+
"GridColumnTextAlign",
|
|
934
932
|
"null",
|
|
935
933
|
"undefined"
|
|
936
934
|
]
|
|
937
935
|
}
|
|
938
936
|
},
|
|
939
937
|
{
|
|
940
|
-
"name": "
|
|
941
|
-
"description": "
|
|
938
|
+
"name": "width",
|
|
939
|
+
"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.",
|
|
942
940
|
"value": {
|
|
943
941
|
"type": [
|
|
944
|
-
"
|
|
942
|
+
"string",
|
|
943
|
+
"null",
|
|
944
|
+
"undefined"
|
|
945
945
|
]
|
|
946
946
|
}
|
|
947
947
|
}
|
|
@@ -951,31 +951,31 @@
|
|
|
951
951
|
},
|
|
952
952
|
{
|
|
953
953
|
"name": "vaadin-grid-selection-column",
|
|
954
|
-
"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-
|
|
954
|
+
"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__",
|
|
955
955
|
"attributes": [
|
|
956
956
|
{
|
|
957
|
-
"name": "
|
|
958
|
-
"description": "When
|
|
957
|
+
"name": "auto-select",
|
|
958
|
+
"description": "When true, the active item gets automatically selected.",
|
|
959
959
|
"value": {
|
|
960
960
|
"type": [
|
|
961
|
-
"boolean"
|
|
962
|
-
"null",
|
|
963
|
-
"undefined"
|
|
961
|
+
"boolean"
|
|
964
962
|
]
|
|
965
963
|
}
|
|
966
964
|
},
|
|
967
965
|
{
|
|
968
|
-
"name": "
|
|
969
|
-
"description": "
|
|
966
|
+
"name": "auto-width",
|
|
967
|
+
"description": "Override `autoWidth` to enable auto-width",
|
|
970
968
|
"value": {
|
|
971
969
|
"type": [
|
|
972
|
-
"boolean"
|
|
970
|
+
"boolean",
|
|
971
|
+
"null",
|
|
972
|
+
"undefined"
|
|
973
973
|
]
|
|
974
974
|
}
|
|
975
975
|
},
|
|
976
976
|
{
|
|
977
|
-
"name": "
|
|
978
|
-
"description": "When true,
|
|
977
|
+
"name": "drag-select",
|
|
978
|
+
"description": "When true, rows can be selected by dragging over the selection column.",
|
|
979
979
|
"value": {
|
|
980
980
|
"type": [
|
|
981
981
|
"boolean"
|
|
@@ -983,50 +983,46 @@
|
|
|
983
983
|
}
|
|
984
984
|
},
|
|
985
985
|
{
|
|
986
|
-
"name": "
|
|
987
|
-
"description": "
|
|
986
|
+
"name": "flex-grow",
|
|
987
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
988
988
|
"value": {
|
|
989
989
|
"type": [
|
|
990
|
-
"
|
|
990
|
+
"number"
|
|
991
991
|
]
|
|
992
992
|
}
|
|
993
993
|
},
|
|
994
994
|
{
|
|
995
|
-
"name": "
|
|
996
|
-
"description": "
|
|
995
|
+
"name": "footer-part-name",
|
|
996
|
+
"description": "Custom part name for the footer cell.",
|
|
997
997
|
"value": {
|
|
998
998
|
"type": [
|
|
999
|
-
"
|
|
999
|
+
"string",
|
|
1000
1000
|
"null",
|
|
1001
1001
|
"undefined"
|
|
1002
1002
|
]
|
|
1003
1003
|
}
|
|
1004
1004
|
},
|
|
1005
1005
|
{
|
|
1006
|
-
"name": "
|
|
1007
|
-
"description": "
|
|
1006
|
+
"name": "frozen",
|
|
1007
|
+
"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.",
|
|
1008
1008
|
"value": {
|
|
1009
1009
|
"type": [
|
|
1010
|
-
"
|
|
1011
|
-
"null",
|
|
1012
|
-
"undefined"
|
|
1010
|
+
"boolean"
|
|
1013
1011
|
]
|
|
1014
1012
|
}
|
|
1015
1013
|
},
|
|
1016
1014
|
{
|
|
1017
|
-
"name": "
|
|
1018
|
-
"description": "
|
|
1015
|
+
"name": "frozen-to-end",
|
|
1016
|
+
"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.",
|
|
1019
1017
|
"value": {
|
|
1020
1018
|
"type": [
|
|
1021
|
-
"
|
|
1022
|
-
"null",
|
|
1023
|
-
"undefined"
|
|
1019
|
+
"boolean"
|
|
1024
1020
|
]
|
|
1025
1021
|
}
|
|
1026
1022
|
},
|
|
1027
1023
|
{
|
|
1028
|
-
"name": "header
|
|
1029
|
-
"description": "
|
|
1024
|
+
"name": "header",
|
|
1025
|
+
"description": "Text content to display in the header cell of the column.",
|
|
1030
1026
|
"value": {
|
|
1031
1027
|
"type": [
|
|
1032
1028
|
"string",
|
|
@@ -1036,8 +1032,8 @@
|
|
|
1036
1032
|
}
|
|
1037
1033
|
},
|
|
1038
1034
|
{
|
|
1039
|
-
"name": "
|
|
1040
|
-
"description": "Custom part name for the
|
|
1035
|
+
"name": "header-part-name",
|
|
1036
|
+
"description": "Custom part name for the header cell.",
|
|
1041
1037
|
"value": {
|
|
1042
1038
|
"type": [
|
|
1043
1039
|
"string",
|
|
@@ -1047,25 +1043,16 @@
|
|
|
1047
1043
|
}
|
|
1048
1044
|
},
|
|
1049
1045
|
{
|
|
1050
|
-
"name": "
|
|
1051
|
-
"description": "
|
|
1046
|
+
"name": "hidden",
|
|
1047
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
1052
1048
|
"value": {
|
|
1053
1049
|
"type": [
|
|
1054
|
-
"
|
|
1050
|
+
"boolean",
|
|
1055
1051
|
"null",
|
|
1056
1052
|
"undefined"
|
|
1057
1053
|
]
|
|
1058
1054
|
}
|
|
1059
1055
|
},
|
|
1060
|
-
{
|
|
1061
|
-
"name": "flex-grow",
|
|
1062
|
-
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
1063
|
-
"value": {
|
|
1064
|
-
"type": [
|
|
1065
|
-
"number"
|
|
1066
|
-
]
|
|
1067
|
-
}
|
|
1068
|
-
},
|
|
1069
1056
|
{
|
|
1070
1057
|
"name": "path",
|
|
1071
1058
|
"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.",
|
|
@@ -1078,8 +1065,8 @@
|
|
|
1078
1065
|
}
|
|
1079
1066
|
},
|
|
1080
1067
|
{
|
|
1081
|
-
"name": "
|
|
1082
|
-
"description": "
|
|
1068
|
+
"name": "resizable",
|
|
1069
|
+
"description": "When set to true, the column is user-resizable.",
|
|
1083
1070
|
"value": {
|
|
1084
1071
|
"type": [
|
|
1085
1072
|
"boolean",
|
|
@@ -1089,8 +1076,8 @@
|
|
|
1089
1076
|
}
|
|
1090
1077
|
},
|
|
1091
1078
|
{
|
|
1092
|
-
"name": "
|
|
1093
|
-
"description": "When true,
|
|
1079
|
+
"name": "row-header",
|
|
1080
|
+
"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.",
|
|
1094
1081
|
"value": {
|
|
1095
1082
|
"type": [
|
|
1096
1083
|
"boolean"
|
|
@@ -1098,8 +1085,8 @@
|
|
|
1098
1085
|
}
|
|
1099
1086
|
},
|
|
1100
1087
|
{
|
|
1101
|
-
"name": "
|
|
1102
|
-
"description": "When true, the
|
|
1088
|
+
"name": "select-all",
|
|
1089
|
+
"description": "When true, all the items are selected.",
|
|
1103
1090
|
"value": {
|
|
1104
1091
|
"type": [
|
|
1105
1092
|
"boolean"
|
|
@@ -1107,11 +1094,13 @@
|
|
|
1107
1094
|
}
|
|
1108
1095
|
},
|
|
1109
1096
|
{
|
|
1110
|
-
"name": "
|
|
1111
|
-
"description": "
|
|
1097
|
+
"name": "text-align",
|
|
1098
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
1112
1099
|
"value": {
|
|
1113
1100
|
"type": [
|
|
1114
|
-
"
|
|
1101
|
+
"GridColumnTextAlign",
|
|
1102
|
+
"null",
|
|
1103
|
+
"undefined"
|
|
1115
1104
|
]
|
|
1116
1105
|
}
|
|
1117
1106
|
},
|
|
@@ -1125,13 +1114,33 @@
|
|
|
1125
1114
|
"undefined"
|
|
1126
1115
|
]
|
|
1127
1116
|
}
|
|
1117
|
+
},
|
|
1118
|
+
{
|
|
1119
|
+
"name": "width",
|
|
1120
|
+
"description": "Width of the cells for this column.",
|
|
1121
|
+
"value": {
|
|
1122
|
+
"type": [
|
|
1123
|
+
"string",
|
|
1124
|
+
"null",
|
|
1125
|
+
"undefined"
|
|
1126
|
+
]
|
|
1127
|
+
}
|
|
1128
1128
|
}
|
|
1129
1129
|
],
|
|
1130
1130
|
"js": {
|
|
1131
1131
|
"properties": [
|
|
1132
1132
|
{
|
|
1133
|
-
"name": "
|
|
1134
|
-
"description": "When
|
|
1133
|
+
"name": "autoSelect",
|
|
1134
|
+
"description": "When true, the active item gets automatically selected.",
|
|
1135
|
+
"value": {
|
|
1136
|
+
"type": [
|
|
1137
|
+
"boolean"
|
|
1138
|
+
]
|
|
1139
|
+
}
|
|
1140
|
+
},
|
|
1141
|
+
{
|
|
1142
|
+
"name": "autoWidth",
|
|
1143
|
+
"description": "Override `autoWidth` to enable auto-width",
|
|
1135
1144
|
"value": {
|
|
1136
1145
|
"type": [
|
|
1137
1146
|
"boolean",
|
|
@@ -1141,8 +1150,8 @@
|
|
|
1141
1150
|
}
|
|
1142
1151
|
},
|
|
1143
1152
|
{
|
|
1144
|
-
"name": "
|
|
1145
|
-
"description": "When true,
|
|
1153
|
+
"name": "dragSelect",
|
|
1154
|
+
"description": "When true, rows can be selected by dragging over the selection column.",
|
|
1146
1155
|
"value": {
|
|
1147
1156
|
"type": [
|
|
1148
1157
|
"boolean"
|
|
@@ -1150,59 +1159,57 @@
|
|
|
1150
1159
|
}
|
|
1151
1160
|
},
|
|
1152
1161
|
{
|
|
1153
|
-
"name": "
|
|
1154
|
-
"description": "
|
|
1162
|
+
"name": "flexGrow",
|
|
1163
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
1155
1164
|
"value": {
|
|
1156
1165
|
"type": [
|
|
1157
|
-
"
|
|
1166
|
+
"number"
|
|
1158
1167
|
]
|
|
1159
1168
|
}
|
|
1160
1169
|
},
|
|
1161
1170
|
{
|
|
1162
|
-
"name": "
|
|
1163
|
-
"description": "
|
|
1171
|
+
"name": "footerPartName",
|
|
1172
|
+
"description": "Custom part name for the footer cell.",
|
|
1164
1173
|
"value": {
|
|
1165
1174
|
"type": [
|
|
1166
|
-
"
|
|
1175
|
+
"string",
|
|
1176
|
+
"null",
|
|
1177
|
+
"undefined"
|
|
1167
1178
|
]
|
|
1168
1179
|
}
|
|
1169
1180
|
},
|
|
1170
1181
|
{
|
|
1171
|
-
"name": "
|
|
1172
|
-
"description": "
|
|
1182
|
+
"name": "footerRenderer",
|
|
1183
|
+
"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.",
|
|
1173
1184
|
"value": {
|
|
1174
1185
|
"type": [
|
|
1175
|
-
"
|
|
1186
|
+
"GridHeaderFooterRenderer",
|
|
1176
1187
|
"null",
|
|
1177
1188
|
"undefined"
|
|
1178
1189
|
]
|
|
1179
1190
|
}
|
|
1180
1191
|
},
|
|
1181
1192
|
{
|
|
1182
|
-
"name": "
|
|
1183
|
-
"description": "
|
|
1193
|
+
"name": "frozen",
|
|
1194
|
+
"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.",
|
|
1184
1195
|
"value": {
|
|
1185
1196
|
"type": [
|
|
1186
|
-
"
|
|
1187
|
-
"null",
|
|
1188
|
-
"undefined"
|
|
1197
|
+
"boolean"
|
|
1189
1198
|
]
|
|
1190
1199
|
}
|
|
1191
1200
|
},
|
|
1192
1201
|
{
|
|
1193
|
-
"name": "
|
|
1194
|
-
"description": "
|
|
1202
|
+
"name": "frozenToEnd",
|
|
1203
|
+
"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.",
|
|
1195
1204
|
"value": {
|
|
1196
1205
|
"type": [
|
|
1197
|
-
"
|
|
1198
|
-
"null",
|
|
1199
|
-
"undefined"
|
|
1206
|
+
"boolean"
|
|
1200
1207
|
]
|
|
1201
1208
|
}
|
|
1202
1209
|
},
|
|
1203
1210
|
{
|
|
1204
|
-
"name": "
|
|
1205
|
-
"description": "
|
|
1211
|
+
"name": "header",
|
|
1212
|
+
"description": "Text content to display in the header cell of the column.",
|
|
1206
1213
|
"value": {
|
|
1207
1214
|
"type": [
|
|
1208
1215
|
"string",
|
|
@@ -1212,8 +1219,8 @@
|
|
|
1212
1219
|
}
|
|
1213
1220
|
},
|
|
1214
1221
|
{
|
|
1215
|
-
"name": "
|
|
1216
|
-
"description": "Custom part name for the
|
|
1222
|
+
"name": "headerPartName",
|
|
1223
|
+
"description": "Custom part name for the header cell.",
|
|
1217
1224
|
"value": {
|
|
1218
1225
|
"type": [
|
|
1219
1226
|
"string",
|
|
@@ -1234,19 +1241,19 @@
|
|
|
1234
1241
|
}
|
|
1235
1242
|
},
|
|
1236
1243
|
{
|
|
1237
|
-
"name": "
|
|
1238
|
-
"description": "
|
|
1244
|
+
"name": "hidden",
|
|
1245
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
1239
1246
|
"value": {
|
|
1240
1247
|
"type": [
|
|
1241
|
-
"
|
|
1248
|
+
"boolean",
|
|
1242
1249
|
"null",
|
|
1243
1250
|
"undefined"
|
|
1244
1251
|
]
|
|
1245
1252
|
}
|
|
1246
1253
|
},
|
|
1247
1254
|
{
|
|
1248
|
-
"name": "
|
|
1249
|
-
"description": "
|
|
1255
|
+
"name": "path",
|
|
1256
|
+
"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.",
|
|
1250
1257
|
"value": {
|
|
1251
1258
|
"type": [
|
|
1252
1259
|
"string",
|
|
@@ -1255,15 +1262,6 @@
|
|
|
1255
1262
|
]
|
|
1256
1263
|
}
|
|
1257
1264
|
},
|
|
1258
|
-
{
|
|
1259
|
-
"name": "flexGrow",
|
|
1260
|
-
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
1261
|
-
"value": {
|
|
1262
|
-
"type": [
|
|
1263
|
-
"number"
|
|
1264
|
-
]
|
|
1265
|
-
}
|
|
1266
|
-
},
|
|
1267
1265
|
{
|
|
1268
1266
|
"name": "renderer",
|
|
1269
1267
|
"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.",
|
|
@@ -1276,24 +1274,22 @@
|
|
|
1276
1274
|
}
|
|
1277
1275
|
},
|
|
1278
1276
|
{
|
|
1279
|
-
"name": "
|
|
1280
|
-
"description": "
|
|
1277
|
+
"name": "resizable",
|
|
1278
|
+
"description": "When set to true, the column is user-resizable.",
|
|
1281
1279
|
"value": {
|
|
1282
1280
|
"type": [
|
|
1283
|
-
"
|
|
1281
|
+
"boolean",
|
|
1284
1282
|
"null",
|
|
1285
1283
|
"undefined"
|
|
1286
1284
|
]
|
|
1287
1285
|
}
|
|
1288
1286
|
},
|
|
1289
1287
|
{
|
|
1290
|
-
"name": "
|
|
1291
|
-
"description": "
|
|
1288
|
+
"name": "rowHeader",
|
|
1289
|
+
"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.",
|
|
1292
1290
|
"value": {
|
|
1293
1291
|
"type": [
|
|
1294
|
-
"boolean"
|
|
1295
|
-
"null",
|
|
1296
|
-
"undefined"
|
|
1292
|
+
"boolean"
|
|
1297
1293
|
]
|
|
1298
1294
|
}
|
|
1299
1295
|
},
|
|
@@ -1307,20 +1303,24 @@
|
|
|
1307
1303
|
}
|
|
1308
1304
|
},
|
|
1309
1305
|
{
|
|
1310
|
-
"name": "
|
|
1311
|
-
"description": "
|
|
1306
|
+
"name": "textAlign",
|
|
1307
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
1312
1308
|
"value": {
|
|
1313
1309
|
"type": [
|
|
1314
|
-
"
|
|
1310
|
+
"GridColumnTextAlign",
|
|
1311
|
+
"null",
|
|
1312
|
+
"undefined"
|
|
1315
1313
|
]
|
|
1316
1314
|
}
|
|
1317
1315
|
},
|
|
1318
1316
|
{
|
|
1319
|
-
"name": "
|
|
1320
|
-
"description": "
|
|
1317
|
+
"name": "width",
|
|
1318
|
+
"description": "Width of the cells for this column.",
|
|
1321
1319
|
"value": {
|
|
1322
1320
|
"type": [
|
|
1323
|
-
"
|
|
1321
|
+
"string",
|
|
1322
|
+
"null",
|
|
1323
|
+
"undefined"
|
|
1324
1324
|
]
|
|
1325
1325
|
}
|
|
1326
1326
|
}
|
|
@@ -1338,22 +1338,22 @@
|
|
|
1338
1338
|
"description": "`<vaadin-grid-sorter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,\nvisual feedback, and handlers for sorting the grid data.\n\n#### Example:\n```html\n<vaadin-grid-column id=\"column\"></vaadin-grid-column>\n```\n```js\nconst column = document.querySelector('#column');\ncolumn.renderer = (root, column, model) => {\n let sorter = root.firstElementChild;\n if (!sorter) {\n sorter = document.createElement('vaadin-grid-sorter');\n root.appendChild(sorter);\n }\n sorter.path = 'name.first';\n};\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`content` | The slotted content wrapper\n`indicators` | The internal sorter indicators.\n`order` | The internal sorter order\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|---------------------------\n`direction` | Sort direction of a sorter",
|
|
1339
1339
|
"attributes": [
|
|
1340
1340
|
{
|
|
1341
|
-
"name": "
|
|
1342
|
-
"description": "
|
|
1341
|
+
"name": "direction",
|
|
1342
|
+
"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.",
|
|
1343
1343
|
"value": {
|
|
1344
1344
|
"type": [
|
|
1345
|
-
"
|
|
1346
|
-
"null",
|
|
1345
|
+
"GridSorterDirection",
|
|
1347
1346
|
"undefined"
|
|
1348
1347
|
]
|
|
1349
1348
|
}
|
|
1350
1349
|
},
|
|
1351
1350
|
{
|
|
1352
|
-
"name": "
|
|
1353
|
-
"description": "
|
|
1351
|
+
"name": "path",
|
|
1352
|
+
"description": "JS Path of the property in the item used for sorting the data.",
|
|
1354
1353
|
"value": {
|
|
1355
1354
|
"type": [
|
|
1356
|
-
"
|
|
1355
|
+
"string",
|
|
1356
|
+
"null",
|
|
1357
1357
|
"undefined"
|
|
1358
1358
|
]
|
|
1359
1359
|
}
|
|
@@ -1373,22 +1373,22 @@
|
|
|
1373
1373
|
"js": {
|
|
1374
1374
|
"properties": [
|
|
1375
1375
|
{
|
|
1376
|
-
"name": "
|
|
1377
|
-
"description": "
|
|
1376
|
+
"name": "direction",
|
|
1377
|
+
"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.",
|
|
1378
1378
|
"value": {
|
|
1379
1379
|
"type": [
|
|
1380
|
-
"
|
|
1381
|
-
"null",
|
|
1380
|
+
"GridSorterDirection",
|
|
1382
1381
|
"undefined"
|
|
1383
1382
|
]
|
|
1384
1383
|
}
|
|
1385
1384
|
},
|
|
1386
1385
|
{
|
|
1387
|
-
"name": "
|
|
1388
|
-
"description": "
|
|
1386
|
+
"name": "path",
|
|
1387
|
+
"description": "JS Path of the property in the item used for sorting the data.",
|
|
1389
1388
|
"value": {
|
|
1390
1389
|
"type": [
|
|
1391
|
-
"
|
|
1390
|
+
"string",
|
|
1391
|
+
"null",
|
|
1392
1392
|
"undefined"
|
|
1393
1393
|
]
|
|
1394
1394
|
}
|
|
@@ -1407,71 +1407,68 @@
|
|
|
1407
1407
|
"description": "`<vaadin-grid-sort-column>` is a helper element for the `<vaadin-grid>`\nthat provides default header renderer and functionality for sorting.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-sort-column path=\"name.first\" direction=\"asc\"></vaadin-grid-sort-column>\n\n <vaadin-grid-column>\n ...\n```",
|
|
1408
1408
|
"attributes": [
|
|
1409
1409
|
{
|
|
1410
|
-
"name": "
|
|
1411
|
-
"description": "
|
|
1410
|
+
"name": "auto-width",
|
|
1411
|
+
"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.",
|
|
1412
1412
|
"value": {
|
|
1413
1413
|
"type": [
|
|
1414
|
-
"boolean"
|
|
1415
|
-
"null",
|
|
1416
|
-
"undefined"
|
|
1414
|
+
"boolean"
|
|
1417
1415
|
]
|
|
1418
1416
|
}
|
|
1419
1417
|
},
|
|
1420
1418
|
{
|
|
1421
|
-
"name": "
|
|
1422
|
-
"description": "
|
|
1419
|
+
"name": "direction",
|
|
1420
|
+
"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.",
|
|
1423
1421
|
"value": {
|
|
1424
1422
|
"type": [
|
|
1425
|
-
"
|
|
1423
|
+
"GridSorterDirection",
|
|
1424
|
+
"undefined"
|
|
1426
1425
|
]
|
|
1427
1426
|
}
|
|
1428
1427
|
},
|
|
1429
1428
|
{
|
|
1430
|
-
"name": "
|
|
1431
|
-
"description": "
|
|
1429
|
+
"name": "flex-grow",
|
|
1430
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
1432
1431
|
"value": {
|
|
1433
1432
|
"type": [
|
|
1434
|
-
"
|
|
1433
|
+
"number"
|
|
1435
1434
|
]
|
|
1436
1435
|
}
|
|
1437
1436
|
},
|
|
1438
1437
|
{
|
|
1439
|
-
"name": "
|
|
1440
|
-
"description": "
|
|
1438
|
+
"name": "footer-part-name",
|
|
1439
|
+
"description": "Custom part name for the footer cell.",
|
|
1441
1440
|
"value": {
|
|
1442
1441
|
"type": [
|
|
1443
|
-
"
|
|
1442
|
+
"string",
|
|
1443
|
+
"null",
|
|
1444
|
+
"undefined"
|
|
1444
1445
|
]
|
|
1445
1446
|
}
|
|
1446
1447
|
},
|
|
1447
1448
|
{
|
|
1448
|
-
"name": "
|
|
1449
|
-
"description": "When
|
|
1449
|
+
"name": "frozen",
|
|
1450
|
+
"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.",
|
|
1450
1451
|
"value": {
|
|
1451
1452
|
"type": [
|
|
1452
|
-
"boolean"
|
|
1453
|
-
"null",
|
|
1454
|
-
"undefined"
|
|
1453
|
+
"boolean"
|
|
1455
1454
|
]
|
|
1456
1455
|
}
|
|
1457
1456
|
},
|
|
1458
1457
|
{
|
|
1459
|
-
"name": "
|
|
1460
|
-
"description": "
|
|
1458
|
+
"name": "frozen-to-end",
|
|
1459
|
+
"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.",
|
|
1461
1460
|
"value": {
|
|
1462
1461
|
"type": [
|
|
1463
|
-
"
|
|
1464
|
-
"null",
|
|
1465
|
-
"undefined"
|
|
1462
|
+
"boolean"
|
|
1466
1463
|
]
|
|
1467
1464
|
}
|
|
1468
1465
|
},
|
|
1469
1466
|
{
|
|
1470
|
-
"name": "
|
|
1471
|
-
"description": "
|
|
1467
|
+
"name": "header",
|
|
1468
|
+
"description": "Text content to display in the header cell of the column.",
|
|
1472
1469
|
"value": {
|
|
1473
1470
|
"type": [
|
|
1474
|
-
"
|
|
1471
|
+
"string",
|
|
1475
1472
|
"null",
|
|
1476
1473
|
"undefined"
|
|
1477
1474
|
]
|
|
@@ -1489,19 +1486,19 @@
|
|
|
1489
1486
|
}
|
|
1490
1487
|
},
|
|
1491
1488
|
{
|
|
1492
|
-
"name": "
|
|
1493
|
-
"description": "
|
|
1489
|
+
"name": "hidden",
|
|
1490
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
1494
1491
|
"value": {
|
|
1495
1492
|
"type": [
|
|
1496
|
-
"
|
|
1493
|
+
"boolean",
|
|
1497
1494
|
"null",
|
|
1498
1495
|
"undefined"
|
|
1499
1496
|
]
|
|
1500
1497
|
}
|
|
1501
1498
|
},
|
|
1502
1499
|
{
|
|
1503
|
-
"name": "
|
|
1504
|
-
"description": "
|
|
1500
|
+
"name": "path",
|
|
1501
|
+
"description": "JS Path of the property in the item used for sorting the data.",
|
|
1505
1502
|
"value": {
|
|
1506
1503
|
"type": [
|
|
1507
1504
|
"string",
|
|
@@ -1511,47 +1508,50 @@
|
|
|
1511
1508
|
}
|
|
1512
1509
|
},
|
|
1513
1510
|
{
|
|
1514
|
-
"name": "
|
|
1515
|
-
"description": "
|
|
1511
|
+
"name": "resizable",
|
|
1512
|
+
"description": "When set to true, the column is user-resizable.",
|
|
1516
1513
|
"value": {
|
|
1517
1514
|
"type": [
|
|
1518
|
-
"
|
|
1515
|
+
"boolean",
|
|
1516
|
+
"null",
|
|
1517
|
+
"undefined"
|
|
1519
1518
|
]
|
|
1520
1519
|
}
|
|
1521
1520
|
},
|
|
1522
1521
|
{
|
|
1523
|
-
"name": "
|
|
1524
|
-
"description": "
|
|
1522
|
+
"name": "row-header",
|
|
1523
|
+
"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.",
|
|
1525
1524
|
"value": {
|
|
1526
1525
|
"type": [
|
|
1527
|
-
"
|
|
1528
|
-
"null",
|
|
1529
|
-
"undefined"
|
|
1526
|
+
"boolean"
|
|
1530
1527
|
]
|
|
1531
1528
|
}
|
|
1532
1529
|
},
|
|
1533
1530
|
{
|
|
1534
|
-
"name": "
|
|
1535
|
-
"description": "
|
|
1531
|
+
"name": "text-align",
|
|
1532
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
1536
1533
|
"value": {
|
|
1537
1534
|
"type": [
|
|
1538
|
-
"
|
|
1535
|
+
"GridColumnTextAlign",
|
|
1536
|
+
"null",
|
|
1537
|
+
"undefined"
|
|
1539
1538
|
]
|
|
1540
1539
|
}
|
|
1541
1540
|
},
|
|
1542
1541
|
{
|
|
1543
|
-
"name": "
|
|
1544
|
-
"description": "
|
|
1542
|
+
"name": "theme",
|
|
1543
|
+
"description": "The theme variants to apply to the component.",
|
|
1545
1544
|
"value": {
|
|
1546
1545
|
"type": [
|
|
1547
|
-
"
|
|
1546
|
+
"string",
|
|
1547
|
+
"null",
|
|
1548
1548
|
"undefined"
|
|
1549
1549
|
]
|
|
1550
1550
|
}
|
|
1551
1551
|
},
|
|
1552
1552
|
{
|
|
1553
|
-
"name": "
|
|
1554
|
-
"description": "
|
|
1553
|
+
"name": "width",
|
|
1554
|
+
"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.",
|
|
1555
1555
|
"value": {
|
|
1556
1556
|
"type": [
|
|
1557
1557
|
"string",
|
|
@@ -1564,79 +1564,76 @@
|
|
|
1564
1564
|
"js": {
|
|
1565
1565
|
"properties": [
|
|
1566
1566
|
{
|
|
1567
|
-
"name": "
|
|
1568
|
-
"description": "
|
|
1567
|
+
"name": "autoWidth",
|
|
1568
|
+
"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.",
|
|
1569
1569
|
"value": {
|
|
1570
1570
|
"type": [
|
|
1571
|
-
"boolean"
|
|
1572
|
-
"null",
|
|
1573
|
-
"undefined"
|
|
1571
|
+
"boolean"
|
|
1574
1572
|
]
|
|
1575
1573
|
}
|
|
1576
1574
|
},
|
|
1577
1575
|
{
|
|
1578
|
-
"name": "
|
|
1579
|
-
"description": "
|
|
1576
|
+
"name": "direction",
|
|
1577
|
+
"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.",
|
|
1580
1578
|
"value": {
|
|
1581
1579
|
"type": [
|
|
1582
|
-
"
|
|
1580
|
+
"GridSorterDirection",
|
|
1581
|
+
"undefined"
|
|
1583
1582
|
]
|
|
1584
1583
|
}
|
|
1585
1584
|
},
|
|
1586
1585
|
{
|
|
1587
|
-
"name": "
|
|
1588
|
-
"description": "
|
|
1586
|
+
"name": "flexGrow",
|
|
1587
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
1589
1588
|
"value": {
|
|
1590
1589
|
"type": [
|
|
1591
|
-
"
|
|
1590
|
+
"number"
|
|
1592
1591
|
]
|
|
1593
1592
|
}
|
|
1594
1593
|
},
|
|
1595
1594
|
{
|
|
1596
|
-
"name": "
|
|
1597
|
-
"description": "
|
|
1595
|
+
"name": "footerPartName",
|
|
1596
|
+
"description": "Custom part name for the footer cell.",
|
|
1598
1597
|
"value": {
|
|
1599
1598
|
"type": [
|
|
1600
|
-
"
|
|
1599
|
+
"string",
|
|
1600
|
+
"null",
|
|
1601
|
+
"undefined"
|
|
1601
1602
|
]
|
|
1602
1603
|
}
|
|
1603
1604
|
},
|
|
1604
1605
|
{
|
|
1605
|
-
"name": "
|
|
1606
|
-
"description": "
|
|
1606
|
+
"name": "footerRenderer",
|
|
1607
|
+
"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.",
|
|
1607
1608
|
"value": {
|
|
1608
1609
|
"type": [
|
|
1609
|
-
"
|
|
1610
|
+
"GridHeaderFooterRenderer",
|
|
1610
1611
|
"null",
|
|
1611
1612
|
"undefined"
|
|
1612
1613
|
]
|
|
1613
1614
|
}
|
|
1614
1615
|
},
|
|
1615
1616
|
{
|
|
1616
|
-
"name": "
|
|
1617
|
-
"description": "
|
|
1617
|
+
"name": "frozen",
|
|
1618
|
+
"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.",
|
|
1618
1619
|
"value": {
|
|
1619
1620
|
"type": [
|
|
1620
|
-
"
|
|
1621
|
-
"null",
|
|
1622
|
-
"undefined"
|
|
1621
|
+
"boolean"
|
|
1623
1622
|
]
|
|
1624
1623
|
}
|
|
1625
1624
|
},
|
|
1626
1625
|
{
|
|
1627
|
-
"name": "
|
|
1628
|
-
"description": "
|
|
1626
|
+
"name": "frozenToEnd",
|
|
1627
|
+
"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.",
|
|
1629
1628
|
"value": {
|
|
1630
1629
|
"type": [
|
|
1631
|
-
"
|
|
1632
|
-
"null",
|
|
1633
|
-
"undefined"
|
|
1630
|
+
"boolean"
|
|
1634
1631
|
]
|
|
1635
1632
|
}
|
|
1636
1633
|
},
|
|
1637
1634
|
{
|
|
1638
|
-
"name": "
|
|
1639
|
-
"description": "
|
|
1635
|
+
"name": "header",
|
|
1636
|
+
"description": "Text content to display in the header cell of the column.",
|
|
1640
1637
|
"value": {
|
|
1641
1638
|
"type": [
|
|
1642
1639
|
"string",
|
|
@@ -1646,8 +1643,8 @@
|
|
|
1646
1643
|
}
|
|
1647
1644
|
},
|
|
1648
1645
|
{
|
|
1649
|
-
"name": "
|
|
1650
|
-
"description": "Custom part name for the
|
|
1646
|
+
"name": "headerPartName",
|
|
1647
|
+
"description": "Custom part name for the header cell.",
|
|
1651
1648
|
"value": {
|
|
1652
1649
|
"type": [
|
|
1653
1650
|
"string",
|
|
@@ -1668,19 +1665,19 @@
|
|
|
1668
1665
|
}
|
|
1669
1666
|
},
|
|
1670
1667
|
{
|
|
1671
|
-
"name": "
|
|
1672
|
-
"description": "
|
|
1668
|
+
"name": "hidden",
|
|
1669
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
1673
1670
|
"value": {
|
|
1674
1671
|
"type": [
|
|
1675
|
-
"
|
|
1672
|
+
"boolean",
|
|
1676
1673
|
"null",
|
|
1677
1674
|
"undefined"
|
|
1678
1675
|
]
|
|
1679
1676
|
}
|
|
1680
1677
|
},
|
|
1681
1678
|
{
|
|
1682
|
-
"name": "
|
|
1683
|
-
"description": "
|
|
1679
|
+
"name": "path",
|
|
1680
|
+
"description": "JS Path of the property in the item used for sorting the data.",
|
|
1684
1681
|
"value": {
|
|
1685
1682
|
"type": [
|
|
1686
1683
|
"string",
|
|
@@ -1689,15 +1686,6 @@
|
|
|
1689
1686
|
]
|
|
1690
1687
|
}
|
|
1691
1688
|
},
|
|
1692
|
-
{
|
|
1693
|
-
"name": "flexGrow",
|
|
1694
|
-
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
1695
|
-
"value": {
|
|
1696
|
-
"type": [
|
|
1697
|
-
"number"
|
|
1698
|
-
]
|
|
1699
|
-
}
|
|
1700
|
-
},
|
|
1701
1689
|
{
|
|
1702
1690
|
"name": "renderer",
|
|
1703
1691
|
"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.",
|
|
@@ -1710,19 +1698,19 @@
|
|
|
1710
1698
|
}
|
|
1711
1699
|
},
|
|
1712
1700
|
{
|
|
1713
|
-
"name": "
|
|
1714
|
-
"description": "
|
|
1701
|
+
"name": "resizable",
|
|
1702
|
+
"description": "When set to true, the column is user-resizable.",
|
|
1715
1703
|
"value": {
|
|
1716
1704
|
"type": [
|
|
1717
|
-
"
|
|
1705
|
+
"boolean",
|
|
1718
1706
|
"null",
|
|
1719
1707
|
"undefined"
|
|
1720
1708
|
]
|
|
1721
1709
|
}
|
|
1722
1710
|
},
|
|
1723
1711
|
{
|
|
1724
|
-
"name": "
|
|
1725
|
-
"description": "
|
|
1712
|
+
"name": "rowHeader",
|
|
1713
|
+
"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.",
|
|
1726
1714
|
"value": {
|
|
1727
1715
|
"type": [
|
|
1728
1716
|
"boolean"
|
|
@@ -1730,11 +1718,23 @@
|
|
|
1730
1718
|
}
|
|
1731
1719
|
},
|
|
1732
1720
|
{
|
|
1733
|
-
"name": "
|
|
1734
|
-
"description": "
|
|
1721
|
+
"name": "textAlign",
|
|
1722
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
1735
1723
|
"value": {
|
|
1736
1724
|
"type": [
|
|
1737
|
-
"
|
|
1725
|
+
"GridColumnTextAlign",
|
|
1726
|
+
"null",
|
|
1727
|
+
"undefined"
|
|
1728
|
+
]
|
|
1729
|
+
}
|
|
1730
|
+
},
|
|
1731
|
+
{
|
|
1732
|
+
"name": "width",
|
|
1733
|
+
"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.",
|
|
1734
|
+
"value": {
|
|
1735
|
+
"type": [
|
|
1736
|
+
"string",
|
|
1737
|
+
"null",
|
|
1738
1738
|
"undefined"
|
|
1739
1739
|
]
|
|
1740
1740
|
}
|
|
@@ -1753,11 +1753,11 @@
|
|
|
1753
1753
|
"description": "`<vaadin-grid-tree-toggle>` is a helper element for the `<vaadin-grid>`\nthat provides toggle and level display functionality for the item tree.\n\n#### Example:\n```html\n<vaadin-grid-column id=\"column\"></vaadin-grid-column>\n```\n```js\nconst column = document.querySelector('#column');\ncolumn.renderer = (root, column, model) => {\n let treeToggle = root.firstElementChild;\n if (!treeToggle) {\n treeToggle = document.createElement('vaadin-grid-tree-toggle');\n treeToggle.addEventListener('expanded-changed', () => { ... });\n root.appendChild(treeToggle);\n }\n treeToggle.leaf = !model.item.hasChildren;\n treeToggle.level = level;\n treeToggle.expanded = expanded;\n treeToggle.textContent = model.item.name;\n};\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\n`toggle` | The tree toggle icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------|-------------------------------------\n`expanded` | When present, the toggle is expanded\n`leaf` | When present, the toggle is not expandable, i. e., the current item is a leaf\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-grid-tree-toggle-level-offset` | Visual offset step for each tree sublevel | `1em`",
|
|
1754
1754
|
"attributes": [
|
|
1755
1755
|
{
|
|
1756
|
-
"name": "
|
|
1757
|
-
"description": "
|
|
1756
|
+
"name": "expanded",
|
|
1757
|
+
"description": "Sublevel toggle state.",
|
|
1758
1758
|
"value": {
|
|
1759
1759
|
"type": [
|
|
1760
|
-
"
|
|
1760
|
+
"boolean"
|
|
1761
1761
|
]
|
|
1762
1762
|
}
|
|
1763
1763
|
},
|
|
@@ -1771,11 +1771,11 @@
|
|
|
1771
1771
|
}
|
|
1772
1772
|
},
|
|
1773
1773
|
{
|
|
1774
|
-
"name": "
|
|
1775
|
-
"description": "
|
|
1774
|
+
"name": "level",
|
|
1775
|
+
"description": "Current level of the tree represented with a horizontal offset\nof the toggle button.",
|
|
1776
1776
|
"value": {
|
|
1777
1777
|
"type": [
|
|
1778
|
-
"
|
|
1778
|
+
"number"
|
|
1779
1779
|
]
|
|
1780
1780
|
}
|
|
1781
1781
|
},
|
|
@@ -1794,11 +1794,11 @@
|
|
|
1794
1794
|
"js": {
|
|
1795
1795
|
"properties": [
|
|
1796
1796
|
{
|
|
1797
|
-
"name": "
|
|
1798
|
-
"description": "
|
|
1797
|
+
"name": "expanded",
|
|
1798
|
+
"description": "Sublevel toggle state.",
|
|
1799
1799
|
"value": {
|
|
1800
1800
|
"type": [
|
|
1801
|
-
"
|
|
1801
|
+
"boolean"
|
|
1802
1802
|
]
|
|
1803
1803
|
}
|
|
1804
1804
|
},
|
|
@@ -1812,11 +1812,11 @@
|
|
|
1812
1812
|
}
|
|
1813
1813
|
},
|
|
1814
1814
|
{
|
|
1815
|
-
"name": "
|
|
1816
|
-
"description": "
|
|
1815
|
+
"name": "level",
|
|
1816
|
+
"description": "Current level of the tree represented with a horizontal offset\nof the toggle button.",
|
|
1817
1817
|
"value": {
|
|
1818
1818
|
"type": [
|
|
1819
|
-
"
|
|
1819
|
+
"number"
|
|
1820
1820
|
]
|
|
1821
1821
|
}
|
|
1822
1822
|
}
|
|
@@ -1834,37 +1834,37 @@
|
|
|
1834
1834
|
"description": "`<vaadin-grid-tree-column>` is a helper element for the `<vaadin-grid>`\nthat provides default renderer and functionality for toggling tree/hierarchical items.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-tree-column path=\"name.first\"></vaadin-grid-tree-column>\n\n <vaadin-grid-column>\n ...\n```",
|
|
1835
1835
|
"attributes": [
|
|
1836
1836
|
{
|
|
1837
|
-
"name": "
|
|
1838
|
-
"description": "
|
|
1837
|
+
"name": "auto-width",
|
|
1838
|
+
"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.",
|
|
1839
1839
|
"value": {
|
|
1840
1840
|
"type": [
|
|
1841
|
-
"boolean"
|
|
1842
|
-
"null",
|
|
1843
|
-
"undefined"
|
|
1841
|
+
"boolean"
|
|
1844
1842
|
]
|
|
1845
1843
|
}
|
|
1846
1844
|
},
|
|
1847
1845
|
{
|
|
1848
|
-
"name": "
|
|
1849
|
-
"description": "
|
|
1846
|
+
"name": "flex-grow",
|
|
1847
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
1850
1848
|
"value": {
|
|
1851
1849
|
"type": [
|
|
1852
|
-
"
|
|
1850
|
+
"number"
|
|
1853
1851
|
]
|
|
1854
1852
|
}
|
|
1855
1853
|
},
|
|
1856
1854
|
{
|
|
1857
|
-
"name": "
|
|
1858
|
-
"description": "
|
|
1855
|
+
"name": "footer-part-name",
|
|
1856
|
+
"description": "Custom part name for the footer cell.",
|
|
1859
1857
|
"value": {
|
|
1860
1858
|
"type": [
|
|
1861
|
-
"
|
|
1859
|
+
"string",
|
|
1860
|
+
"null",
|
|
1861
|
+
"undefined"
|
|
1862
1862
|
]
|
|
1863
1863
|
}
|
|
1864
1864
|
},
|
|
1865
1865
|
{
|
|
1866
|
-
"name": "
|
|
1867
|
-
"description": "When true, the
|
|
1866
|
+
"name": "frozen",
|
|
1867
|
+
"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.",
|
|
1868
1868
|
"value": {
|
|
1869
1869
|
"type": [
|
|
1870
1870
|
"boolean"
|
|
@@ -1872,13 +1872,11 @@
|
|
|
1872
1872
|
}
|
|
1873
1873
|
},
|
|
1874
1874
|
{
|
|
1875
|
-
"name": "
|
|
1876
|
-
"description": "When
|
|
1875
|
+
"name": "frozen-to-end",
|
|
1876
|
+
"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.",
|
|
1877
1877
|
"value": {
|
|
1878
1878
|
"type": [
|
|
1879
|
-
"boolean"
|
|
1880
|
-
"null",
|
|
1881
|
-
"undefined"
|
|
1879
|
+
"boolean"
|
|
1882
1880
|
]
|
|
1883
1881
|
}
|
|
1884
1882
|
},
|
|
@@ -1894,30 +1892,30 @@
|
|
|
1894
1892
|
}
|
|
1895
1893
|
},
|
|
1896
1894
|
{
|
|
1897
|
-
"name": "
|
|
1898
|
-
"description": "
|
|
1895
|
+
"name": "header-part-name",
|
|
1896
|
+
"description": "Custom part name for the header cell.",
|
|
1899
1897
|
"value": {
|
|
1900
1898
|
"type": [
|
|
1901
|
-
"
|
|
1899
|
+
"string",
|
|
1902
1900
|
"null",
|
|
1903
1901
|
"undefined"
|
|
1904
1902
|
]
|
|
1905
1903
|
}
|
|
1906
1904
|
},
|
|
1907
1905
|
{
|
|
1908
|
-
"name": "
|
|
1909
|
-
"description": "
|
|
1906
|
+
"name": "hidden",
|
|
1907
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
1910
1908
|
"value": {
|
|
1911
1909
|
"type": [
|
|
1912
|
-
"
|
|
1910
|
+
"boolean",
|
|
1913
1911
|
"null",
|
|
1914
1912
|
"undefined"
|
|
1915
1913
|
]
|
|
1916
1914
|
}
|
|
1917
1915
|
},
|
|
1918
1916
|
{
|
|
1919
|
-
"name": "
|
|
1920
|
-
"description": "
|
|
1917
|
+
"name": "path",
|
|
1918
|
+
"description": "JS Path of the property in the item used as text content for the tree toggle.",
|
|
1921
1919
|
"value": {
|
|
1922
1920
|
"type": [
|
|
1923
1921
|
"string",
|
|
@@ -1927,48 +1925,50 @@
|
|
|
1927
1925
|
}
|
|
1928
1926
|
},
|
|
1929
1927
|
{
|
|
1930
|
-
"name": "
|
|
1931
|
-
"description": "
|
|
1928
|
+
"name": "resizable",
|
|
1929
|
+
"description": "When set to true, the column is user-resizable.",
|
|
1932
1930
|
"value": {
|
|
1933
1931
|
"type": [
|
|
1934
|
-
"
|
|
1932
|
+
"boolean",
|
|
1935
1933
|
"null",
|
|
1936
1934
|
"undefined"
|
|
1937
1935
|
]
|
|
1938
1936
|
}
|
|
1939
1937
|
},
|
|
1940
1938
|
{
|
|
1941
|
-
"name": "
|
|
1942
|
-
"description": "
|
|
1939
|
+
"name": "row-header",
|
|
1940
|
+
"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.",
|
|
1943
1941
|
"value": {
|
|
1944
1942
|
"type": [
|
|
1945
|
-
"
|
|
1943
|
+
"boolean"
|
|
1946
1944
|
]
|
|
1947
1945
|
}
|
|
1948
1946
|
},
|
|
1949
1947
|
{
|
|
1950
|
-
"name": "
|
|
1951
|
-
"description": "
|
|
1948
|
+
"name": "text-align",
|
|
1949
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
1952
1950
|
"value": {
|
|
1953
1951
|
"type": [
|
|
1954
|
-
"
|
|
1952
|
+
"GridColumnTextAlign",
|
|
1955
1953
|
"null",
|
|
1956
1954
|
"undefined"
|
|
1957
1955
|
]
|
|
1958
1956
|
}
|
|
1959
1957
|
},
|
|
1960
1958
|
{
|
|
1961
|
-
"name": "
|
|
1962
|
-
"description": "
|
|
1959
|
+
"name": "theme",
|
|
1960
|
+
"description": "The theme variants to apply to the component.",
|
|
1963
1961
|
"value": {
|
|
1964
1962
|
"type": [
|
|
1965
|
-
"
|
|
1963
|
+
"string",
|
|
1964
|
+
"null",
|
|
1965
|
+
"undefined"
|
|
1966
1966
|
]
|
|
1967
1967
|
}
|
|
1968
1968
|
},
|
|
1969
1969
|
{
|
|
1970
|
-
"name": "
|
|
1971
|
-
"description": "
|
|
1970
|
+
"name": "width",
|
|
1971
|
+
"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.",
|
|
1972
1972
|
"value": {
|
|
1973
1973
|
"type": [
|
|
1974
1974
|
"string",
|
|
@@ -1981,19 +1981,8 @@
|
|
|
1981
1981
|
"js": {
|
|
1982
1982
|
"properties": [
|
|
1983
1983
|
{
|
|
1984
|
-
"name": "
|
|
1985
|
-
"description": "
|
|
1986
|
-
"value": {
|
|
1987
|
-
"type": [
|
|
1988
|
-
"boolean",
|
|
1989
|
-
"null",
|
|
1990
|
-
"undefined"
|
|
1991
|
-
]
|
|
1992
|
-
}
|
|
1993
|
-
},
|
|
1994
|
-
{
|
|
1995
|
-
"name": "frozen",
|
|
1996
|
-
"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.",
|
|
1984
|
+
"name": "autoWidth",
|
|
1985
|
+
"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.",
|
|
1997
1986
|
"value": {
|
|
1998
1987
|
"type": [
|
|
1999
1988
|
"boolean"
|
|
@@ -2001,59 +1990,57 @@
|
|
|
2001
1990
|
}
|
|
2002
1991
|
},
|
|
2003
1992
|
{
|
|
2004
|
-
"name": "
|
|
2005
|
-
"description": "
|
|
1993
|
+
"name": "flexGrow",
|
|
1994
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
2006
1995
|
"value": {
|
|
2007
1996
|
"type": [
|
|
2008
|
-
"
|
|
1997
|
+
"number"
|
|
2009
1998
|
]
|
|
2010
1999
|
}
|
|
2011
2000
|
},
|
|
2012
2001
|
{
|
|
2013
|
-
"name": "
|
|
2014
|
-
"description": "
|
|
2002
|
+
"name": "footerPartName",
|
|
2003
|
+
"description": "Custom part name for the footer cell.",
|
|
2015
2004
|
"value": {
|
|
2016
2005
|
"type": [
|
|
2017
|
-
"
|
|
2006
|
+
"string",
|
|
2007
|
+
"null",
|
|
2008
|
+
"undefined"
|
|
2018
2009
|
]
|
|
2019
2010
|
}
|
|
2020
2011
|
},
|
|
2021
2012
|
{
|
|
2022
|
-
"name": "
|
|
2023
|
-
"description": "
|
|
2013
|
+
"name": "footerRenderer",
|
|
2014
|
+
"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.",
|
|
2024
2015
|
"value": {
|
|
2025
2016
|
"type": [
|
|
2026
|
-
"
|
|
2017
|
+
"GridHeaderFooterRenderer",
|
|
2027
2018
|
"null",
|
|
2028
2019
|
"undefined"
|
|
2029
2020
|
]
|
|
2030
2021
|
}
|
|
2031
2022
|
},
|
|
2032
2023
|
{
|
|
2033
|
-
"name": "
|
|
2034
|
-
"description": "
|
|
2024
|
+
"name": "frozen",
|
|
2025
|
+
"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.",
|
|
2035
2026
|
"value": {
|
|
2036
2027
|
"type": [
|
|
2037
|
-
"
|
|
2038
|
-
"null",
|
|
2039
|
-
"undefined"
|
|
2028
|
+
"boolean"
|
|
2040
2029
|
]
|
|
2041
2030
|
}
|
|
2042
2031
|
},
|
|
2043
2032
|
{
|
|
2044
|
-
"name": "
|
|
2045
|
-
"description": "
|
|
2033
|
+
"name": "frozenToEnd",
|
|
2034
|
+
"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.",
|
|
2046
2035
|
"value": {
|
|
2047
2036
|
"type": [
|
|
2048
|
-
"
|
|
2049
|
-
"null",
|
|
2050
|
-
"undefined"
|
|
2037
|
+
"boolean"
|
|
2051
2038
|
]
|
|
2052
2039
|
}
|
|
2053
2040
|
},
|
|
2054
2041
|
{
|
|
2055
|
-
"name": "
|
|
2056
|
-
"description": "
|
|
2042
|
+
"name": "header",
|
|
2043
|
+
"description": "Text content to display in the header cell of the column.",
|
|
2057
2044
|
"value": {
|
|
2058
2045
|
"type": [
|
|
2059
2046
|
"string",
|
|
@@ -2063,8 +2050,8 @@
|
|
|
2063
2050
|
}
|
|
2064
2051
|
},
|
|
2065
2052
|
{
|
|
2066
|
-
"name": "
|
|
2067
|
-
"description": "Custom part name for the
|
|
2053
|
+
"name": "headerPartName",
|
|
2054
|
+
"description": "Custom part name for the header cell.",
|
|
2068
2055
|
"value": {
|
|
2069
2056
|
"type": [
|
|
2070
2057
|
"string",
|
|
@@ -2085,19 +2072,19 @@
|
|
|
2085
2072
|
}
|
|
2086
2073
|
},
|
|
2087
2074
|
{
|
|
2088
|
-
"name": "
|
|
2089
|
-
"description": "
|
|
2075
|
+
"name": "hidden",
|
|
2076
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
2090
2077
|
"value": {
|
|
2091
2078
|
"type": [
|
|
2092
|
-
"
|
|
2079
|
+
"boolean",
|
|
2093
2080
|
"null",
|
|
2094
2081
|
"undefined"
|
|
2095
2082
|
]
|
|
2096
2083
|
}
|
|
2097
2084
|
},
|
|
2098
2085
|
{
|
|
2099
|
-
"name": "
|
|
2100
|
-
"description": "
|
|
2086
|
+
"name": "path",
|
|
2087
|
+
"description": "JS Path of the property in the item used as text content for the tree toggle.",
|
|
2101
2088
|
"value": {
|
|
2102
2089
|
"type": [
|
|
2103
2090
|
"string",
|
|
@@ -2107,42 +2094,55 @@
|
|
|
2107
2094
|
}
|
|
2108
2095
|
},
|
|
2109
2096
|
{
|
|
2110
|
-
"name": "
|
|
2111
|
-
"description": "
|
|
2097
|
+
"name": "renderer",
|
|
2098
|
+
"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.",
|
|
2112
2099
|
"value": {
|
|
2113
2100
|
"type": [
|
|
2114
|
-
"
|
|
2101
|
+
"GridBodyRenderer",
|
|
2102
|
+
"null",
|
|
2103
|
+
"undefined"
|
|
2115
2104
|
]
|
|
2116
2105
|
}
|
|
2117
2106
|
},
|
|
2118
2107
|
{
|
|
2119
|
-
"name": "
|
|
2120
|
-
"description": "
|
|
2108
|
+
"name": "resizable",
|
|
2109
|
+
"description": "When set to true, the column is user-resizable.",
|
|
2121
2110
|
"value": {
|
|
2122
2111
|
"type": [
|
|
2123
|
-
"
|
|
2112
|
+
"boolean",
|
|
2124
2113
|
"null",
|
|
2125
2114
|
"undefined"
|
|
2126
2115
|
]
|
|
2127
2116
|
}
|
|
2128
2117
|
},
|
|
2129
2118
|
{
|
|
2130
|
-
"name": "
|
|
2131
|
-
"description": "
|
|
2119
|
+
"name": "rowHeader",
|
|
2120
|
+
"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.",
|
|
2132
2121
|
"value": {
|
|
2133
2122
|
"type": [
|
|
2134
|
-
"
|
|
2123
|
+
"boolean"
|
|
2124
|
+
]
|
|
2125
|
+
}
|
|
2126
|
+
},
|
|
2127
|
+
{
|
|
2128
|
+
"name": "textAlign",
|
|
2129
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
2130
|
+
"value": {
|
|
2131
|
+
"type": [
|
|
2132
|
+
"GridColumnTextAlign",
|
|
2135
2133
|
"null",
|
|
2136
2134
|
"undefined"
|
|
2137
2135
|
]
|
|
2138
2136
|
}
|
|
2139
2137
|
},
|
|
2140
2138
|
{
|
|
2141
|
-
"name": "
|
|
2142
|
-
"description": "
|
|
2139
|
+
"name": "width",
|
|
2140
|
+
"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.",
|
|
2143
2141
|
"value": {
|
|
2144
2142
|
"type": [
|
|
2145
|
-
"
|
|
2143
|
+
"string",
|
|
2144
|
+
"null",
|
|
2145
|
+
"undefined"
|
|
2146
2146
|
]
|
|
2147
2147
|
}
|
|
2148
2148
|
}
|
|
@@ -2152,7 +2152,7 @@
|
|
|
2152
2152
|
},
|
|
2153
2153
|
{
|
|
2154
2154
|
"name": "vaadin-grid",
|
|
2155
|
-
"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.",
|
|
2155
|
+
"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.",
|
|
2156
2156
|
"attributes": [
|
|
2157
2157
|
{
|
|
2158
2158
|
"name": "accessible-name",
|
|
@@ -2166,71 +2166,71 @@
|
|
|
2166
2166
|
}
|
|
2167
2167
|
},
|
|
2168
2168
|
{
|
|
2169
|
-
"name": "
|
|
2170
|
-
"description": "
|
|
2169
|
+
"name": "all-rows-visible",
|
|
2170
|
+
"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.",
|
|
2171
2171
|
"value": {
|
|
2172
2172
|
"type": [
|
|
2173
|
-
"
|
|
2173
|
+
"boolean"
|
|
2174
2174
|
]
|
|
2175
2175
|
}
|
|
2176
2176
|
},
|
|
2177
2177
|
{
|
|
2178
|
-
"name": "
|
|
2179
|
-
"description": "
|
|
2178
|
+
"name": "column-rendering",
|
|
2179
|
+
"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.",
|
|
2180
2180
|
"value": {
|
|
2181
2181
|
"type": [
|
|
2182
|
-
"
|
|
2182
|
+
"ColumnRendering"
|
|
2183
2183
|
]
|
|
2184
2184
|
}
|
|
2185
2185
|
},
|
|
2186
2186
|
{
|
|
2187
|
-
"name": "
|
|
2188
|
-
"description": "
|
|
2187
|
+
"name": "column-reordering-allowed",
|
|
2188
|
+
"description": "Set to true to allow column reordering.",
|
|
2189
2189
|
"value": {
|
|
2190
2190
|
"type": [
|
|
2191
|
-
"
|
|
2192
|
-
"null",
|
|
2193
|
-
"undefined"
|
|
2191
|
+
"boolean"
|
|
2194
2192
|
]
|
|
2195
2193
|
}
|
|
2196
2194
|
},
|
|
2197
2195
|
{
|
|
2198
|
-
"name": "
|
|
2199
|
-
"description": "
|
|
2196
|
+
"name": "drop-mode",
|
|
2197
|
+
"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.",
|
|
2200
2198
|
"value": {
|
|
2201
2199
|
"type": [
|
|
2202
|
-
"
|
|
2200
|
+
"GridDropMode",
|
|
2203
2201
|
"null",
|
|
2204
2202
|
"undefined"
|
|
2205
2203
|
]
|
|
2206
2204
|
}
|
|
2207
2205
|
},
|
|
2208
2206
|
{
|
|
2209
|
-
"name": "
|
|
2210
|
-
"description": "
|
|
2207
|
+
"name": "item-has-children-path",
|
|
2208
|
+
"description": "Path to an item sub-property that indicates whether the item has child items.",
|
|
2211
2209
|
"value": {
|
|
2212
2210
|
"type": [
|
|
2213
|
-
"
|
|
2211
|
+
"string",
|
|
2212
|
+
"null",
|
|
2213
|
+
"undefined"
|
|
2214
2214
|
]
|
|
2215
2215
|
}
|
|
2216
2216
|
},
|
|
2217
2217
|
{
|
|
2218
|
-
"name": "
|
|
2219
|
-
"description": "
|
|
2218
|
+
"name": "item-id-path",
|
|
2219
|
+
"description": "Path to an item sub-property that identifies the item.",
|
|
2220
2220
|
"value": {
|
|
2221
2221
|
"type": [
|
|
2222
|
-
"
|
|
2222
|
+
"string",
|
|
2223
|
+
"null",
|
|
2224
|
+
"undefined"
|
|
2223
2225
|
]
|
|
2224
2226
|
}
|
|
2225
2227
|
},
|
|
2226
2228
|
{
|
|
2227
|
-
"name": "multi-sort
|
|
2228
|
-
"description": "
|
|
2229
|
+
"name": "multi-sort",
|
|
2230
|
+
"description": "When `true`, all `<vaadin-grid-sorter>` are applied for sorting.",
|
|
2229
2231
|
"value": {
|
|
2230
2232
|
"type": [
|
|
2231
|
-
"
|
|
2232
|
-
"null",
|
|
2233
|
-
"undefined"
|
|
2233
|
+
"boolean"
|
|
2234
2234
|
]
|
|
2235
2235
|
}
|
|
2236
2236
|
},
|
|
@@ -2244,22 +2244,22 @@
|
|
|
2244
2244
|
}
|
|
2245
2245
|
},
|
|
2246
2246
|
{
|
|
2247
|
-
"name": "
|
|
2248
|
-
"description": "
|
|
2247
|
+
"name": "multi-sort-priority",
|
|
2248
|
+
"description": "Controls how columns are added to the sort order when using multi-sort.\nThe sort order is visually indicated by numbers in grid sorters placed in column headers.\n\nBy default, whenever an unsorted column is sorted, or the sort-direction of a column is\nchanged, that column gets sort priority 1, thus affecting the priority for all the other\nsorted columns. This is identical to using `multi-sort-priority=\"prepend\"`.\n\nUsing this property allows to change this behavior so that sorting an unsorted column\nwould add it to the \"end\" of the sort, and changing column's sort direction would retain\nit's previous priority. To set this, use `multi-sort-priority=\"append\"`.",
|
|
2249
2249
|
"value": {
|
|
2250
2250
|
"type": [
|
|
2251
|
-
"
|
|
2251
|
+
"string",
|
|
2252
|
+
"null",
|
|
2253
|
+
"undefined"
|
|
2252
2254
|
]
|
|
2253
2255
|
}
|
|
2254
2256
|
},
|
|
2255
2257
|
{
|
|
2256
|
-
"name": "
|
|
2257
|
-
"description": "
|
|
2258
|
+
"name": "page-size",
|
|
2259
|
+
"description": "Number of items fetched at a time from the dataprovider.",
|
|
2258
2260
|
"value": {
|
|
2259
2261
|
"type": [
|
|
2260
|
-
"
|
|
2261
|
-
"null",
|
|
2262
|
-
"undefined"
|
|
2262
|
+
"number"
|
|
2263
2263
|
]
|
|
2264
2264
|
}
|
|
2265
2265
|
},
|
|
@@ -2275,11 +2275,11 @@
|
|
|
2275
2275
|
}
|
|
2276
2276
|
},
|
|
2277
2277
|
{
|
|
2278
|
-
"name": "
|
|
2279
|
-
"description": "
|
|
2278
|
+
"name": "size",
|
|
2279
|
+
"description": "The number of root-level items in the grid.",
|
|
2280
2280
|
"value": {
|
|
2281
2281
|
"type": [
|
|
2282
|
-
"
|
|
2282
|
+
"number"
|
|
2283
2283
|
]
|
|
2284
2284
|
}
|
|
2285
2285
|
},
|
|
@@ -2318,69 +2318,57 @@
|
|
|
2318
2318
|
}
|
|
2319
2319
|
},
|
|
2320
2320
|
{
|
|
2321
|
-
"name": "
|
|
2322
|
-
"description": "
|
|
2323
|
-
"value": {
|
|
2324
|
-
"type": [
|
|
2325
|
-
"Array.<GridItem>",
|
|
2326
|
-
"undefined"
|
|
2327
|
-
]
|
|
2328
|
-
}
|
|
2329
|
-
},
|
|
2330
|
-
{
|
|
2331
|
-
"name": "size",
|
|
2332
|
-
"description": "The number of root-level items in the grid.",
|
|
2321
|
+
"name": "allRowsVisible",
|
|
2322
|
+
"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.",
|
|
2333
2323
|
"value": {
|
|
2334
2324
|
"type": [
|
|
2335
|
-
"
|
|
2325
|
+
"boolean"
|
|
2336
2326
|
]
|
|
2337
2327
|
}
|
|
2338
2328
|
},
|
|
2339
2329
|
{
|
|
2340
|
-
"name": "
|
|
2341
|
-
"description": "
|
|
2330
|
+
"name": "cellPartNameGenerator",
|
|
2331
|
+
"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.",
|
|
2342
2332
|
"value": {
|
|
2343
2333
|
"type": [
|
|
2344
|
-
"
|
|
2334
|
+
"GridCellPartNameGenerator",
|
|
2335
|
+
"null",
|
|
2336
|
+
"undefined"
|
|
2345
2337
|
]
|
|
2346
2338
|
}
|
|
2347
2339
|
},
|
|
2348
2340
|
{
|
|
2349
|
-
"name": "
|
|
2350
|
-
"description": "
|
|
2341
|
+
"name": "columnRendering",
|
|
2342
|
+
"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.",
|
|
2351
2343
|
"value": {
|
|
2352
2344
|
"type": [
|
|
2353
|
-
"
|
|
2354
|
-
"null",
|
|
2355
|
-
"undefined"
|
|
2345
|
+
"ColumnRendering"
|
|
2356
2346
|
]
|
|
2357
2347
|
}
|
|
2358
2348
|
},
|
|
2359
2349
|
{
|
|
2360
|
-
"name": "
|
|
2361
|
-
"description": "
|
|
2350
|
+
"name": "columnReorderingAllowed",
|
|
2351
|
+
"description": "Set to true to allow column reordering.",
|
|
2362
2352
|
"value": {
|
|
2363
2353
|
"type": [
|
|
2364
|
-
"
|
|
2365
|
-
"null",
|
|
2366
|
-
"undefined"
|
|
2354
|
+
"boolean"
|
|
2367
2355
|
]
|
|
2368
2356
|
}
|
|
2369
2357
|
},
|
|
2370
2358
|
{
|
|
2371
|
-
"name": "
|
|
2372
|
-
"description": "
|
|
2359
|
+
"name": "dataProvider",
|
|
2360
|
+
"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.",
|
|
2373
2361
|
"value": {
|
|
2374
2362
|
"type": [
|
|
2375
|
-
"
|
|
2363
|
+
"GridDataProvider",
|
|
2376
2364
|
"null",
|
|
2377
2365
|
"undefined"
|
|
2378
2366
|
]
|
|
2379
2367
|
}
|
|
2380
2368
|
},
|
|
2381
2369
|
{
|
|
2382
|
-
"name": "
|
|
2383
|
-
"description": "An array
|
|
2370
|
+
"name": "detailsOpenedItems",
|
|
2371
|
+
"description": "An array containing references to items with open row details.",
|
|
2384
2372
|
"value": {
|
|
2385
2373
|
"type": [
|
|
2386
2374
|
"Array.<GridItem>"
|
|
@@ -2388,37 +2376,41 @@
|
|
|
2388
2376
|
}
|
|
2389
2377
|
},
|
|
2390
2378
|
{
|
|
2391
|
-
"name": "
|
|
2392
|
-
"description": "
|
|
2379
|
+
"name": "dragFilter",
|
|
2380
|
+
"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.",
|
|
2393
2381
|
"value": {
|
|
2394
2382
|
"type": [
|
|
2395
|
-
"
|
|
2383
|
+
"GridDragAndDropFilter",
|
|
2384
|
+
"null",
|
|
2385
|
+
"undefined"
|
|
2396
2386
|
]
|
|
2397
2387
|
}
|
|
2398
2388
|
},
|
|
2399
2389
|
{
|
|
2400
|
-
"name": "
|
|
2401
|
-
"description": "
|
|
2390
|
+
"name": "dropFilter",
|
|
2391
|
+
"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.",
|
|
2402
2392
|
"value": {
|
|
2403
2393
|
"type": [
|
|
2404
|
-
"
|
|
2394
|
+
"GridDragAndDropFilter",
|
|
2405
2395
|
"null",
|
|
2406
2396
|
"undefined"
|
|
2407
2397
|
]
|
|
2408
2398
|
}
|
|
2409
2399
|
},
|
|
2410
2400
|
{
|
|
2411
|
-
"name": "
|
|
2412
|
-
"description": "
|
|
2401
|
+
"name": "dropMode",
|
|
2402
|
+
"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.",
|
|
2413
2403
|
"value": {
|
|
2414
2404
|
"type": [
|
|
2415
|
-
"
|
|
2405
|
+
"GridDropMode",
|
|
2406
|
+
"null",
|
|
2407
|
+
"undefined"
|
|
2416
2408
|
]
|
|
2417
2409
|
}
|
|
2418
2410
|
},
|
|
2419
2411
|
{
|
|
2420
|
-
"name": "
|
|
2421
|
-
"description": "An array that contains the
|
|
2412
|
+
"name": "expandedItems",
|
|
2413
|
+
"description": "An array that contains the expanded items.",
|
|
2422
2414
|
"value": {
|
|
2423
2415
|
"type": [
|
|
2424
2416
|
"Array.<GridItem>"
|
|
@@ -2437,17 +2429,19 @@
|
|
|
2437
2429
|
}
|
|
2438
2430
|
},
|
|
2439
2431
|
{
|
|
2440
|
-
"name": "
|
|
2441
|
-
"description": "
|
|
2432
|
+
"name": "itemHasChildrenPath",
|
|
2433
|
+
"description": "Path to an item sub-property that indicates whether the item has child items.",
|
|
2442
2434
|
"value": {
|
|
2443
2435
|
"type": [
|
|
2444
|
-
"
|
|
2436
|
+
"string",
|
|
2437
|
+
"null",
|
|
2438
|
+
"undefined"
|
|
2445
2439
|
]
|
|
2446
2440
|
}
|
|
2447
2441
|
},
|
|
2448
2442
|
{
|
|
2449
|
-
"name": "
|
|
2450
|
-
"description": "
|
|
2443
|
+
"name": "itemIdPath",
|
|
2444
|
+
"description": "Path to an item sub-property that identifies the item.",
|
|
2451
2445
|
"value": {
|
|
2452
2446
|
"type": [
|
|
2453
2447
|
"string",
|
|
@@ -2457,8 +2451,18 @@
|
|
|
2457
2451
|
}
|
|
2458
2452
|
},
|
|
2459
2453
|
{
|
|
2460
|
-
"name": "
|
|
2461
|
-
"description": "
|
|
2454
|
+
"name": "items",
|
|
2455
|
+
"description": "An array containing the items which will be passed to renderer functions.",
|
|
2456
|
+
"value": {
|
|
2457
|
+
"type": [
|
|
2458
|
+
"Array.<GridItem>",
|
|
2459
|
+
"undefined"
|
|
2460
|
+
]
|
|
2461
|
+
}
|
|
2462
|
+
},
|
|
2463
|
+
{
|
|
2464
|
+
"name": "multiSort",
|
|
2465
|
+
"description": "When `true`, all `<vaadin-grid-sorter>` are applied for sorting.",
|
|
2462
2466
|
"value": {
|
|
2463
2467
|
"type": [
|
|
2464
2468
|
"boolean"
|
|
@@ -2466,8 +2470,8 @@
|
|
|
2466
2470
|
}
|
|
2467
2471
|
},
|
|
2468
2472
|
{
|
|
2469
|
-
"name": "
|
|
2470
|
-
"description": "
|
|
2473
|
+
"name": "multiSortOnShiftClick",
|
|
2474
|
+
"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.",
|
|
2471
2475
|
"value": {
|
|
2472
2476
|
"type": [
|
|
2473
2477
|
"boolean"
|
|
@@ -2475,66 +2479,62 @@
|
|
|
2475
2479
|
}
|
|
2476
2480
|
},
|
|
2477
2481
|
{
|
|
2478
|
-
"name": "
|
|
2479
|
-
"description": "
|
|
2482
|
+
"name": "multiSortPriority",
|
|
2483
|
+
"description": "Controls how columns are added to the sort order when using multi-sort.\nThe sort order is visually indicated by numbers in grid sorters placed in column headers.\n\nBy default, whenever an unsorted column is sorted, or the sort-direction of a column is\nchanged, that column gets sort priority 1, thus affecting the priority for all the other\nsorted columns. This is identical to using `multi-sort-priority=\"prepend\"`.\n\nUsing this property allows to change this behavior so that sorting an unsorted column\nwould add it to the \"end\" of the sort, and changing column's sort direction would retain\nit's previous priority. To set this, use `multi-sort-priority=\"append\"`.",
|
|
2480
2484
|
"value": {
|
|
2481
2485
|
"type": [
|
|
2482
|
-
"
|
|
2486
|
+
"string",
|
|
2483
2487
|
"null",
|
|
2484
2488
|
"undefined"
|
|
2485
2489
|
]
|
|
2486
2490
|
}
|
|
2487
2491
|
},
|
|
2488
2492
|
{
|
|
2489
|
-
"name": "
|
|
2490
|
-
"description": "
|
|
2493
|
+
"name": "pageSize",
|
|
2494
|
+
"description": "Number of items fetched at a time from the dataprovider.",
|
|
2491
2495
|
"value": {
|
|
2492
2496
|
"type": [
|
|
2493
|
-
"
|
|
2494
|
-
"null",
|
|
2495
|
-
"undefined"
|
|
2497
|
+
"number"
|
|
2496
2498
|
]
|
|
2497
2499
|
}
|
|
2498
2500
|
},
|
|
2499
2501
|
{
|
|
2500
|
-
"name": "
|
|
2501
|
-
"description": "
|
|
2502
|
+
"name": "rowDetailsRenderer",
|
|
2503
|
+
"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.",
|
|
2502
2504
|
"value": {
|
|
2503
2505
|
"type": [
|
|
2504
|
-
"
|
|
2506
|
+
"GridRowDetailsRenderer",
|
|
2505
2507
|
"null",
|
|
2506
2508
|
"undefined"
|
|
2507
2509
|
]
|
|
2508
2510
|
}
|
|
2509
2511
|
},
|
|
2510
2512
|
{
|
|
2511
|
-
"name": "
|
|
2512
|
-
"description": "
|
|
2513
|
+
"name": "rowsDraggable",
|
|
2514
|
+
"description": "Marks the grid's rows to be available for dragging.",
|
|
2513
2515
|
"value": {
|
|
2514
2516
|
"type": [
|
|
2515
|
-
"
|
|
2517
|
+
"boolean",
|
|
2516
2518
|
"null",
|
|
2517
2519
|
"undefined"
|
|
2518
2520
|
]
|
|
2519
2521
|
}
|
|
2520
2522
|
},
|
|
2521
2523
|
{
|
|
2522
|
-
"name": "
|
|
2523
|
-
"description": "
|
|
2524
|
+
"name": "selectedItems",
|
|
2525
|
+
"description": "An array that contains the selected items.",
|
|
2524
2526
|
"value": {
|
|
2525
2527
|
"type": [
|
|
2526
|
-
"
|
|
2527
|
-
"null",
|
|
2528
|
-
"undefined"
|
|
2528
|
+
"Array.<GridItem>"
|
|
2529
2529
|
]
|
|
2530
2530
|
}
|
|
2531
2531
|
},
|
|
2532
2532
|
{
|
|
2533
|
-
"name": "
|
|
2534
|
-
"description": "
|
|
2533
|
+
"name": "size",
|
|
2534
|
+
"description": "The number of root-level items in the grid.",
|
|
2535
2535
|
"value": {
|
|
2536
2536
|
"type": [
|
|
2537
|
-
"
|
|
2537
|
+
"number"
|
|
2538
2538
|
]
|
|
2539
2539
|
}
|
|
2540
2540
|
}
|
|
@@ -2549,32 +2549,24 @@
|
|
|
2549
2549
|
"description": "Fired when the cell is activated with click or keyboard."
|
|
2550
2550
|
},
|
|
2551
2551
|
{
|
|
2552
|
-
"name": "
|
|
2553
|
-
"description": "Fired when a
|
|
2554
|
-
},
|
|
2555
|
-
{
|
|
2556
|
-
"name": "expanded-items-changed",
|
|
2557
|
-
"description": "Fired when the `expandedItems` property changes."
|
|
2558
|
-
},
|
|
2559
|
-
{
|
|
2560
|
-
"name": "loading-changed",
|
|
2561
|
-
"description": "Fired when the `loading` property changes."
|
|
2552
|
+
"name": "cell-focus",
|
|
2553
|
+
"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."
|
|
2562
2554
|
},
|
|
2563
2555
|
{
|
|
2564
|
-
"name": "
|
|
2565
|
-
"description": "Fired when the
|
|
2556
|
+
"name": "column-reorder",
|
|
2557
|
+
"description": "Fired when the columns in the grid are reordered."
|
|
2566
2558
|
},
|
|
2567
2559
|
{
|
|
2568
|
-
"name": "
|
|
2569
|
-
"description": "Fired when the
|
|
2560
|
+
"name": "column-resize",
|
|
2561
|
+
"description": "Fired when a column in the grid is resized by the user."
|
|
2570
2562
|
},
|
|
2571
2563
|
{
|
|
2572
|
-
"name": "
|
|
2573
|
-
"description": "Fired when
|
|
2564
|
+
"name": "data-provider-changed",
|
|
2565
|
+
"description": "Fired when the `dataProvider` property changes."
|
|
2574
2566
|
},
|
|
2575
2567
|
{
|
|
2576
|
-
"name": "
|
|
2577
|
-
"description": "Fired when the
|
|
2568
|
+
"name": "expanded-items-changed",
|
|
2569
|
+
"description": "Fired when the `expandedItems` property changes."
|
|
2578
2570
|
},
|
|
2579
2571
|
{
|
|
2580
2572
|
"name": "grid-dragend",
|
|
@@ -2589,12 +2581,20 @@
|
|
|
2589
2581
|
"description": "Fired when a drop occurs on top of the grid."
|
|
2590
2582
|
},
|
|
2591
2583
|
{
|
|
2592
|
-
"name": "
|
|
2593
|
-
"description": "Fired when the
|
|
2584
|
+
"name": "item-toggle",
|
|
2585
|
+
"description": "Fired when the user selects or deselects an item through the selection column."
|
|
2594
2586
|
},
|
|
2595
2587
|
{
|
|
2596
|
-
"name": "
|
|
2597
|
-
"description": "Fired when the `
|
|
2588
|
+
"name": "loading-changed",
|
|
2589
|
+
"description": "Fired when the `loading` property changes."
|
|
2590
|
+
},
|
|
2591
|
+
{
|
|
2592
|
+
"name": "selected-items-changed",
|
|
2593
|
+
"description": "Fired when the `selectedItems` property changes."
|
|
2594
|
+
},
|
|
2595
|
+
{
|
|
2596
|
+
"name": "size-changed",
|
|
2597
|
+
"description": "Fired when the `size` property changes."
|
|
2598
2598
|
}
|
|
2599
2599
|
]
|
|
2600
2600
|
}
|