v2.0.0-alpha1 – Dynamic Columns, Custom CSS Mixins

API Documentation and Live Demos

New Features

Dynamic Columns

• Columns can now be added and removed dynamically by adding and removing <vaadin-grid-column> elements, for example with a dom-repeat template:

<vaadin-grid id="grid" data-source="[[dataSource]]" size="200">
  <template is="dom-repeat" items="[[columns]]" as="column">
    <vaadin-grid-column>
      <template class="header">[[column]]</template>
      <template>[[get(column, item)]]</template>
    </vaadin-grid-column>
   </template>
</vaadin-grid>

CSS Mixins

Cells can now be customized using the following mixins:

• --vaadin-grid-cell – Mixin applied to all cells
• --vaadin-grid-header-cell – Mixin applied to to header cells
• --vaadin-grid-footer-cell – Mixin applied to to footer cells
• --vaadin-grid-body-cell – Mixin applied to to body cells
• --vaadin-grid-body-row-odd-cell – Mixin applied to body cells on odd rows
• --vaadin-grid-cell-last-frozen – Mixin applied to the last frozen column cells
• --vaadin-grid-body-row-hover-cell – Mixin applied to body cells on on hovered row
• --vaadin-grid-body-row-selected-cell – Mixin applied to body cells on selected rows
• --vaadin-grid-body-row-active-cell – Mixin applied to body cells on active row
• --vaadin-grid-body-row-details-cell – Mixin applied to cells on details rows
• --vaadin-grid-loading-spinner – Mixin applied to the loading spinner
• --vaadin-grid-loading-backdrop – Mixin applied to the loading backdrop

Selection Column

• <vaadin-grid-selection-column> is a new helper element that provides default templates for multi selection checkboxes.

API Changes

• selectedItem was removed
• multiSelection was removed in favor of exposing <vaadin-grid-selection-column>
• activeItem was added to expose the last item user has interacted with by clicking.
• Column property flex is now flexGrow

Other Notable Changes:

• <vaadin-grid-filter> no longer listens to input events from a custom child element, instead value needs to be bound manually

v1.2.1

• Fixed #483
• Fixed #506
• Fixed vaadin/vaadin-context-menu#43
• Added the code snippet for the live demo on https://beta.webcomponents.org/element/vaadin/vaadin-grid

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

1.2.0

No changes since 1.2.0-rc1

v1.2.0-rc1

Changes since 1.2.0-beta1

• Clear selection on refresh items.
• Ability to add event names that will be observed in order to emit detailed info of the grid.

v1.2.0-beta1

Changes

• Updated documentation

v1.2.0-alpha2

Changes

• New Feature: Resizing columns

v1.1.2

Changes

• Removed deprecated ng2 directives
• Fixed details number not being passed as a number
• Added row stripe cell mixin
• Optimized docs images
• Adjusted dropdown menu to display correctly long column names
• Updated iPhone test config to use latest versions

v2.0.0-alpha-pre1

Hey!

v2.0.0-pre.1 is a full rewrite of <vaadin-grid> based on pure Javascript + Polymer.
This is the first feature iteration version which consists of only a few key features, such as:

• template support with two-way binding
• function data source
• row selection
• row details
• support for dynamic row heights
• support for "unlimited" data source size

Getting Started

Set a data source

// Currently only function data sources are supported.
// The API is almost the same as in v1.0, 
// with the only difference being it uses pages instead of indexes. 
// `opts.page` and `opts.pageSize` are provided in the arguments.
grid.dataSource = function(opts, callback) {
  // simple example how to provide data from an array `items`:
  var start = opts.page * opts.pageSize;
  var end = start + opts.pageSize;
  callback(items.slice(start, end));
};

// Also, remember to set the `size`
grid.size = 100;

Define columns

The <table> structure configuration and cell renderers have been dropped from 2.0.
Instead, the contents for the header, footer and cell contents are defined using templates.

You can use the following instance properties in your templates:
index: the index of the row
item: the item object for that row
selected: true, if row is selected
expanded: true if row details are expanded

<vaadin-grid size="100" data-source="[[dataSource]]">
  <vaadin-grid-column width="50px" flex="0">
    <template is="header">#</template>
    <template>[[index]]</template>
  </vaadin-grid-column>
  <vaadin-grid-column>
    <template is="header">First Name</template>
    <template>[[item.name.first]]</template>
  </vaadin-grid-column>
  <vaadin-grid-column>
    <template is="header">Last Name</template>
    <template>[[item.name.last]]</template>
  </vaadin-grid-column>
</vaadin-grid>

All instance variables excluding index can be modified using two-way binding. Modifying {{selected}} or {{expanded}} will affect the rows selection or details expansion, respectively. Modifying a property of item will affect the object itself and an item-changed event will get fired.

See demos for more detailed examples.

v1.2.0-alpha1

Changes

• New Feature: Reorder columns by drag and drop.
• Fixed regression introduced by new JsInterop not casting integers to doubles when passing to functions.
• Removed deprecated angular2 directives. Use angular2-polymer generic directive instead.
• Default sort function for array data sources