</head>
<body>
- <vaadin-grid selection-mode="multi">
- <table>
- <!-- Define the columns and their mapping to data properties. -->
- <col name="firstName">
- <col name="lastName">
- <col name="email">
-
- <!-- Define the column headings. -->
- <thead>
- <tr>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Email</th>
- </tr>
- </thead>
- </table>
+ <vaadin-grid>
+
+ <vaadin-grid-column>
+ <template class="header">First Name</template>
+ <template>[[item.firstName]]</template>
+ </vaadin-grid-column>
+
+ <vaadin-grid-column>
+ <template class="header">Last Name</template>
+ <template>[[item.lastName]]</template>
+ </vaadin-grid-column>
+
+ <vaadin-grid-column>
+ <template class="header">Email</template>
+ <template>[[item.email]]</template>
+ </vaadin-grid-column>
+
</vaadin-grid>
<script>
----
After you have created the file and you have a local server serving the files, you should be able to open up the application in your browser at http://localhost:3000/index.html (notice that the port number may vary depending on the server you use).
-
-+++
-<!-- Assumes .w-arrow-button and .blue class names from vaadin.com theme. Will fallback to a plain link. -->
-<a href="vaadin-grid/vaadin-grid-overview.html" class="w-arrow-button blue" style="display: inline-block">
- Vaadin Grid<br />
- <small>Continue to Vaadin Grid documentation</small>
-</a>
-+++
Vaadin Core Elements is a free and open source set of high quality link:http://webcomponents.org[Web Components] for building mobile and desktop web applications in modern browsers. It builds on top of Google’s link:http://www.polymer-project.org[Polymer] library, and augments the link:https://elements.polymer-project.org[Iron, Paper, and other element sets of Polymer] with elements that are needed in building business applications.
-Although based on Polymer, Vaadin Elements can be used together with any other web framework that has support for Web Components. See the link:integrations/polymer.html[Integrations] section for examples how to use the elements together with different JavaScript frameworks and libraries, such as Angular 2, React and Vue.js.
+Although based on Polymer, Vaadin Elements can be used together with any other web framework that has support for Web Components. See the link:integrations/polymer.html[Integrations] section for examples how to use the elements together with different JavaScript frameworks and libraries, such as React and Vue.js.
-If you wish to use Vaadin elements with link:http://gwtproject.org[GWT], you can use link:https://vaadin.com/gwt[GWT Polymer Elements].
+There's also 3rd party utilities available for integrating Vaadin Core Elements (and Polymer elements in general) with link:https://github.com/platosha/angular-polymer[Angular] and link:https://github.com/manolo/gwt-polymer-elements[GWT]
Vaadin Core Elements includes the following elements:
- - link:/docs/-/part/elements/vaadin-combo-box/vaadin-combo-box-overview.html[Combo Box]
- - link:/docs/-/part/elements/vaadin-context-menu/vaadin-context-menu-overview.html[Context Menu]
- - link:/docs/-/part/elements/vaadin-date-picker/vaadin-date-picker-overview.html[Date Picker]
- - link:/docs/-/part/elements/vaadin-grid/vaadin-grid-overview.html[(Data) Grid]
- - link:/docs/-/part/elements/vaadin-split-layout/vaadin-split-layout-overview.html[Split Layout]
- - link:/docs/-/part/elements/vaadin-upload/vaadin-upload-overview.html[Upload]
- - link:/docs/-/part/elements/vaadin-icons/vaadin-icons-overview.html[Icons]
+ - link:https://vaadin.com/elements/-/element/vaadin-combo-box[Combo Box]
+ - link:https://vaadin.com/elements/-/element/vaadin-context-menu[Context Menu]
+ - link:https://vaadin.com/elements/-/element/vaadin-date-picker[Date Picker]
+ - link:https://vaadin.com/elements/-/element/vaadin-grid[(Data) Grid]
+ - link:https://vaadin.com/elements/-/element/vaadin-split-layout[Split Layout]
+ - link:https://vaadin.com/elements/-/element/vaadin-upload[Upload]
+ - link:https://vaadin.com/elements/-/element/vaadin-icons[Icons]
Learn more about the benefits of using Vaadin elements from the link:https://vaadin.com/elements[Vaadin Elements page].
Example integrations for some popular frameworks and libraries:
- link:/docs/-/part/elements/elements-getting-started.html[Polymer]
-- link:/docs/-/part/elements/angular2-polymer/overview.html[Angular 2]
- link:/docs/-/part/elements/integrations/integrations-react.html[React]
- link:/docs/-/part/elements/integrations/integrations-vuejs.html[Vue.js]