Great news to all web developers – we recently released the first stable version of our first HTML custom element (a.k.a. Web Component), namely vaadin-grid 1.0! This is the first time we offer our great UI components to be used together with any web framework, not just Vaadin Framework.
The styling of vaadin-grid is inspired by Google Material Design
What is vaadin-grid?
The vaadin-grid custom element is a Polymer element which wraps the Grid component from Vaadin Framework and provides the declarative HTML and imperative JavaScript APIs for it.
Roughly a year ago, we started experimenting with the possibility of extracting some of our Framework components to be used as Web Components, and it took us some time to figure out all the technical issues and to design a great API for it.
<vaadin-grid selection-mode=”multi”>
<table>
<col name="firstName">
<col name="lastName">
<col name="email">
</table>
</vaadin-grid>
<script>
document.addEventListener("WebComponentsReady", function() {
var grid = document.querySelector("vaadin-grid");
grid.items = [
{firstName: "Jonathan", lastName: "Doe", email: "jonathan@example.com"},
{firstName: "Jane", lastName: "Smith", email: "jane@example.com"},
...
];
});
</script>
An example of how to configure a vaadin-grid
Now, you are able to use the great features of Grid on any webpage, by simply using HTML and JavaScript, without any server-side requirements. For instance, you can easily use HTML elements or JSON objects together with some data bindings (e.g. Angular 2) as the data source, configure the grid during development just by using the browser inspector or use vaadin-grid inside your own custom elements to build new functionality on top of it.
The vaadin-grid element already has a lot of great features, like lazy-loading, virtual scrolling, frozen/fixed columns, customizable headers and footers, custom cell renderers, touch support, keyboard navigation, sorting, accessibility and so on. Some of the important upcoming features we are still working on include column reordering and resizing and built-in item editing. On top of that there are many other features that we wish to implement, such as making it easier to implement sorting and filtering. Be sure to give us feedback about what you feel are the most important things to focus on in the upcoming minor versions!
Vaadin Core Elements
vaadin-grid is the first element in the “Vaadin Core Elements” set, which will contain all of our free elements. Vaadin Core Elements will grow to be a set of elements that are a natural extension of Polymer Element Catalog, targeted for more business/enterprise use cases. We also recently released the Vaadin Core Elements 0.3 bundle package, which includes vaadin-grid 1.0.
This is just the beginning for our Web Component offerings! The next element is coming up fast, as the vaadin-combo-box custom element is nearing beta, and the next element’s design (vaadin-date-picker) is already quite far along. Vaadin Charts will also debut its Web Component API in the upcoming version 3 (currently in alpha).
Get started with Vaadin Elements