v2.0.0-alpha-pre2 – Array Data Source, Filtering & Sorting, Column Grouping

Demos and code examples

New Features

Array Data Source

• items property can be used to assign an array of data.

<iron-ajax ... last-response="{{users}}"></iron-ajax>
<vaadin-grid items="[[users]]">
  <vaadin-grid-column>
    ...
    <template>[[item.user.name.first]]</template>
  </vaadin-grid-column>
</vaadin-grid>

Sorting Helpers

• <vaadin-grid-sorter> can be used inside templates to add a sorting icon.
• Array data source is sorted automatically, function data source gets a opts.sortOrder parameter for custom sorting implementation.

<vaadin-grid items="[[users]]">
  <vaadin-grid-column>
      <template class="header">
        <vaadin-grid-sorter path="user.email" direction="desc">Email</vaadin-grid-sorter>
      </template>
      <template>[[item.user.email]]<template>
    </vaadin-grid-column>
    ...
</vaadin-grid>

Filtering Helpers

• <vaadin-grid-filter> can be used inside templates to add an input field for filtering.
• Array data source is filtered automatically, function data source gets a opts.filters parameter for custom filtering implementation.
• <vaadin-grid-filter> can be customized by adding an input element as a child.

<vaadin-grid items="[[users]]">
  <vaadin-grid-column>
    <template class="header">
      <vaadin-grid-filter path="user.name.first"></vaadin-grid-filter>
    </template>
    <template>[[item.user.name.first]]<template>
  </vaadin-grid-column>
  <vaadin-grid-column>
    <template class="header">
      <vaadin-grid-filter path="user.email">
        <!-- Custom Input -->
        <paper-input label="Email"></paper-input>
      </vaadin-grid-filter>
    </template>
    <template>[[item.user.email]]<template>
  </vaadin-grid-column>
  ...
</vaadin-grid>

Hiding Columns

• hidden can be now applied to any column

<vaadin-grid items="[[users]]">
    <vaadin-grid-column hidden>
     <!-- I'm hidden -->
    </vaadin-grid-column>
    <vaadin-grid-column>
      <template class="header">Last Name</template>
      <template>[[item.user.name.last</template>
    </vaadin-grid-column>
  ...
</vaadin-grid>

Column Grouping

• <vaadin-grid-column-group> introduced
• Group can have its own header and footer which are spanned over the nested child columns.
• frozen property can be used to freeze and hide all the nested child columns.

<vaadin-grid items="[[users]]">
  <vaadin-grid-column>
    <template class="header">#</template>
    <template>[[index]]</template>
  </vaadin-grid-column>
  <vaadin-grid-column-group>
    <template class="header">Name</template>
    <vaadin-grid-column>
      <template class="header">First Name</template>
      <template>[[item.user.name.first</template>
    </vaadin-grid-column>
    <vaadin-grid-column>
      <template class="header">Last Name</template>
      <template>[[item.user.name.last</template>
    </vaadin-grid-column>
  </vaadin-grid-column-group>
</vaadin-grid>

API Changes

• frozen-columns attribute in <vaadin-grid> is replaced by frozen attribute in <vaadin-grid-column> and <vaadin-grid-column-group> elements.
• colspan attribute/property dropped from header ```
• <vaadin-grid-column> and <vaadin-grid-column-group> support only single header/footer <template> elements from now on.
• <template is="header/footer"> is replaced by <template class="header/footer">.

Other

• Various bug fixes (of course)
• Performance improvements