Accessibility Now
Join our upcoming webinar about building accessible web applications! June 7, 2022.
Blog

The best Web Component data grid, , reaches 1.0

By  
Jouni Koivuviita
Jouni Koivuviita
·
On Dec 23, 2015 10:40:00 AM
·

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.

Screenshot of a vaadin-grid

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
Jouni Koivuviita
Jouni Koivuviita
Hi! I’m a long time Vaadiner since 2006. My goal has always been to provide you with the best UI components in the world for mobile and desktop web applications. Still hoping to get there eventually :D
Other posts by Jouni Koivuviita