Close
Back

<vaadin-grid> 2.0 with million dollar scrolling

The Vaadin Elements team has just released the new and vastly improved <vaadin-grid>. It adds a number of features compared to Grid 1.2 and comes with many performance improvements that allow developers to create fast and feature rich user experiences. This, in fact, required a complete rewrite of the Grid internals. Vaadin Grid 2.0 is likely the most modern data grid for the web available regardless of the price. And yes, this is free and open source.

 

This new release of <vaadin-grid> was made possible not only by the Vaadin Elements team but also by the active and passionate developer community that has put their time and energy throughout the development cycle to raise issues and contribute to the features. We thank you all for your passion and dedication.

 

Data tables such as <vaadin-grid> are the most commonly used data presentation components in enterprise applications. They are versatile, hold a vast amount of data and allow for row-based data to be analysed or ready made analysis to be examined in detail without switching views. We made sure that no matter the use case, <vaadin-grid> satisfies your performance and functional needs. Especially the templating support allows for raw data formatting inside <vaadin-grid> in a way that guides users to quickly pinpoint the relevant data.

 

New features not available previously:

  • Support for millions of data rows

  • Variable row height support

  • Declarative column templates, including header and footer templates, with 2-way data binding support

  • CSS styling support also with native shadow DOM

  • Virtual scrolling with native scrolling also in touch devices

  • Declarative row detail template with 2-way data binding support

  • Default filtering implementation for local array data (in addition to default sorting implementation)

  • Customisable selection model

  • Vastly improved Screen reader support

 

The feature list is exhaustive indeed. I want to highlight a couple of those.

 

Support for millions of data rows

 

With <vaadin-grid> 2.0 we have virtually eliminated the limit of the number of data rows developers can put into a single grid element. See the animation of scrolling through hundreds of  millions of dollars in a snap.

 

 

Variable row height

 

Another often requested feature has been the ability to have rows that vary in height. This feature allows much richer data presentation options for developers and UX designers. With variable row height support developers do not have to develop special view modes to allow users to see the full extent of the information. This is especially useful in use cases where data rows need to fit in a narrow view such as smartphone displays.

 
 

Super-easy way to bring in data

 

It has been true before but I wanted to share a piece of code that demonstrates just how easy it is to pull in data and display that inside <vaadin-grid>. This example fetches data about Vaadin’s GitHub repositories, configures a grid to show the full name of the repository, it’s URL and description. That’s it! Seriously, there is no step two.

 

<iron-ajax
    url="https://api.github.com/users/vaadin/repos"
    params='{"type":"all"}'
    handle-as="json"
    last-response="{{repodata}}"
    auto>
</iron-ajax>
<vaadin-grid items="[[repodata]]">
    <vaadin-grid-column>      
      <template class="header">Repo name</template>      
      <template>[[item.full_name]]</template>
    </vaadin-grid-column>
    <vaadin-grid-column>
      <template class="header">URL</template>
      <template>[[item.html_url]]</template>    
    </vaadin-grid-column>    
    <vaadin-grid-column>      
      <template class="header">Description</template>      
      <template>[[item.description]]</template>    
    </vaadin-grid-column> 
</vaadin-grid>

 

What about Vaadin Framework?

 

With Vaadin Framework 8.0, we included an enabling piece of technology called HTML imports. This allows WebComponents such as <vaadin-grid> to be used together with Framework 8.0. Later this year we plan to make this even easier and provide Java APIs to select Vaadin Core Elements.

 

Meanwhile, we are soon releasing Framework 8.1 that features built-in data grid components that support HTML5 Drag & Drop, new TreeGrid component with additions to Data API that supports hierarchical data. Framework 8.1 will also feature Components in Grid feature that allows developers to add UI components into Grid cells.

 

What’s next?

 

The team is already working on making <vaadin-grid> compatible with Polymer 2.0. We plan to release a set of Vaadin Core Elements at the same time so that you may use Vaadin Core Elements in your current projects and new projects that require Polymer 2.0.

 

Please keep on sending us feedback on issues and new features that you would like to see in future releases of <vaadin-grid>.


Learn more about <vaadin-grid> at the Vaadin Elements page.

 

 

Comments
Add Comment
HI,
Can we also expect support for variable row height with Framework 8.1?
Posted on 4/13/17 6:55 AM.
Hi Matic!

Unfortunately no. Adding support for variable row heights for the older Framework grid is, at least to my understanding, very difficult.
Posted on 4/13/17 5:38 PM in reply to Matic Petek.
Hi,
Is pagination possible with this new version of Vaadin Grid?
Posted on 4/19/17 4:21 AM.
Yes, you can implement pagination using a bit of extra javascript: https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/demo/pagination.html
Posted on 4/22/17 7:28 AM in reply to Ubaid Showkat.