@vaadin/grid 25.2.0-alpha1 → 25.2.0-alpha10
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/custom-elements.json +53 -1
- package/package.json +12 -12
- package/src/vaadin-grid-a11y-mixin.js +2 -2
- package/src/vaadin-grid-active-item-mixin.js +0 -12
- package/src/vaadin-grid-column-auto-width-mixin.js +1 -2
- package/src/vaadin-grid-column-group.d.ts +3 -1
- package/src/vaadin-grid-column-mixin.js +2 -2
- package/src/vaadin-grid-column-reordering-mixin.js +33 -11
- package/src/vaadin-grid-column-resizing-mixin.js +0 -8
- package/src/vaadin-grid-column.d.ts +5 -2
- package/src/vaadin-grid-data-provider-mixin.js +0 -28
- package/src/vaadin-grid-drag-and-drop-mixin.js +1 -41
- package/src/vaadin-grid-dynamic-columns-mixin.js +1 -1
- package/src/vaadin-grid-event-context-mixin.js +1 -1
- package/src/vaadin-grid-filter-column.d.ts +3 -1
- package/src/vaadin-grid-helpers.js +1 -1
- package/src/vaadin-grid-keyboard-navigation-mixin.js +1 -9
- package/src/vaadin-grid-mixin.js +5 -7
- package/src/vaadin-grid-row-details-mixin.js +30 -13
- package/src/vaadin-grid-selection-column.d.ts +3 -1
- package/src/vaadin-grid-selection-mixin.js +8 -17
- package/src/vaadin-grid-sort-column.d.ts +3 -1
- package/src/vaadin-grid-tree-column.d.ts +3 -1
- package/src/vaadin-grid.d.ts +1 -1
- package/src/vaadin-grid.js +1 -1
- package/web-types.json +401 -769
- package/web-types.lit.json +251 -230
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/grid",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -20,71 +20,71 @@
|
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
23
|
-
"name": "
|
|
24
|
-
"description": "
|
|
23
|
+
"name": ".footerPartName",
|
|
24
|
+
"description": "Custom part name for the footer cell.",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"name": "
|
|
31
|
-
"description": "
|
|
30
|
+
"name": ".footerRenderer",
|
|
31
|
+
"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.",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"name": "?
|
|
38
|
-
"description": "When
|
|
37
|
+
"name": "?frozen",
|
|
38
|
+
"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.",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
|
-
"name": "?
|
|
45
|
-
"description": "When
|
|
44
|
+
"name": "?frozenToEnd",
|
|
45
|
+
"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.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
|
-
"name": "
|
|
52
|
-
"description": "
|
|
51
|
+
"name": ".header",
|
|
52
|
+
"description": "Text content to display in the header cell of the column.",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": ".
|
|
59
|
-
"description": "Custom part name for the
|
|
58
|
+
"name": ".headerPartName",
|
|
59
|
+
"description": "Custom part name for the header cell.",
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
|
-
"name": ".
|
|
66
|
-
"description": "Custom function for rendering the
|
|
65
|
+
"name": ".headerRenderer",
|
|
66
|
+
"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.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
|
-
"name": "
|
|
73
|
-
"description": "
|
|
72
|
+
"name": "?hidden",
|
|
73
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
74
74
|
"value": {
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
|
-
"name": "
|
|
80
|
-
"description": "
|
|
79
|
+
"name": "?resizable",
|
|
80
|
+
"description": "When set to true, the column is user-resizable.",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
|
-
"name": "
|
|
87
|
-
"description": "
|
|
86
|
+
"name": "?rowHeader",
|
|
87
|
+
"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.",
|
|
88
88
|
"value": {
|
|
89
89
|
"kind": "expression"
|
|
90
90
|
}
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
},
|
|
101
101
|
{
|
|
102
102
|
"name": "vaadin-grid-column",
|
|
103
|
-
"description": "A `<vaadin-grid-column>` is used to configure how a column in `<vaadin-grid>`\nshould look like.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-
|
|
103
|
+
"description": "A `<vaadin-grid-column>` is used to configure how a column in `<vaadin-grid>`\nshould look like.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-grid) documentation for instructions on how\nto configure the `<vaadin-grid-column>`.",
|
|
104
104
|
"extension": true,
|
|
105
105
|
"attributes": [
|
|
106
106
|
{
|
|
@@ -111,92 +111,92 @@
|
|
|
111
111
|
}
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
|
-
"name": "
|
|
115
|
-
"description": "
|
|
114
|
+
"name": ".flexGrow",
|
|
115
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
116
116
|
"value": {
|
|
117
117
|
"kind": "expression"
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
120
|
{
|
|
121
|
-
"name": "
|
|
122
|
-
"description": "
|
|
121
|
+
"name": ".footerPartName",
|
|
122
|
+
"description": "Custom part name for the footer cell.",
|
|
123
123
|
"value": {
|
|
124
124
|
"kind": "expression"
|
|
125
125
|
}
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
|
-
"name": "
|
|
129
|
-
"description": "
|
|
128
|
+
"name": ".footerRenderer",
|
|
129
|
+
"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.",
|
|
130
130
|
"value": {
|
|
131
131
|
"kind": "expression"
|
|
132
132
|
}
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
|
-
"name": "?
|
|
136
|
-
"description": "When
|
|
135
|
+
"name": "?frozen",
|
|
136
|
+
"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.",
|
|
137
137
|
"value": {
|
|
138
138
|
"kind": "expression"
|
|
139
139
|
}
|
|
140
140
|
},
|
|
141
141
|
{
|
|
142
|
-
"name": "?
|
|
143
|
-
"description": "When true, the
|
|
142
|
+
"name": "?frozenToEnd",
|
|
143
|
+
"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.",
|
|
144
144
|
"value": {
|
|
145
145
|
"kind": "expression"
|
|
146
146
|
}
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
|
-
"name": ".
|
|
150
|
-
"description": "
|
|
149
|
+
"name": ".header",
|
|
150
|
+
"description": "Text content to display in the header cell of the column.",
|
|
151
151
|
"value": {
|
|
152
152
|
"kind": "expression"
|
|
153
153
|
}
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
|
-
"name": ".
|
|
157
|
-
"description": "Custom part name for the
|
|
156
|
+
"name": ".headerPartName",
|
|
157
|
+
"description": "Custom part name for the header cell.",
|
|
158
158
|
"value": {
|
|
159
159
|
"kind": "expression"
|
|
160
160
|
}
|
|
161
161
|
},
|
|
162
162
|
{
|
|
163
|
-
"name": ".
|
|
164
|
-
"description": "Custom function for rendering the
|
|
163
|
+
"name": ".headerRenderer",
|
|
164
|
+
"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.",
|
|
165
165
|
"value": {
|
|
166
166
|
"kind": "expression"
|
|
167
167
|
}
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
|
-
"name": "
|
|
171
|
-
"description": "
|
|
170
|
+
"name": "?hidden",
|
|
171
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
172
172
|
"value": {
|
|
173
173
|
"kind": "expression"
|
|
174
174
|
}
|
|
175
175
|
},
|
|
176
176
|
{
|
|
177
|
-
"name": ".
|
|
178
|
-
"description": "
|
|
177
|
+
"name": ".path",
|
|
178
|
+
"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.",
|
|
179
179
|
"value": {
|
|
180
180
|
"kind": "expression"
|
|
181
181
|
}
|
|
182
182
|
},
|
|
183
183
|
{
|
|
184
|
-
"name": ".
|
|
185
|
-
"description": "Custom function for rendering the
|
|
184
|
+
"name": ".renderer",
|
|
185
|
+
"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.",
|
|
186
186
|
"value": {
|
|
187
187
|
"kind": "expression"
|
|
188
188
|
}
|
|
189
189
|
},
|
|
190
190
|
{
|
|
191
|
-
"name": "
|
|
192
|
-
"description": "
|
|
191
|
+
"name": "?resizable",
|
|
192
|
+
"description": "When set to true, the column is user-resizable.",
|
|
193
193
|
"value": {
|
|
194
194
|
"kind": "expression"
|
|
195
195
|
}
|
|
196
196
|
},
|
|
197
197
|
{
|
|
198
|
-
"name": "
|
|
199
|
-
"description": "
|
|
198
|
+
"name": "?rowHeader",
|
|
199
|
+
"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.",
|
|
200
200
|
"value": {
|
|
201
201
|
"kind": "expression"
|
|
202
202
|
}
|
|
@@ -218,41 +218,34 @@
|
|
|
218
218
|
]
|
|
219
219
|
},
|
|
220
220
|
{
|
|
221
|
-
"name": "vaadin-grid-filter",
|
|
222
|
-
"description": "`<vaadin-grid-filter>` is a helper element for the `<vaadin-grid
|
|
221
|
+
"name": "vaadin-grid-filter-column",
|
|
222
|
+
"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```",
|
|
223
223
|
"extension": true,
|
|
224
224
|
"attributes": [
|
|
225
225
|
{
|
|
226
|
-
"name": "
|
|
227
|
-
"description": "
|
|
226
|
+
"name": "?autoWidth",
|
|
227
|
+
"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.",
|
|
228
228
|
"value": {
|
|
229
229
|
"kind": "expression"
|
|
230
230
|
}
|
|
231
231
|
},
|
|
232
232
|
{
|
|
233
|
-
"name": ".
|
|
234
|
-
"description": "
|
|
233
|
+
"name": ".flexGrow",
|
|
234
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
235
235
|
"value": {
|
|
236
236
|
"kind": "expression"
|
|
237
237
|
}
|
|
238
238
|
},
|
|
239
239
|
{
|
|
240
|
-
"name": "
|
|
241
|
-
"description": "
|
|
240
|
+
"name": ".footerPartName",
|
|
241
|
+
"description": "Custom part name for the footer cell.",
|
|
242
242
|
"value": {
|
|
243
243
|
"kind": "expression"
|
|
244
244
|
}
|
|
245
|
-
}
|
|
246
|
-
]
|
|
247
|
-
},
|
|
248
|
-
{
|
|
249
|
-
"name": "vaadin-grid-filter-column",
|
|
250
|
-
"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```",
|
|
251
|
-
"extension": true,
|
|
252
|
-
"attributes": [
|
|
245
|
+
},
|
|
253
246
|
{
|
|
254
|
-
"name": "
|
|
255
|
-
"description": "
|
|
247
|
+
"name": ".footerRenderer",
|
|
248
|
+
"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.",
|
|
256
249
|
"value": {
|
|
257
250
|
"kind": "expression"
|
|
258
251
|
}
|
|
@@ -272,68 +265,82 @@
|
|
|
272
265
|
}
|
|
273
266
|
},
|
|
274
267
|
{
|
|
275
|
-
"name": "
|
|
276
|
-
"description": "
|
|
268
|
+
"name": ".header",
|
|
269
|
+
"description": "Text to display as the label of the column filter text-field.",
|
|
277
270
|
"value": {
|
|
278
271
|
"kind": "expression"
|
|
279
272
|
}
|
|
280
273
|
},
|
|
281
274
|
{
|
|
282
|
-
"name": "
|
|
283
|
-
"description": "
|
|
275
|
+
"name": ".headerPartName",
|
|
276
|
+
"description": "Custom part name for the header cell.",
|
|
284
277
|
"value": {
|
|
285
278
|
"kind": "expression"
|
|
286
279
|
}
|
|
287
280
|
},
|
|
288
281
|
{
|
|
289
|
-
"name": "
|
|
290
|
-
"description": "
|
|
282
|
+
"name": ".headerRenderer",
|
|
283
|
+
"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.",
|
|
291
284
|
"value": {
|
|
292
285
|
"kind": "expression"
|
|
293
286
|
}
|
|
294
287
|
},
|
|
295
288
|
{
|
|
296
|
-
"name": "
|
|
297
|
-
"description": "
|
|
289
|
+
"name": "?hidden",
|
|
290
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
298
291
|
"value": {
|
|
299
292
|
"kind": "expression"
|
|
300
293
|
}
|
|
301
294
|
},
|
|
302
295
|
{
|
|
303
|
-
"name": ".
|
|
304
|
-
"description": "
|
|
296
|
+
"name": ".path",
|
|
297
|
+
"description": "JS Path of the property in the item used for filtering the data.",
|
|
305
298
|
"value": {
|
|
306
299
|
"kind": "expression"
|
|
307
300
|
}
|
|
308
301
|
},
|
|
309
302
|
{
|
|
310
|
-
"name": ".
|
|
311
|
-
"description": "Custom function for rendering the
|
|
303
|
+
"name": ".renderer",
|
|
304
|
+
"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.",
|
|
312
305
|
"value": {
|
|
313
306
|
"kind": "expression"
|
|
314
307
|
}
|
|
315
308
|
},
|
|
316
309
|
{
|
|
317
|
-
"name": "
|
|
318
|
-
"description": "
|
|
310
|
+
"name": "?resizable",
|
|
311
|
+
"description": "When set to true, the column is user-resizable.",
|
|
319
312
|
"value": {
|
|
320
313
|
"kind": "expression"
|
|
321
314
|
}
|
|
322
315
|
},
|
|
323
316
|
{
|
|
324
|
-
"name": "
|
|
325
|
-
"description": "
|
|
317
|
+
"name": "?rowHeader",
|
|
318
|
+
"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.",
|
|
326
319
|
"value": {
|
|
327
320
|
"kind": "expression"
|
|
328
321
|
}
|
|
329
322
|
},
|
|
330
323
|
{
|
|
331
|
-
"name": ".
|
|
332
|
-
"description": "
|
|
324
|
+
"name": ".textAlign",
|
|
325
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
333
326
|
"value": {
|
|
334
327
|
"kind": "expression"
|
|
335
328
|
}
|
|
336
329
|
},
|
|
330
|
+
{
|
|
331
|
+
"name": ".width",
|
|
332
|
+
"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.",
|
|
333
|
+
"value": {
|
|
334
|
+
"kind": "expression"
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
]
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
"name": "vaadin-grid-filter",
|
|
341
|
+
"description": "`<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,\nand handlers for filtering 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.headerRenderer = (root, column) => {\n let filter = root.firstElementChild;\n if (!filter) {\n filter = document.createElement('vaadin-grid-filter');\n root.appendChild(filter);\n }\n filter.path = 'name.first';\n};\ncolumn.renderer = (root, column, model) => {\n root.textContent = model.item.name.first;\n};\n```",
|
|
342
|
+
"extension": true,
|
|
343
|
+
"attributes": [
|
|
337
344
|
{
|
|
338
345
|
"name": ".path",
|
|
339
346
|
"description": "JS Path of the property in the item used for filtering the data.",
|
|
@@ -342,22 +349,22 @@
|
|
|
342
349
|
}
|
|
343
350
|
},
|
|
344
351
|
{
|
|
345
|
-
"name": ".
|
|
346
|
-
"description": "
|
|
352
|
+
"name": ".value",
|
|
353
|
+
"description": "Current filter value.",
|
|
347
354
|
"value": {
|
|
348
355
|
"kind": "expression"
|
|
349
356
|
}
|
|
350
357
|
},
|
|
351
358
|
{
|
|
352
|
-
"name": "
|
|
353
|
-
"description": "
|
|
359
|
+
"name": "@filter-changed",
|
|
360
|
+
"description": "",
|
|
354
361
|
"value": {
|
|
355
362
|
"kind": "expression"
|
|
356
363
|
}
|
|
357
364
|
},
|
|
358
365
|
{
|
|
359
|
-
"name": "
|
|
360
|
-
"description": "
|
|
366
|
+
"name": "@value-changed",
|
|
367
|
+
"description": "Fired when the `value` property changes.",
|
|
361
368
|
"value": {
|
|
362
369
|
"kind": "expression"
|
|
363
370
|
}
|
|
@@ -366,7 +373,7 @@
|
|
|
366
373
|
},
|
|
367
374
|
{
|
|
368
375
|
"name": "vaadin-grid-selection-column",
|
|
369
|
-
"description": "`<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`\nthat provides default renderers and functionality for item selection.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>\n\n <vaadin-grid-column>\n ...\n```\n\nBy default the selection column displays `<vaadin-checkbox>` elements in the\ncolumn cells. The checkboxes in the body rows toggle selection of the corresponding row items.\n\nWhen the grid data is provided as an array of [`items`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-
|
|
376
|
+
"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.2.0-alpha10/#/elements/vaadin-grid#property-items),\nthe column header gets an additional checkbox that can be used for toggling\nselection for all the items at once.\n\n__The default content can also be overridden__",
|
|
370
377
|
"extension": true,
|
|
371
378
|
"attributes": [
|
|
372
379
|
{
|
|
@@ -391,99 +398,99 @@
|
|
|
391
398
|
}
|
|
392
399
|
},
|
|
393
400
|
{
|
|
394
|
-
"name": "
|
|
395
|
-
"description": "
|
|
401
|
+
"name": ".flexGrow",
|
|
402
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
396
403
|
"value": {
|
|
397
404
|
"kind": "expression"
|
|
398
405
|
}
|
|
399
406
|
},
|
|
400
407
|
{
|
|
401
|
-
"name": "
|
|
402
|
-
"description": "
|
|
408
|
+
"name": ".footerPartName",
|
|
409
|
+
"description": "Custom part name for the footer cell.",
|
|
403
410
|
"value": {
|
|
404
411
|
"kind": "expression"
|
|
405
412
|
}
|
|
406
413
|
},
|
|
407
414
|
{
|
|
408
|
-
"name": "
|
|
409
|
-
"description": "
|
|
415
|
+
"name": ".footerRenderer",
|
|
416
|
+
"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.",
|
|
410
417
|
"value": {
|
|
411
418
|
"kind": "expression"
|
|
412
419
|
}
|
|
413
420
|
},
|
|
414
421
|
{
|
|
415
|
-
"name": "?
|
|
416
|
-
"description": "When
|
|
422
|
+
"name": "?frozen",
|
|
423
|
+
"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.",
|
|
417
424
|
"value": {
|
|
418
425
|
"kind": "expression"
|
|
419
426
|
}
|
|
420
427
|
},
|
|
421
428
|
{
|
|
422
|
-
"name": "?
|
|
423
|
-
"description": "When true, the
|
|
429
|
+
"name": "?frozenToEnd",
|
|
430
|
+
"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.",
|
|
424
431
|
"value": {
|
|
425
432
|
"kind": "expression"
|
|
426
433
|
}
|
|
427
434
|
},
|
|
428
435
|
{
|
|
429
|
-
"name": "
|
|
430
|
-
"description": "
|
|
436
|
+
"name": ".header",
|
|
437
|
+
"description": "Text content to display in the header cell of the column.",
|
|
431
438
|
"value": {
|
|
432
439
|
"kind": "expression"
|
|
433
440
|
}
|
|
434
441
|
},
|
|
435
442
|
{
|
|
436
|
-
"name": ".
|
|
437
|
-
"description": "
|
|
443
|
+
"name": ".headerPartName",
|
|
444
|
+
"description": "Custom part name for the header cell.",
|
|
438
445
|
"value": {
|
|
439
446
|
"kind": "expression"
|
|
440
447
|
}
|
|
441
448
|
},
|
|
442
449
|
{
|
|
443
|
-
"name": ".
|
|
444
|
-
"description": "Custom
|
|
450
|
+
"name": ".headerRenderer",
|
|
451
|
+
"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.",
|
|
445
452
|
"value": {
|
|
446
453
|
"kind": "expression"
|
|
447
454
|
}
|
|
448
455
|
},
|
|
449
456
|
{
|
|
450
|
-
"name": "
|
|
451
|
-
"description": "
|
|
457
|
+
"name": "?hidden",
|
|
458
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
452
459
|
"value": {
|
|
453
460
|
"kind": "expression"
|
|
454
461
|
}
|
|
455
462
|
},
|
|
456
463
|
{
|
|
457
|
-
"name": ".
|
|
458
|
-
"description": "
|
|
464
|
+
"name": ".path",
|
|
465
|
+
"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.",
|
|
459
466
|
"value": {
|
|
460
467
|
"kind": "expression"
|
|
461
468
|
}
|
|
462
469
|
},
|
|
463
470
|
{
|
|
464
|
-
"name": ".
|
|
465
|
-
"description": "Custom
|
|
471
|
+
"name": ".renderer",
|
|
472
|
+
"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.",
|
|
466
473
|
"value": {
|
|
467
474
|
"kind": "expression"
|
|
468
475
|
}
|
|
469
476
|
},
|
|
470
477
|
{
|
|
471
|
-
"name": "
|
|
472
|
-
"description": "
|
|
478
|
+
"name": "?resizable",
|
|
479
|
+
"description": "When set to true, the column is user-resizable.",
|
|
473
480
|
"value": {
|
|
474
481
|
"kind": "expression"
|
|
475
482
|
}
|
|
476
483
|
},
|
|
477
484
|
{
|
|
478
|
-
"name": "
|
|
479
|
-
"description": "
|
|
485
|
+
"name": "?rowHeader",
|
|
486
|
+
"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.",
|
|
480
487
|
"value": {
|
|
481
488
|
"kind": "expression"
|
|
482
489
|
}
|
|
483
490
|
},
|
|
484
491
|
{
|
|
485
|
-
"name": "
|
|
486
|
-
"description": "
|
|
492
|
+
"name": "?selectAll",
|
|
493
|
+
"description": "When true, all the items are selected.",
|
|
487
494
|
"value": {
|
|
488
495
|
"kind": "expression"
|
|
489
496
|
}
|
|
@@ -511,34 +518,6 @@
|
|
|
511
518
|
}
|
|
512
519
|
]
|
|
513
520
|
},
|
|
514
|
-
{
|
|
515
|
-
"name": "vaadin-grid-sorter",
|
|
516
|
-
"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",
|
|
517
|
-
"extension": true,
|
|
518
|
-
"attributes": [
|
|
519
|
-
{
|
|
520
|
-
"name": ".direction",
|
|
521
|
-
"description": "How to sort the data.\nPossible values are `asc` to use an ascending algorithm, `desc` to sort the data in\ndescending direction, or `null` for not sorting the data.",
|
|
522
|
-
"value": {
|
|
523
|
-
"kind": "expression"
|
|
524
|
-
}
|
|
525
|
-
},
|
|
526
|
-
{
|
|
527
|
-
"name": ".path",
|
|
528
|
-
"description": "JS Path of the property in the item used for sorting the data.",
|
|
529
|
-
"value": {
|
|
530
|
-
"kind": "expression"
|
|
531
|
-
}
|
|
532
|
-
},
|
|
533
|
-
{
|
|
534
|
-
"name": "@direction-changed",
|
|
535
|
-
"description": "Fired when the `direction` property changes.",
|
|
536
|
-
"value": {
|
|
537
|
-
"kind": "expression"
|
|
538
|
-
}
|
|
539
|
-
}
|
|
540
|
-
]
|
|
541
|
-
},
|
|
542
521
|
{
|
|
543
522
|
"name": "vaadin-grid-sort-column",
|
|
544
523
|
"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```",
|
|
@@ -552,99 +531,99 @@
|
|
|
552
531
|
}
|
|
553
532
|
},
|
|
554
533
|
{
|
|
555
|
-
"name": "
|
|
556
|
-
"description": "
|
|
534
|
+
"name": ".direction",
|
|
535
|
+
"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.",
|
|
557
536
|
"value": {
|
|
558
537
|
"kind": "expression"
|
|
559
538
|
}
|
|
560
539
|
},
|
|
561
540
|
{
|
|
562
|
-
"name": "
|
|
563
|
-
"description": "
|
|
541
|
+
"name": ".flexGrow",
|
|
542
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
564
543
|
"value": {
|
|
565
544
|
"kind": "expression"
|
|
566
545
|
}
|
|
567
546
|
},
|
|
568
547
|
{
|
|
569
|
-
"name": "
|
|
570
|
-
"description": "
|
|
548
|
+
"name": ".footerPartName",
|
|
549
|
+
"description": "Custom part name for the footer cell.",
|
|
571
550
|
"value": {
|
|
572
551
|
"kind": "expression"
|
|
573
552
|
}
|
|
574
553
|
},
|
|
575
554
|
{
|
|
576
|
-
"name": "
|
|
577
|
-
"description": "
|
|
555
|
+
"name": ".footerRenderer",
|
|
556
|
+
"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.",
|
|
578
557
|
"value": {
|
|
579
558
|
"kind": "expression"
|
|
580
559
|
}
|
|
581
560
|
},
|
|
582
561
|
{
|
|
583
|
-
"name": "?
|
|
584
|
-
"description": "When true, the
|
|
562
|
+
"name": "?frozen",
|
|
563
|
+
"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.",
|
|
585
564
|
"value": {
|
|
586
565
|
"kind": "expression"
|
|
587
566
|
}
|
|
588
567
|
},
|
|
589
568
|
{
|
|
590
|
-
"name": "
|
|
591
|
-
"description": "
|
|
569
|
+
"name": "?frozenToEnd",
|
|
570
|
+
"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.",
|
|
592
571
|
"value": {
|
|
593
572
|
"kind": "expression"
|
|
594
573
|
}
|
|
595
574
|
},
|
|
596
575
|
{
|
|
597
|
-
"name": ".
|
|
598
|
-
"description": "
|
|
576
|
+
"name": ".header",
|
|
577
|
+
"description": "Text content to display in the header cell of the column.",
|
|
599
578
|
"value": {
|
|
600
579
|
"kind": "expression"
|
|
601
580
|
}
|
|
602
581
|
},
|
|
603
582
|
{
|
|
604
|
-
"name": ".
|
|
605
|
-
"description": "Custom part name for the
|
|
583
|
+
"name": ".headerPartName",
|
|
584
|
+
"description": "Custom part name for the header cell.",
|
|
606
585
|
"value": {
|
|
607
586
|
"kind": "expression"
|
|
608
587
|
}
|
|
609
588
|
},
|
|
610
589
|
{
|
|
611
|
-
"name": ".
|
|
612
|
-
"description": "Custom function for rendering the
|
|
590
|
+
"name": ".headerRenderer",
|
|
591
|
+
"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.",
|
|
613
592
|
"value": {
|
|
614
593
|
"kind": "expression"
|
|
615
594
|
}
|
|
616
595
|
},
|
|
617
596
|
{
|
|
618
|
-
"name": "
|
|
619
|
-
"description": "
|
|
597
|
+
"name": "?hidden",
|
|
598
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
620
599
|
"value": {
|
|
621
600
|
"kind": "expression"
|
|
622
601
|
}
|
|
623
602
|
},
|
|
624
603
|
{
|
|
625
|
-
"name": ".
|
|
626
|
-
"description": "
|
|
604
|
+
"name": ".path",
|
|
605
|
+
"description": "JS Path of the property in the item used for sorting the data.",
|
|
627
606
|
"value": {
|
|
628
607
|
"kind": "expression"
|
|
629
608
|
}
|
|
630
609
|
},
|
|
631
610
|
{
|
|
632
|
-
"name": ".
|
|
633
|
-
"description": "Custom function for rendering the
|
|
611
|
+
"name": ".renderer",
|
|
612
|
+
"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.",
|
|
634
613
|
"value": {
|
|
635
614
|
"kind": "expression"
|
|
636
615
|
}
|
|
637
616
|
},
|
|
638
617
|
{
|
|
639
|
-
"name": "
|
|
640
|
-
"description": "
|
|
618
|
+
"name": "?resizable",
|
|
619
|
+
"description": "When set to true, the column is user-resizable.",
|
|
641
620
|
"value": {
|
|
642
621
|
"kind": "expression"
|
|
643
622
|
}
|
|
644
623
|
},
|
|
645
624
|
{
|
|
646
|
-
"name": "
|
|
647
|
-
"description": "
|
|
625
|
+
"name": "?rowHeader",
|
|
626
|
+
"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.",
|
|
648
627
|
"value": {
|
|
649
628
|
"kind": "expression"
|
|
650
629
|
}
|
|
@@ -673,34 +652,34 @@
|
|
|
673
652
|
]
|
|
674
653
|
},
|
|
675
654
|
{
|
|
676
|
-
"name": "vaadin-grid-
|
|
677
|
-
"description": "`<vaadin-grid-
|
|
655
|
+
"name": "vaadin-grid-sorter",
|
|
656
|
+
"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",
|
|
678
657
|
"extension": true,
|
|
679
658
|
"attributes": [
|
|
680
659
|
{
|
|
681
|
-
"name": "
|
|
682
|
-
"description": "
|
|
660
|
+
"name": ".direction",
|
|
661
|
+
"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.",
|
|
683
662
|
"value": {
|
|
684
663
|
"kind": "expression"
|
|
685
664
|
}
|
|
686
665
|
},
|
|
687
666
|
{
|
|
688
|
-
"name": "
|
|
689
|
-
"description": "
|
|
667
|
+
"name": ".path",
|
|
668
|
+
"description": "JS Path of the property in the item used for sorting the data.",
|
|
690
669
|
"value": {
|
|
691
670
|
"kind": "expression"
|
|
692
671
|
}
|
|
693
672
|
},
|
|
694
673
|
{
|
|
695
|
-
"name": "
|
|
696
|
-
"description": "
|
|
674
|
+
"name": "@direction-changed",
|
|
675
|
+
"description": "Fired when the `direction` property changes.",
|
|
697
676
|
"value": {
|
|
698
677
|
"kind": "expression"
|
|
699
678
|
}
|
|
700
679
|
},
|
|
701
680
|
{
|
|
702
|
-
"name": "@
|
|
703
|
-
"description": "Fired when the `
|
|
681
|
+
"name": "@sorter-changed",
|
|
682
|
+
"description": "Fired when the `path` or `direction` property changes.",
|
|
704
683
|
"value": {
|
|
705
684
|
"kind": "expression"
|
|
706
685
|
}
|
|
@@ -720,92 +699,92 @@
|
|
|
720
699
|
}
|
|
721
700
|
},
|
|
722
701
|
{
|
|
723
|
-
"name": "
|
|
724
|
-
"description": "
|
|
702
|
+
"name": ".flexGrow",
|
|
703
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
725
704
|
"value": {
|
|
726
705
|
"kind": "expression"
|
|
727
706
|
}
|
|
728
707
|
},
|
|
729
708
|
{
|
|
730
|
-
"name": "
|
|
731
|
-
"description": "
|
|
709
|
+
"name": ".footerPartName",
|
|
710
|
+
"description": "Custom part name for the footer cell.",
|
|
732
711
|
"value": {
|
|
733
712
|
"kind": "expression"
|
|
734
713
|
}
|
|
735
714
|
},
|
|
736
715
|
{
|
|
737
|
-
"name": "
|
|
738
|
-
"description": "
|
|
716
|
+
"name": ".footerRenderer",
|
|
717
|
+
"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.",
|
|
739
718
|
"value": {
|
|
740
719
|
"kind": "expression"
|
|
741
720
|
}
|
|
742
721
|
},
|
|
743
722
|
{
|
|
744
|
-
"name": "?
|
|
745
|
-
"description": "When
|
|
723
|
+
"name": "?frozen",
|
|
724
|
+
"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.",
|
|
746
725
|
"value": {
|
|
747
726
|
"kind": "expression"
|
|
748
727
|
}
|
|
749
728
|
},
|
|
750
729
|
{
|
|
751
|
-
"name": "?
|
|
752
|
-
"description": "When true, the
|
|
730
|
+
"name": "?frozenToEnd",
|
|
731
|
+
"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.",
|
|
753
732
|
"value": {
|
|
754
733
|
"kind": "expression"
|
|
755
734
|
}
|
|
756
735
|
},
|
|
757
736
|
{
|
|
758
|
-
"name": ".
|
|
759
|
-
"description": "
|
|
737
|
+
"name": ".header",
|
|
738
|
+
"description": "Text content to display in the header cell of the column.",
|
|
760
739
|
"value": {
|
|
761
740
|
"kind": "expression"
|
|
762
741
|
}
|
|
763
742
|
},
|
|
764
743
|
{
|
|
765
|
-
"name": ".
|
|
766
|
-
"description": "Custom part name for the
|
|
744
|
+
"name": ".headerPartName",
|
|
745
|
+
"description": "Custom part name for the header cell.",
|
|
767
746
|
"value": {
|
|
768
747
|
"kind": "expression"
|
|
769
748
|
}
|
|
770
749
|
},
|
|
771
750
|
{
|
|
772
|
-
"name": ".
|
|
773
|
-
"description": "Custom function for rendering the
|
|
751
|
+
"name": ".headerRenderer",
|
|
752
|
+
"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.",
|
|
774
753
|
"value": {
|
|
775
754
|
"kind": "expression"
|
|
776
755
|
}
|
|
777
756
|
},
|
|
778
757
|
{
|
|
779
|
-
"name": "
|
|
780
|
-
"description": "
|
|
758
|
+
"name": "?hidden",
|
|
759
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
781
760
|
"value": {
|
|
782
761
|
"kind": "expression"
|
|
783
762
|
}
|
|
784
763
|
},
|
|
785
764
|
{
|
|
786
|
-
"name": ".
|
|
787
|
-
"description": "
|
|
765
|
+
"name": ".path",
|
|
766
|
+
"description": "JS Path of the property in the item used as text content for the tree toggle.",
|
|
788
767
|
"value": {
|
|
789
768
|
"kind": "expression"
|
|
790
769
|
}
|
|
791
770
|
},
|
|
792
771
|
{
|
|
793
|
-
"name": ".
|
|
794
|
-
"description": "Custom function for rendering the
|
|
772
|
+
"name": ".renderer",
|
|
773
|
+
"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.",
|
|
795
774
|
"value": {
|
|
796
775
|
"kind": "expression"
|
|
797
776
|
}
|
|
798
777
|
},
|
|
799
778
|
{
|
|
800
|
-
"name": "
|
|
801
|
-
"description": "
|
|
779
|
+
"name": "?resizable",
|
|
780
|
+
"description": "When set to true, the column is user-resizable.",
|
|
802
781
|
"value": {
|
|
803
782
|
"kind": "expression"
|
|
804
783
|
}
|
|
805
784
|
},
|
|
806
785
|
{
|
|
807
|
-
"name": "
|
|
808
|
-
"description": "
|
|
786
|
+
"name": "?rowHeader",
|
|
787
|
+
"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.",
|
|
809
788
|
"value": {
|
|
810
789
|
"kind": "expression"
|
|
811
790
|
}
|
|
@@ -827,55 +806,62 @@
|
|
|
827
806
|
]
|
|
828
807
|
},
|
|
829
808
|
{
|
|
830
|
-
"name": "vaadin-grid",
|
|
831
|
-
"description": "`<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the\nthe grid can be populated by using renderer callback function.\n\n### Quick Start\n\nStart with an assigning an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha1/#/elements/vaadin-grid#property-items) property to visualize your data.\n\nUse the [`<vaadin-grid-column>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha1/#/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.2.0-alpha1/#/elements/vaadin-grid-column-group)\n- [`<vaadin-grid-filter>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha1/#/elements/vaadin-grid-filter)\n- [`<vaadin-grid-sorter>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha1/#/elements/vaadin-grid-sorter)\n- [`<vaadin-grid-selection-column>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha1/#/elements/vaadin-grid-selection-column)\n- [`<vaadin-grid-tree-toggle>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha1/#/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.2.0-alpha1/#/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.2.0-alpha1/#/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.",
|
|
809
|
+
"name": "vaadin-grid-tree-toggle",
|
|
810
|
+
"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`",
|
|
832
811
|
"extension": true,
|
|
833
812
|
"attributes": [
|
|
834
813
|
{
|
|
835
|
-
"name": "?
|
|
836
|
-
"description": "
|
|
814
|
+
"name": "?expanded",
|
|
815
|
+
"description": "Sublevel toggle state.",
|
|
837
816
|
"value": {
|
|
838
817
|
"kind": "expression"
|
|
839
818
|
}
|
|
840
819
|
},
|
|
841
820
|
{
|
|
842
|
-
"name": "?
|
|
843
|
-
"description": "
|
|
821
|
+
"name": "?leaf",
|
|
822
|
+
"description": "Hides the toggle icon and disables toggling a tree sublevel.",
|
|
844
823
|
"value": {
|
|
845
824
|
"kind": "expression"
|
|
846
825
|
}
|
|
847
826
|
},
|
|
848
827
|
{
|
|
849
|
-
"name": "
|
|
850
|
-
"description": "
|
|
828
|
+
"name": ".level",
|
|
829
|
+
"description": "Current level of the tree represented with a horizontal offset\nof the toggle button.",
|
|
851
830
|
"value": {
|
|
852
831
|
"kind": "expression"
|
|
853
832
|
}
|
|
854
833
|
},
|
|
855
834
|
{
|
|
856
|
-
"name": "
|
|
857
|
-
"description": "
|
|
835
|
+
"name": "@expanded-changed",
|
|
836
|
+
"description": "Fired when the `expanded` property changes.",
|
|
858
837
|
"value": {
|
|
859
838
|
"kind": "expression"
|
|
860
839
|
}
|
|
861
|
-
}
|
|
840
|
+
}
|
|
841
|
+
]
|
|
842
|
+
},
|
|
843
|
+
{
|
|
844
|
+
"name": "vaadin-grid",
|
|
845
|
+
"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.2.0-alpha10/#/elements/vaadin-grid#property-items) property to visualize your data.\n\nUse the [`<vaadin-grid-column>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/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.2.0-alpha10/#/elements/vaadin-grid-column-group)\n- [`<vaadin-grid-filter>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-grid-filter)\n- [`<vaadin-grid-sorter>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-grid-sorter)\n- [`<vaadin-grid-selection-column>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-grid-selection-column)\n- [`<vaadin-grid-tree-toggle>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/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.2.0-alpha10/#/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.2.0-alpha10/#/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.",
|
|
846
|
+
"extension": true,
|
|
847
|
+
"attributes": [
|
|
862
848
|
{
|
|
863
|
-
"name": "
|
|
864
|
-
"description": "
|
|
849
|
+
"name": ".accessibleName",
|
|
850
|
+
"description": "String used to label the grid to screen reader users.",
|
|
865
851
|
"value": {
|
|
866
852
|
"kind": "expression"
|
|
867
853
|
}
|
|
868
854
|
},
|
|
869
855
|
{
|
|
870
|
-
"name": ".
|
|
871
|
-
"description": "
|
|
856
|
+
"name": ".activeItem",
|
|
857
|
+
"description": "The item user has last interacted with. Turns to `null` after user deactivates\nthe item by re-interacting with the currently active item.",
|
|
872
858
|
"value": {
|
|
873
859
|
"kind": "expression"
|
|
874
860
|
}
|
|
875
861
|
},
|
|
876
862
|
{
|
|
877
|
-
"name": "
|
|
878
|
-
"description": "
|
|
863
|
+
"name": "?allRowsVisible",
|
|
864
|
+
"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.",
|
|
879
865
|
"value": {
|
|
880
866
|
"kind": "expression"
|
|
881
867
|
}
|
|
@@ -894,6 +880,13 @@
|
|
|
894
880
|
"kind": "expression"
|
|
895
881
|
}
|
|
896
882
|
},
|
|
883
|
+
{
|
|
884
|
+
"name": "?columnReorderingAllowed",
|
|
885
|
+
"description": "Set to true to allow column reordering.",
|
|
886
|
+
"value": {
|
|
887
|
+
"kind": "expression"
|
|
888
|
+
}
|
|
889
|
+
},
|
|
897
890
|
{
|
|
898
891
|
"name": ".dataProvider",
|
|
899
892
|
"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.",
|
|
@@ -908,6 +901,13 @@
|
|
|
908
901
|
"kind": "expression"
|
|
909
902
|
}
|
|
910
903
|
},
|
|
904
|
+
{
|
|
905
|
+
"name": "?disabled",
|
|
906
|
+
"description": "If true, the user cannot interact with this element.",
|
|
907
|
+
"value": {
|
|
908
|
+
"kind": "expression"
|
|
909
|
+
}
|
|
910
|
+
},
|
|
911
911
|
{
|
|
912
912
|
"name": ".dragFilter",
|
|
913
913
|
"description": "A function that filters dragging of specific grid rows. The return value should be false\nif dragging of the row should be disabled.\n\nReceives one argument:\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.",
|
|
@@ -964,6 +964,20 @@
|
|
|
964
964
|
"kind": "expression"
|
|
965
965
|
}
|
|
966
966
|
},
|
|
967
|
+
{
|
|
968
|
+
"name": "?multiSort",
|
|
969
|
+
"description": "When `true`, all `<vaadin-grid-sorter>` are applied for sorting.",
|
|
970
|
+
"value": {
|
|
971
|
+
"kind": "expression"
|
|
972
|
+
}
|
|
973
|
+
},
|
|
974
|
+
{
|
|
975
|
+
"name": "?multiSortOnShiftClick",
|
|
976
|
+
"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.",
|
|
977
|
+
"value": {
|
|
978
|
+
"kind": "expression"
|
|
979
|
+
}
|
|
980
|
+
},
|
|
967
981
|
{
|
|
968
982
|
"name": ".multiSortPriority",
|
|
969
983
|
"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\"`.",
|
|
@@ -985,6 +999,13 @@
|
|
|
985
999
|
"kind": "expression"
|
|
986
1000
|
}
|
|
987
1001
|
},
|
|
1002
|
+
{
|
|
1003
|
+
"name": "?rowsDraggable",
|
|
1004
|
+
"description": "Marks the grid's rows to be available for dragging.",
|
|
1005
|
+
"value": {
|
|
1006
|
+
"kind": "expression"
|
|
1007
|
+
}
|
|
1008
|
+
},
|
|
988
1009
|
{
|
|
989
1010
|
"name": ".selectedItems",
|
|
990
1011
|
"description": "An array that contains the selected items.",
|
|
@@ -1015,7 +1036,7 @@
|
|
|
1015
1036
|
},
|
|
1016
1037
|
{
|
|
1017
1038
|
"name": "@cell-focus",
|
|
1018
|
-
"description": "Fired when a cell is focused with click or keyboard navigation
|
|
1039
|
+
"description": "Fired when a cell is focused with click or keyboard navigation. Use the `context` property to read event details.",
|
|
1019
1040
|
"value": {
|
|
1020
1041
|
"kind": "expression"
|
|
1021
1042
|
}
|
|
@@ -1029,7 +1050,7 @@
|
|
|
1029
1050
|
},
|
|
1030
1051
|
{
|
|
1031
1052
|
"name": "@column-resize",
|
|
1032
|
-
"description": "Fired when
|
|
1053
|
+
"description": "Fired when the grid column resize is finished.",
|
|
1033
1054
|
"value": {
|
|
1034
1055
|
"kind": "expression"
|
|
1035
1056
|
}
|