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.

<iron-ajax
    url="https://api.github.com/users/vaadin/repos"
    params='{"type":"all"}'
    handle-as="json"
    last-response=""
    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>