@vaadin/vaadin-grid 21.0.0-beta2 → 21.0.2
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/README.md +24 -68
- package/package.json +11 -11
- package/src/vaadin-grid-tree-column.js +2 -1
- package/src/vaadin-grid.js +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
[](https://badge.fury.io/js/%40vaadin%2Fvaadin-grid)
|
|
2
|
-
[](https://www.webcomponents.org/element/vaadin/vaadin-grid)
|
|
3
|
-
[](https://travis-ci.org/vaadin/vaadin-grid)
|
|
4
|
-
[](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
|
|
5
|
-
|
|
6
|
-
[](https://vaadin.com/directory/component/vaadinvaadin-grid)
|
|
7
|
-
[](https://vaadin.com/directory/component/vaadinvaadin-grid)
|
|
8
|
-
|
|
9
1
|
# <vaadin-grid>
|
|
10
2
|
|
|
11
3
|
[Live Demo ↗](https://vaadin.com/components/vaadin-grid/html-examples)
|
|
@@ -14,26 +6,30 @@
|
|
|
14
6
|
|
|
15
7
|
[<vaadin-grid>](https://vaadin.com/components/vaadin-grid) is a free, high quality data grid / data table Web Component, part of the [Vaadin components](https://vaadin.com/components).
|
|
16
8
|
|
|
9
|
+
[](https://www.npmjs.com/package/@vaadin/vaadin-grid)
|
|
10
|
+
[](https://vaadin.com/directory/component/vaadinvaadin-grid)
|
|
11
|
+
[](https://discord.gg/PHmkCKC)
|
|
12
|
+
|
|
17
13
|
```html
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
14
|
+
<vaadin-grid theme="row-dividers" column-reordering-allowed multi-sort>
|
|
15
|
+
<vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column>
|
|
16
|
+
<vaadin-grid-sort-column width="9em" path="firstName"></vaadin-grid-sort-column>
|
|
17
|
+
<vaadin-grid-sort-column width="9em" path="lastName"></vaadin-grid-sort-column>
|
|
18
|
+
<vaadin-grid-column id="addresscolumn" width="15em" flex-grow="2" header="Address"></vaadin-grid-column>
|
|
19
|
+
</vaadin-grid>
|
|
20
|
+
|
|
21
|
+
<script>
|
|
22
|
+
// Customize the "Address" column's renderer
|
|
23
|
+
document.querySelector('#addresscolumn').renderer = (root, grid, model) => {
|
|
24
|
+
root.textContent = `${model.item.address.street}, ${model.item.address.city}`;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// Populate the grid with data
|
|
28
|
+
const grid = document.querySelector('vaadin-grid');
|
|
29
|
+
fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200')
|
|
30
|
+
.then((res) => res.json())
|
|
31
|
+
.then((json) => (grid.items = json.result));
|
|
32
|
+
</script>
|
|
37
33
|
```
|
|
38
34
|
|
|
39
35
|
[<img src="https://raw.githubusercontent.com/vaadin/vaadin-grid/master/screenshot.png" alt="Screenshot of vaadin-grid, using the default Lumo theme">](https://vaadin.com/components/vaadin-grid)
|
|
@@ -72,49 +68,9 @@ To use the Material theme, import the correspondent file from the `theme/materia
|
|
|
72
68
|
|
|
73
69
|
`vaadin-grid.js`
|
|
74
70
|
|
|
75
|
-
|
|
76
|
-
## Running demos and tests in a browser
|
|
77
|
-
|
|
78
|
-
1. Fork the `vaadin-grid` repository and clone it locally.
|
|
79
|
-
|
|
80
|
-
1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
|
|
81
|
-
|
|
82
|
-
1. Make sure you have [npm](https://www.npmjs.com/) installed.
|
|
83
|
-
|
|
84
|
-
1. When in the `vaadin-grid` directory, run `npm install` to install dependencies.
|
|
85
|
-
|
|
86
|
-
1. Run `npm start`, browser will automatically open the component API documentation.
|
|
87
|
-
|
|
88
|
-
1. You can also open visual tests, for example:
|
|
89
|
-
|
|
90
|
-
- http://127.0.0.1:3000/test/visual/sorting.html
|
|
91
|
-
|
|
92
|
-
## Running tests from the command line
|
|
93
|
-
|
|
94
|
-
1. When in the `vaadin-upload` directory, run `npm test`
|
|
95
|
-
|
|
96
|
-
## Running tests from the command line
|
|
97
|
-
|
|
98
|
-
1. When in the `vaadin-grid` directory, run `polymer test`
|
|
99
|
-
|
|
100
|
-
## Debugging tests in the browser
|
|
101
|
-
|
|
102
|
-
1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.
|
|
103
|
-
|
|
104
|
-
## Following the coding style
|
|
105
|
-
|
|
106
|
-
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
## Big Thanks
|
|
110
|
-
|
|
111
|
-
Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com).
|
|
112
|
-
|
|
113
|
-
|
|
114
71
|
## Contributing
|
|
115
72
|
|
|
116
|
-
|
|
117
|
-
|
|
73
|
+
Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
|
|
118
74
|
|
|
119
75
|
## License
|
|
120
76
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/vaadin-grid",
|
|
3
|
-
"version": "21.0.
|
|
3
|
+
"version": "21.0.2",
|
|
4
4
|
"description": "A free, flexible and high-quality Web Component for showing large amounts of tabular data",
|
|
5
5
|
"main": "vaadin-grid.js",
|
|
6
6
|
"module": "vaadin-grid.js",
|
|
@@ -32,23 +32,23 @@
|
|
|
32
32
|
],
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@polymer/polymer": "^3.0.0",
|
|
35
|
-
"@vaadin/vaadin-checkbox": "^21.0.
|
|
36
|
-
"@vaadin/vaadin-element-mixin": "^21.0.
|
|
37
|
-
"@vaadin/vaadin-lumo-styles": "^21.0.
|
|
38
|
-
"@vaadin/vaadin-material-styles": "^21.0.
|
|
39
|
-
"@vaadin/vaadin-text-field": "^21.0.
|
|
40
|
-
"@vaadin/vaadin-themable-mixin": "^21.0.
|
|
41
|
-
"@vaadin/vaadin-virtual-list": "^21.0.
|
|
35
|
+
"@vaadin/vaadin-checkbox": "^21.0.2",
|
|
36
|
+
"@vaadin/vaadin-element-mixin": "^21.0.2",
|
|
37
|
+
"@vaadin/vaadin-lumo-styles": "^21.0.2",
|
|
38
|
+
"@vaadin/vaadin-material-styles": "^21.0.2",
|
|
39
|
+
"@vaadin/vaadin-text-field": "^21.0.2",
|
|
40
|
+
"@vaadin/vaadin-themable-mixin": "^21.0.2",
|
|
41
|
+
"@vaadin/vaadin-virtual-list": "^21.0.2"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@esm-bundle/chai": "^4.1.5",
|
|
45
45
|
"@vaadin/testing-helpers": "^0.2.1",
|
|
46
|
-
"@vaadin/vaadin-template-renderer": "^21.0.
|
|
47
|
-
"lit": "^2.0.0
|
|
46
|
+
"@vaadin/vaadin-template-renderer": "^21.0.2",
|
|
47
|
+
"lit": "^2.0.0",
|
|
48
48
|
"sinon": "^9.2.0"
|
|
49
49
|
},
|
|
50
50
|
"publishConfig": {
|
|
51
51
|
"access": "public"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "6d0571bce4ecc084a9c40b9d72d7c7cecaeae196"
|
|
54
54
|
}
|
|
@@ -57,7 +57,7 @@ class GridTreeColumnElement extends GridColumnElement {
|
|
|
57
57
|
*
|
|
58
58
|
* @private
|
|
59
59
|
*/
|
|
60
|
-
__defaultRenderer(root, _column, { item, expanded }) {
|
|
60
|
+
__defaultRenderer(root, _column, { item, expanded, level }) {
|
|
61
61
|
let toggle = root.firstElementChild;
|
|
62
62
|
if (!toggle) {
|
|
63
63
|
toggle = document.createElement('vaadin-grid-tree-toggle');
|
|
@@ -70,6 +70,7 @@ class GridTreeColumnElement extends GridColumnElement {
|
|
|
70
70
|
toggle.expanded = expanded;
|
|
71
71
|
toggle.leaf = this.__isLeafItem(item, this.itemHasChildrenPath);
|
|
72
72
|
toggle.textContent = this.__getToggleContent(this.path, item);
|
|
73
|
+
toggle.level = level;
|
|
73
74
|
}
|
|
74
75
|
|
|
75
76
|
/**
|