|
13 | 13 |
|
14 | 14 | </div> |
15 | 15 |
|
16 | | -## Installation |
17 | | - |
18 | | -Install the components that you need from npm: |
19 | | - |
20 | | -```sh |
21 | | -npm install @vaadin/grid |
22 | | -``` |
23 | | - |
24 | | -## Usage |
25 | | - |
26 | | -[Live demo →](https://webcomponents.dev/edit/JZcKP3kkHcJIgiCaI818/www/index.html) |
27 | | - |
28 | | -Import the component's JavaScript module, use the component in your HTML, and control it with JavaScript: |
29 | | - |
30 | | -```html |
31 | | -<!DOCTYPE html> |
32 | | -<html> |
33 | | - <head> |
34 | | - <meta charset="utf-8" /> |
35 | | - <title>Vaadin example</title> |
36 | | - </head> |
37 | | - <body> |
38 | | - <!-- Use web components in your HTML like regular built-in elements. --> |
39 | | - <vaadin-grid column-reordering-allowed multi-sort> |
40 | | - <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column> |
41 | | - <vaadin-grid-sort-column width="9rem" path="firstName"></vaadin-grid-sort-column> |
42 | | - <vaadin-grid-sort-column width="9rem" path="lastName"></vaadin-grid-sort-column> |
43 | | - <vaadin-grid-column width="9rem" path="address.city"></vaadin-grid-column> |
44 | | - </vaadin-grid> |
45 | | - |
46 | | - <!-- Vaadin web components use standard JavaScript modules. --> |
47 | | - <script type="module"> |
48 | | - // Importing the following modules registers <vaadin-grid> and its column |
49 | | - // elements so that you can use them in this page. |
50 | | - import '@vaadin/grid/vaadin-grid.js'; |
51 | | - import '@vaadin/grid/vaadin-grid-selection-column.js'; |
52 | | - import '@vaadin/grid/vaadin-grid-sort-column.js'; |
53 | | -
|
54 | | - // Use component's properties to populate data. |
55 | | - const grid = document.querySelector('vaadin-grid'); |
56 | | - fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200') |
57 | | - .then((res) => res.json()) |
58 | | - .then((json) => (grid.items = json.result)); |
59 | | - </script> |
60 | | - </body> |
61 | | -</html> |
62 | | -``` |
63 | | - |
64 | | -Serve your HTML with a development server that supports bare module specifiers, such as [`@web/dev-server`](https://modern-web.dev/docs/dev-server/overview/): |
65 | | - |
66 | | -```sh |
67 | | -npm i -g @web/dev-server |
68 | | -web-dev-server --node-resolve --open |
69 | | -``` |
| 16 | +## Documentation |
| 17 | + |
| 18 | +Check out our [documentation and live examples](https://vaadin.com/docs/latest/components). |
70 | 19 |
|
71 | 20 | ## Components |
72 | 21 |
|
@@ -158,10 +107,6 @@ The components below are licensed under [Vaadin Commercial License and Service T |
158 | 107 | - Chrome (evergreen) for Android (4.4 or newer) |
159 | 108 | - Safari for iOS (15 or newer) |
160 | 109 |
|
161 | | -## Documentation |
162 | | - |
163 | | -Check out our [design system documentation](https://vaadin.com/docs/latest/components). |
164 | | - |
165 | 110 | ## Examples |
166 | 111 |
|
167 | 112 | Are you looking for an example project to get started? Visit [start.vaadin.com](https://start.vaadin.com/?preset=fusion) to create a Vaadin app. |
|
0 commit comments