@vaadin/grid 25.2.0-alpha8 → 25.2.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/custom-elements.json +53 -19
- package/package.json +12 -12
- package/src/styles/vaadin-grid-filter-base-styles.js +4 -0
- package/src/styles/vaadin-grid-sorter-base-styles.js +4 -0
- package/src/styles/vaadin-grid-tree-toggle-base-styles.js +4 -0
- package/src/vaadin-grid-a11y-mixin.js +2 -5
- package/src/vaadin-grid-active-item-mixin.js +0 -15
- package/src/vaadin-grid-array-data-provider-mixin.js +0 -3
- package/src/vaadin-grid-column-auto-width-mixin.js +1 -4
- package/src/vaadin-grid-column-group-mixin.js +0 -3
- package/src/vaadin-grid-column-group.d.ts +3 -1
- package/src/vaadin-grid-column-group.js +0 -1
- package/src/vaadin-grid-column-mixin.js +2 -10
- package/src/vaadin-grid-column-reordering-mixin.js +33 -14
- package/src/vaadin-grid-column-resizing-mixin.js +0 -11
- package/src/vaadin-grid-column.d.ts +5 -2
- package/src/vaadin-grid-column.js +0 -1
- package/src/vaadin-grid-data-provider-mixin.js +0 -15
- package/src/vaadin-grid-drag-and-drop-mixin.js +1 -44
- package/src/vaadin-grid-dynamic-columns-mixin.js +1 -4
- package/src/vaadin-grid-event-context-mixin.js +0 -3
- package/src/vaadin-grid-filter-column-mixin.js +0 -3
- package/src/vaadin-grid-filter-column.d.ts +3 -1
- package/src/vaadin-grid-filter-column.js +0 -1
- package/src/vaadin-grid-filter-element-mixin.js +1 -3
- package/src/vaadin-grid-filter-mixin.js +0 -3
- package/src/vaadin-grid-filter.js +0 -1
- package/src/vaadin-grid-helpers.js +1 -1
- package/src/vaadin-grid-keyboard-navigation-mixin.js +2 -13
- package/src/vaadin-grid-mixin.js +4 -26
- package/src/vaadin-grid-resize-mixin.js +0 -2
- package/src/vaadin-grid-row-details-mixin.js +0 -3
- package/src/vaadin-grid-scroll-mixin.js +0 -3
- package/src/vaadin-grid-selection-column-base-mixin.js +0 -2
- package/src/vaadin-grid-selection-column-mixin.js +0 -4
- package/src/vaadin-grid-selection-column.d.ts +3 -1
- package/src/vaadin-grid-selection-column.js +0 -1
- package/src/vaadin-grid-selection-mixin.js +10 -20
- package/src/vaadin-grid-sort-column-mixin.js +0 -3
- package/src/vaadin-grid-sort-column.d.ts +3 -1
- package/src/vaadin-grid-sort-column.js +0 -1
- package/src/vaadin-grid-sort-mixin.js +0 -3
- package/src/vaadin-grid-sorter-mixin.js +0 -2
- package/src/vaadin-grid-sorter.js +0 -3
- package/src/vaadin-grid-styling-mixin.d.ts +1 -1
- package/src/vaadin-grid-styling-mixin.js +0 -3
- package/src/vaadin-grid-tree-column-mixin.js +0 -3
- package/src/vaadin-grid-tree-column.d.ts +3 -1
- package/src/vaadin-grid-tree-column.js +0 -1
- package/src/vaadin-grid-tree-toggle-mixin.js +0 -3
- package/src/vaadin-grid-tree-toggle.js +0 -3
- package/src/vaadin-grid.d.ts +1 -1
- package/src/vaadin-grid.js +1 -3
- package/web-types.json +397 -769
- package/web-types.lit.json +247 -233
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-beta1",
|
|
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-beta1/#/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,92 +265,99 @@
|
|
|
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
|
},
|
|
337
330
|
{
|
|
338
|
-
"name": ".
|
|
339
|
-
"description": "
|
|
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.",
|
|
340
333
|
"value": {
|
|
341
334
|
"kind": "expression"
|
|
342
335
|
}
|
|
343
|
-
}
|
|
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": [
|
|
344
344
|
{
|
|
345
|
-
"name": ".
|
|
346
|
-
"description": "
|
|
345
|
+
"name": ".path",
|
|
346
|
+
"description": "JS Path of the property in the item used for filtering the data.",
|
|
347
347
|
"value": {
|
|
348
348
|
"kind": "expression"
|
|
349
349
|
}
|
|
350
350
|
},
|
|
351
351
|
{
|
|
352
|
-
"name": ".
|
|
353
|
-
"description": "
|
|
352
|
+
"name": ".value",
|
|
353
|
+
"description": "Current filter value.",
|
|
354
354
|
"value": {
|
|
355
355
|
"kind": "expression"
|
|
356
356
|
}
|
|
357
357
|
},
|
|
358
358
|
{
|
|
359
|
-
"name": "
|
|
360
|
-
"description": "
|
|
359
|
+
"name": "@value-changed",
|
|
360
|
+
"description": "Fired when the `value` property changes.",
|
|
361
361
|
"value": {
|
|
362
362
|
"kind": "expression"
|
|
363
363
|
}
|
|
@@ -366,7 +366,7 @@
|
|
|
366
366
|
},
|
|
367
367
|
{
|
|
368
368
|
"name": "vaadin-grid-selection-column",
|
|
369
|
-
"description": "`<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`\nthat provides default renderers and functionality for item selection.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>\n\n <vaadin-grid-column>\n ...\n```\n\nBy default the selection column displays `<vaadin-checkbox>` elements in the\ncolumn cells. The checkboxes in the body rows toggle selection of the corresponding row items.\n\nWhen the grid data is provided as an array of [`items`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-
|
|
369
|
+
"description": "`<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`\nthat provides default renderers and functionality for item selection.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>\n\n <vaadin-grid-column>\n ...\n```\n\nBy default the selection column displays `<vaadin-checkbox>` elements in the\ncolumn cells. The checkboxes in the body rows toggle selection of the corresponding row items.\n\nWhen the grid data is provided as an array of [`items`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-beta1/#/elements/vaadin-grid#property-items),\nthe column header gets an additional checkbox that can be used for toggling\nselection for all the items at once.\n\n__The default content can also be overridden__",
|
|
370
370
|
"extension": true,
|
|
371
371
|
"attributes": [
|
|
372
372
|
{
|
|
@@ -391,99 +391,99 @@
|
|
|
391
391
|
}
|
|
392
392
|
},
|
|
393
393
|
{
|
|
394
|
-
"name": "
|
|
395
|
-
"description": "
|
|
394
|
+
"name": ".flexGrow",
|
|
395
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
396
396
|
"value": {
|
|
397
397
|
"kind": "expression"
|
|
398
398
|
}
|
|
399
399
|
},
|
|
400
400
|
{
|
|
401
|
-
"name": "
|
|
402
|
-
"description": "
|
|
401
|
+
"name": ".footerPartName",
|
|
402
|
+
"description": "Custom part name for the footer cell.",
|
|
403
403
|
"value": {
|
|
404
404
|
"kind": "expression"
|
|
405
405
|
}
|
|
406
406
|
},
|
|
407
407
|
{
|
|
408
|
-
"name": "
|
|
409
|
-
"description": "
|
|
408
|
+
"name": ".footerRenderer",
|
|
409
|
+
"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
410
|
"value": {
|
|
411
411
|
"kind": "expression"
|
|
412
412
|
}
|
|
413
413
|
},
|
|
414
414
|
{
|
|
415
|
-
"name": "?
|
|
416
|
-
"description": "When
|
|
415
|
+
"name": "?frozen",
|
|
416
|
+
"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
417
|
"value": {
|
|
418
418
|
"kind": "expression"
|
|
419
419
|
}
|
|
420
420
|
},
|
|
421
421
|
{
|
|
422
|
-
"name": "?
|
|
423
|
-
"description": "When true, the
|
|
422
|
+
"name": "?frozenToEnd",
|
|
423
|
+
"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
424
|
"value": {
|
|
425
425
|
"kind": "expression"
|
|
426
426
|
}
|
|
427
427
|
},
|
|
428
428
|
{
|
|
429
|
-
"name": "
|
|
430
|
-
"description": "
|
|
429
|
+
"name": ".header",
|
|
430
|
+
"description": "Text content to display in the header cell of the column.",
|
|
431
431
|
"value": {
|
|
432
432
|
"kind": "expression"
|
|
433
433
|
}
|
|
434
434
|
},
|
|
435
435
|
{
|
|
436
|
-
"name": ".
|
|
437
|
-
"description": "
|
|
436
|
+
"name": ".headerPartName",
|
|
437
|
+
"description": "Custom part name for the header cell.",
|
|
438
438
|
"value": {
|
|
439
439
|
"kind": "expression"
|
|
440
440
|
}
|
|
441
441
|
},
|
|
442
442
|
{
|
|
443
|
-
"name": ".
|
|
444
|
-
"description": "Custom
|
|
443
|
+
"name": ".headerRenderer",
|
|
444
|
+
"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
445
|
"value": {
|
|
446
446
|
"kind": "expression"
|
|
447
447
|
}
|
|
448
448
|
},
|
|
449
449
|
{
|
|
450
|
-
"name": "
|
|
451
|
-
"description": "
|
|
450
|
+
"name": "?hidden",
|
|
451
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
452
452
|
"value": {
|
|
453
453
|
"kind": "expression"
|
|
454
454
|
}
|
|
455
455
|
},
|
|
456
456
|
{
|
|
457
|
-
"name": ".
|
|
458
|
-
"description": "
|
|
457
|
+
"name": ".path",
|
|
458
|
+
"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
459
|
"value": {
|
|
460
460
|
"kind": "expression"
|
|
461
461
|
}
|
|
462
462
|
},
|
|
463
463
|
{
|
|
464
|
-
"name": ".
|
|
465
|
-
"description": "Custom
|
|
464
|
+
"name": ".renderer",
|
|
465
|
+
"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
466
|
"value": {
|
|
467
467
|
"kind": "expression"
|
|
468
468
|
}
|
|
469
469
|
},
|
|
470
470
|
{
|
|
471
|
-
"name": "
|
|
472
|
-
"description": "
|
|
471
|
+
"name": "?resizable",
|
|
472
|
+
"description": "When set to true, the column is user-resizable.",
|
|
473
473
|
"value": {
|
|
474
474
|
"kind": "expression"
|
|
475
475
|
}
|
|
476
476
|
},
|
|
477
477
|
{
|
|
478
|
-
"name": "
|
|
479
|
-
"description": "
|
|
478
|
+
"name": "?rowHeader",
|
|
479
|
+
"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
480
|
"value": {
|
|
481
481
|
"kind": "expression"
|
|
482
482
|
}
|
|
483
483
|
},
|
|
484
484
|
{
|
|
485
|
-
"name": "
|
|
486
|
-
"description": "
|
|
485
|
+
"name": "?selectAll",
|
|
486
|
+
"description": "When true, all the items are selected.",
|
|
487
487
|
"value": {
|
|
488
488
|
"kind": "expression"
|
|
489
489
|
}
|
|
@@ -511,34 +511,6 @@
|
|
|
511
511
|
}
|
|
512
512
|
]
|
|
513
513
|
},
|
|
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
514
|
{
|
|
543
515
|
"name": "vaadin-grid-sort-column",
|
|
544
516
|
"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 +524,99 @@
|
|
|
552
524
|
}
|
|
553
525
|
},
|
|
554
526
|
{
|
|
555
|
-
"name": "
|
|
556
|
-
"description": "
|
|
527
|
+
"name": ".direction",
|
|
528
|
+
"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
529
|
"value": {
|
|
558
530
|
"kind": "expression"
|
|
559
531
|
}
|
|
560
532
|
},
|
|
561
533
|
{
|
|
562
|
-
"name": "
|
|
563
|
-
"description": "
|
|
534
|
+
"name": ".flexGrow",
|
|
535
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
564
536
|
"value": {
|
|
565
537
|
"kind": "expression"
|
|
566
538
|
}
|
|
567
539
|
},
|
|
568
540
|
{
|
|
569
|
-
"name": "
|
|
570
|
-
"description": "
|
|
541
|
+
"name": ".footerPartName",
|
|
542
|
+
"description": "Custom part name for the footer cell.",
|
|
571
543
|
"value": {
|
|
572
544
|
"kind": "expression"
|
|
573
545
|
}
|
|
574
546
|
},
|
|
575
547
|
{
|
|
576
|
-
"name": "
|
|
577
|
-
"description": "
|
|
548
|
+
"name": ".footerRenderer",
|
|
549
|
+
"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
550
|
"value": {
|
|
579
551
|
"kind": "expression"
|
|
580
552
|
}
|
|
581
553
|
},
|
|
582
554
|
{
|
|
583
|
-
"name": "?
|
|
584
|
-
"description": "When true, the
|
|
555
|
+
"name": "?frozen",
|
|
556
|
+
"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
557
|
"value": {
|
|
586
558
|
"kind": "expression"
|
|
587
559
|
}
|
|
588
560
|
},
|
|
589
561
|
{
|
|
590
|
-
"name": "
|
|
591
|
-
"description": "
|
|
562
|
+
"name": "?frozenToEnd",
|
|
563
|
+
"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
564
|
"value": {
|
|
593
565
|
"kind": "expression"
|
|
594
566
|
}
|
|
595
567
|
},
|
|
596
568
|
{
|
|
597
|
-
"name": ".
|
|
598
|
-
"description": "
|
|
569
|
+
"name": ".header",
|
|
570
|
+
"description": "Text content to display in the header cell of the column.",
|
|
599
571
|
"value": {
|
|
600
572
|
"kind": "expression"
|
|
601
573
|
}
|
|
602
574
|
},
|
|
603
575
|
{
|
|
604
|
-
"name": ".
|
|
605
|
-
"description": "Custom part name for the
|
|
576
|
+
"name": ".headerPartName",
|
|
577
|
+
"description": "Custom part name for the header cell.",
|
|
606
578
|
"value": {
|
|
607
579
|
"kind": "expression"
|
|
608
580
|
}
|
|
609
581
|
},
|
|
610
582
|
{
|
|
611
|
-
"name": ".
|
|
612
|
-
"description": "Custom function for rendering the
|
|
583
|
+
"name": ".headerRenderer",
|
|
584
|
+
"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
585
|
"value": {
|
|
614
586
|
"kind": "expression"
|
|
615
587
|
}
|
|
616
588
|
},
|
|
617
589
|
{
|
|
618
|
-
"name": "
|
|
619
|
-
"description": "
|
|
590
|
+
"name": "?hidden",
|
|
591
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
620
592
|
"value": {
|
|
621
593
|
"kind": "expression"
|
|
622
594
|
}
|
|
623
595
|
},
|
|
624
596
|
{
|
|
625
|
-
"name": ".
|
|
626
|
-
"description": "
|
|
597
|
+
"name": ".path",
|
|
598
|
+
"description": "JS Path of the property in the item used for sorting the data.",
|
|
627
599
|
"value": {
|
|
628
600
|
"kind": "expression"
|
|
629
601
|
}
|
|
630
602
|
},
|
|
631
603
|
{
|
|
632
|
-
"name": ".
|
|
633
|
-
"description": "Custom function for rendering the
|
|
604
|
+
"name": ".renderer",
|
|
605
|
+
"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
606
|
"value": {
|
|
635
607
|
"kind": "expression"
|
|
636
608
|
}
|
|
637
609
|
},
|
|
638
610
|
{
|
|
639
|
-
"name": "
|
|
640
|
-
"description": "
|
|
611
|
+
"name": "?resizable",
|
|
612
|
+
"description": "When set to true, the column is user-resizable.",
|
|
641
613
|
"value": {
|
|
642
614
|
"kind": "expression"
|
|
643
615
|
}
|
|
644
616
|
},
|
|
645
617
|
{
|
|
646
|
-
"name": "
|
|
647
|
-
"description": "
|
|
618
|
+
"name": "?rowHeader",
|
|
619
|
+
"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
620
|
"value": {
|
|
649
621
|
"kind": "expression"
|
|
650
622
|
}
|
|
@@ -673,34 +645,34 @@
|
|
|
673
645
|
]
|
|
674
646
|
},
|
|
675
647
|
{
|
|
676
|
-
"name": "vaadin-grid-
|
|
677
|
-
"description": "`<vaadin-grid-
|
|
648
|
+
"name": "vaadin-grid-sorter",
|
|
649
|
+
"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
650
|
"extension": true,
|
|
679
651
|
"attributes": [
|
|
680
652
|
{
|
|
681
|
-
"name": "
|
|
682
|
-
"description": "
|
|
653
|
+
"name": ".direction",
|
|
654
|
+
"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
655
|
"value": {
|
|
684
656
|
"kind": "expression"
|
|
685
657
|
}
|
|
686
658
|
},
|
|
687
659
|
{
|
|
688
|
-
"name": "
|
|
689
|
-
"description": "
|
|
660
|
+
"name": ".path",
|
|
661
|
+
"description": "JS Path of the property in the item used for sorting the data.",
|
|
690
662
|
"value": {
|
|
691
663
|
"kind": "expression"
|
|
692
664
|
}
|
|
693
665
|
},
|
|
694
666
|
{
|
|
695
|
-
"name": "
|
|
696
|
-
"description": "
|
|
667
|
+
"name": "@direction-changed",
|
|
668
|
+
"description": "Fired when the `direction` property changes.",
|
|
697
669
|
"value": {
|
|
698
670
|
"kind": "expression"
|
|
699
671
|
}
|
|
700
672
|
},
|
|
701
673
|
{
|
|
702
|
-
"name": "@
|
|
703
|
-
"description": "Fired when the `
|
|
674
|
+
"name": "@sorter-changed",
|
|
675
|
+
"description": "Fired when the `path` or `direction` property changes.",
|
|
704
676
|
"value": {
|
|
705
677
|
"kind": "expression"
|
|
706
678
|
}
|
|
@@ -720,92 +692,92 @@
|
|
|
720
692
|
}
|
|
721
693
|
},
|
|
722
694
|
{
|
|
723
|
-
"name": "
|
|
724
|
-
"description": "
|
|
695
|
+
"name": ".flexGrow",
|
|
696
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
725
697
|
"value": {
|
|
726
698
|
"kind": "expression"
|
|
727
699
|
}
|
|
728
700
|
},
|
|
729
701
|
{
|
|
730
|
-
"name": "
|
|
731
|
-
"description": "
|
|
702
|
+
"name": ".footerPartName",
|
|
703
|
+
"description": "Custom part name for the footer cell.",
|
|
732
704
|
"value": {
|
|
733
705
|
"kind": "expression"
|
|
734
706
|
}
|
|
735
707
|
},
|
|
736
708
|
{
|
|
737
|
-
"name": "
|
|
738
|
-
"description": "
|
|
709
|
+
"name": ".footerRenderer",
|
|
710
|
+
"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
711
|
"value": {
|
|
740
712
|
"kind": "expression"
|
|
741
713
|
}
|
|
742
714
|
},
|
|
743
715
|
{
|
|
744
|
-
"name": "?
|
|
745
|
-
"description": "When
|
|
716
|
+
"name": "?frozen",
|
|
717
|
+
"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
718
|
"value": {
|
|
747
719
|
"kind": "expression"
|
|
748
720
|
}
|
|
749
721
|
},
|
|
750
722
|
{
|
|
751
|
-
"name": "?
|
|
752
|
-
"description": "When true, the
|
|
723
|
+
"name": "?frozenToEnd",
|
|
724
|
+
"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
725
|
"value": {
|
|
754
726
|
"kind": "expression"
|
|
755
727
|
}
|
|
756
728
|
},
|
|
757
729
|
{
|
|
758
|
-
"name": ".
|
|
759
|
-
"description": "
|
|
730
|
+
"name": ".header",
|
|
731
|
+
"description": "Text content to display in the header cell of the column.",
|
|
760
732
|
"value": {
|
|
761
733
|
"kind": "expression"
|
|
762
734
|
}
|
|
763
735
|
},
|
|
764
736
|
{
|
|
765
|
-
"name": ".
|
|
766
|
-
"description": "Custom part name for the
|
|
737
|
+
"name": ".headerPartName",
|
|
738
|
+
"description": "Custom part name for the header cell.",
|
|
767
739
|
"value": {
|
|
768
740
|
"kind": "expression"
|
|
769
741
|
}
|
|
770
742
|
},
|
|
771
743
|
{
|
|
772
|
-
"name": ".
|
|
773
|
-
"description": "Custom function for rendering the
|
|
744
|
+
"name": ".headerRenderer",
|
|
745
|
+
"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
746
|
"value": {
|
|
775
747
|
"kind": "expression"
|
|
776
748
|
}
|
|
777
749
|
},
|
|
778
750
|
{
|
|
779
|
-
"name": "
|
|
780
|
-
"description": "
|
|
751
|
+
"name": "?hidden",
|
|
752
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
781
753
|
"value": {
|
|
782
754
|
"kind": "expression"
|
|
783
755
|
}
|
|
784
756
|
},
|
|
785
757
|
{
|
|
786
|
-
"name": ".
|
|
787
|
-
"description": "
|
|
758
|
+
"name": ".path",
|
|
759
|
+
"description": "JS Path of the property in the item used as text content for the tree toggle.",
|
|
788
760
|
"value": {
|
|
789
761
|
"kind": "expression"
|
|
790
762
|
}
|
|
791
763
|
},
|
|
792
764
|
{
|
|
793
|
-
"name": ".
|
|
794
|
-
"description": "Custom function for rendering the
|
|
765
|
+
"name": ".renderer",
|
|
766
|
+
"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
767
|
"value": {
|
|
796
768
|
"kind": "expression"
|
|
797
769
|
}
|
|
798
770
|
},
|
|
799
771
|
{
|
|
800
|
-
"name": "
|
|
801
|
-
"description": "
|
|
772
|
+
"name": "?resizable",
|
|
773
|
+
"description": "When set to true, the column is user-resizable.",
|
|
802
774
|
"value": {
|
|
803
775
|
"kind": "expression"
|
|
804
776
|
}
|
|
805
777
|
},
|
|
806
778
|
{
|
|
807
|
-
"name": "
|
|
808
|
-
"description": "
|
|
779
|
+
"name": "?rowHeader",
|
|
780
|
+
"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
781
|
"value": {
|
|
810
782
|
"kind": "expression"
|
|
811
783
|
}
|
|
@@ -827,55 +799,62 @@
|
|
|
827
799
|
]
|
|
828
800
|
},
|
|
829
801
|
{
|
|
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-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.2.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.2.0-alpha8/#/elements/vaadin-grid-column-group)\n- [`<vaadin-grid-filter>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha8/#/elements/vaadin-grid-filter)\n- [`<vaadin-grid-sorter>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha8/#/elements/vaadin-grid-sorter)\n- [`<vaadin-grid-selection-column>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha8/#/elements/vaadin-grid-selection-column)\n- [`<vaadin-grid-tree-toggle>`](https://cdn.vaadin.com/vaadin-web-components/25.2.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.2.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.2.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.",
|
|
802
|
+
"name": "vaadin-grid-tree-toggle",
|
|
803
|
+
"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
804
|
"extension": true,
|
|
833
805
|
"attributes": [
|
|
834
806
|
{
|
|
835
|
-
"name": "?
|
|
836
|
-
"description": "
|
|
807
|
+
"name": "?expanded",
|
|
808
|
+
"description": "Sublevel toggle state.",
|
|
837
809
|
"value": {
|
|
838
810
|
"kind": "expression"
|
|
839
811
|
}
|
|
840
812
|
},
|
|
841
813
|
{
|
|
842
|
-
"name": "?
|
|
843
|
-
"description": "
|
|
814
|
+
"name": "?leaf",
|
|
815
|
+
"description": "Hides the toggle icon and disables toggling a tree sublevel.",
|
|
844
816
|
"value": {
|
|
845
817
|
"kind": "expression"
|
|
846
818
|
}
|
|
847
819
|
},
|
|
848
820
|
{
|
|
849
|
-
"name": "
|
|
850
|
-
"description": "
|
|
821
|
+
"name": ".level",
|
|
822
|
+
"description": "Current level of the tree represented with a horizontal offset\nof the toggle button.",
|
|
851
823
|
"value": {
|
|
852
824
|
"kind": "expression"
|
|
853
825
|
}
|
|
854
826
|
},
|
|
855
827
|
{
|
|
856
|
-
"name": "
|
|
857
|
-
"description": "
|
|
828
|
+
"name": "@expanded-changed",
|
|
829
|
+
"description": "Fired when the `expanded` property changes.",
|
|
858
830
|
"value": {
|
|
859
831
|
"kind": "expression"
|
|
860
832
|
}
|
|
861
|
-
}
|
|
833
|
+
}
|
|
834
|
+
]
|
|
835
|
+
},
|
|
836
|
+
{
|
|
837
|
+
"name": "vaadin-grid",
|
|
838
|
+
"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-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.2.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.2.0-beta1/#/elements/vaadin-grid-column-group)\n- [`<vaadin-grid-filter>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-beta1/#/elements/vaadin-grid-filter)\n- [`<vaadin-grid-sorter>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-beta1/#/elements/vaadin-grid-sorter)\n- [`<vaadin-grid-selection-column>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-beta1/#/elements/vaadin-grid-selection-column)\n- [`<vaadin-grid-tree-toggle>`](https://cdn.vaadin.com/vaadin-web-components/25.2.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.2.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.2.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.",
|
|
839
|
+
"extension": true,
|
|
840
|
+
"attributes": [
|
|
862
841
|
{
|
|
863
|
-
"name": "
|
|
864
|
-
"description": "
|
|
842
|
+
"name": ".accessibleName",
|
|
843
|
+
"description": "String used to label the grid to screen reader users.",
|
|
865
844
|
"value": {
|
|
866
845
|
"kind": "expression"
|
|
867
846
|
}
|
|
868
847
|
},
|
|
869
848
|
{
|
|
870
|
-
"name": ".
|
|
871
|
-
"description": "
|
|
849
|
+
"name": ".activeItem",
|
|
850
|
+
"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
851
|
"value": {
|
|
873
852
|
"kind": "expression"
|
|
874
853
|
}
|
|
875
854
|
},
|
|
876
855
|
{
|
|
877
|
-
"name": "
|
|
878
|
-
"description": "
|
|
856
|
+
"name": "?allRowsVisible",
|
|
857
|
+
"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
858
|
"value": {
|
|
880
859
|
"kind": "expression"
|
|
881
860
|
}
|
|
@@ -894,6 +873,13 @@
|
|
|
894
873
|
"kind": "expression"
|
|
895
874
|
}
|
|
896
875
|
},
|
|
876
|
+
{
|
|
877
|
+
"name": "?columnReorderingAllowed",
|
|
878
|
+
"description": "Set to true to allow column reordering.",
|
|
879
|
+
"value": {
|
|
880
|
+
"kind": "expression"
|
|
881
|
+
}
|
|
882
|
+
},
|
|
897
883
|
{
|
|
898
884
|
"name": ".dataProvider",
|
|
899
885
|
"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 +894,13 @@
|
|
|
908
894
|
"kind": "expression"
|
|
909
895
|
}
|
|
910
896
|
},
|
|
897
|
+
{
|
|
898
|
+
"name": "?disabled",
|
|
899
|
+
"description": "If true, the user cannot interact with this element.",
|
|
900
|
+
"value": {
|
|
901
|
+
"kind": "expression"
|
|
902
|
+
}
|
|
903
|
+
},
|
|
911
904
|
{
|
|
912
905
|
"name": ".dragFilter",
|
|
913
906
|
"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 +957,20 @@
|
|
|
964
957
|
"kind": "expression"
|
|
965
958
|
}
|
|
966
959
|
},
|
|
960
|
+
{
|
|
961
|
+
"name": "?multiSort",
|
|
962
|
+
"description": "When `true`, all `<vaadin-grid-sorter>` are applied for sorting.",
|
|
963
|
+
"value": {
|
|
964
|
+
"kind": "expression"
|
|
965
|
+
}
|
|
966
|
+
},
|
|
967
|
+
{
|
|
968
|
+
"name": "?multiSortOnShiftClick",
|
|
969
|
+
"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.",
|
|
970
|
+
"value": {
|
|
971
|
+
"kind": "expression"
|
|
972
|
+
}
|
|
973
|
+
},
|
|
967
974
|
{
|
|
968
975
|
"name": ".multiSortPriority",
|
|
969
976
|
"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 +992,13 @@
|
|
|
985
992
|
"kind": "expression"
|
|
986
993
|
}
|
|
987
994
|
},
|
|
995
|
+
{
|
|
996
|
+
"name": "?rowsDraggable",
|
|
997
|
+
"description": "Marks the grid's rows to be available for dragging.",
|
|
998
|
+
"value": {
|
|
999
|
+
"kind": "expression"
|
|
1000
|
+
}
|
|
1001
|
+
},
|
|
988
1002
|
{
|
|
989
1003
|
"name": ".selectedItems",
|
|
990
1004
|
"description": "An array that contains the selected items.",
|
|
@@ -1015,7 +1029,7 @@
|
|
|
1015
1029
|
},
|
|
1016
1030
|
{
|
|
1017
1031
|
"name": "@cell-focus",
|
|
1018
|
-
"description": "Fired when a cell is focused with click or keyboard navigation
|
|
1032
|
+
"description": "Fired when a cell is focused with click or keyboard navigation. Use the `context` property to read event details.",
|
|
1019
1033
|
"value": {
|
|
1020
1034
|
"kind": "expression"
|
|
1021
1035
|
}
|
|
@@ -1029,7 +1043,7 @@
|
|
|
1029
1043
|
},
|
|
1030
1044
|
{
|
|
1031
1045
|
"name": "@column-resize",
|
|
1032
|
-
"description": "Fired when
|
|
1046
|
+
"description": "Fired when the grid column resize is finished.",
|
|
1033
1047
|
"value": {
|
|
1034
1048
|
"kind": "expression"
|
|
1035
1049
|
}
|