v1.0.0-beta3 – Filter and Sorting Regression fixed

Notables Changes:

• filterBy and sortBy make the sort and filter elements visible again. (#76)
  • In addition to these properties, name and filterValue are also now observed, and they can be changed on runtime.
• Cell widths on rows and header should now match also on Shadow DOM and when vertical scrollbar is visible. (#79)

v1.0.0-beta2 – Selection extracted from iron-list

Notable Changes:

• Hover style mixins now affect the styles correctly when even/odd styles are used at the same time
• <data-table-cell> elements are now applied with correct style scope classes on Shady DOM
• Selection is now longer handled inside <iron-list>
• selectedItem and selectedItems are now readonly
• Some debounces removed to make the table more responsive

v1.0.0.beta1 – Row Details

New Features:

Row Details:

• <template is="row-detail"> can be now used to define contents for the row details element.
• When details-enabled property is set to true, row details will be toggled when tapping on the row element.
• [[expanded]] property inside the details or column template can be bound two-way to also toggle the details.
• Row Details template support for Angular 2 is targeted for 1.0.0 stable.
• See the new examples at http://saulis.github.io/iron-data-table/demo/details.html

<iron-data-table details-enabled items="[[users.results]]">
  <template is="row-detail">
    <div class="detail">
      <img src="[[item.user.picture.medium]]" />
      <p>[[item.user.username]]</p>
      <p>[[item.user.email]]</p>
    </div>
  </template>
  <data-table-column name="First Name">
    <template>[[item.user.name.first]]</template>
  </data-table-column>
  <data-table-column name="Last Name">
    <template>[[item.user.name.last]]</template>
  </data-table-column>
</iron-data-table>

Thanks to @gazal-k for helping in implementing this feature!

Advanced Styling for Rows and Cells

• beforeRowBind and beforeCellBind functions can be overridden to style elements before data is bound.

table.beforeRowBind = function(data, row) {
  row.toggleClass('even', data.index % 2 === 0);
}
table.beforeCellBind = function(data, cell) {
  cell.toggleClass('index', cell.column.name === '#');
}

Usability Changes:

• Items are no longer selected/deselected when an input inside a cell is tapped.
• 250ms debounce delay added for the filtering to avoid unnecessary calls when typing fast.

v1.0.0-alpha6 – Hotfix for rendering issues with nested tables

Important Changes:

• Nesting <iron-data-table> is now fixed:

<dom-module id="x-foo">
  <template>
    <iron-data-table items='["foo", "bar"]' selection-enabled>
      <data-table-column name="First">
      <template>
        <div>[[item]]</div>
      </template>
    </data-table-column>
  <data-table-column name="Last">
    <template>
      <div>[[item]]</div>
    </template>
   </data-table-column>
    </iron-data-table>
  </template>
</dom-module>

• Columns can now also be inserted using <content>

<x-foo>
  <data-table-column name="First">
    <template>
      <div>[[item]]</div>
    </template>
  </data-table-column>
</x-foo>

<dom-module id="x-foo">
  <template>
    <iron-data-table items='["foo", "bar"]' selection-enabled>
      <content></content>
      <data-table-column name="Last">
        <template>
          <div>[[item]]</div>
        </template>
      </data-table-column>
    </iron-data-table>
  </template>
</dom-module>

v1.0.0-alpha5 – New DOM structure, Basic Angular 2 support, improved data binding

Potentially Breaking Changes:

• selectedItems.filter is now selectedItems.filters
• Templates are now stamped and placed inside the Light DOM of <iron-data-table> in a more efficient manner. Until now, each cells contents were injected as separate a <div> element. That structure is now replaced with:

<data-table-row>
  <data-table-cell>*stamped cell contents go here*</data-table-cell>
  <data-table-cell>*stamped cell contents go here*</data-table-cell>
</data-table-row>

where a <data-table-row> element created for each item element in <iron-list>.

In practice this means also that most of the elements are now exposed in the light DOM and can be styled using plain CSS instead of custom properties and mixins.

For more information, see "Performance Improvements" and "Styling Changes" sections in the release notes.

New Features:

Angular 2 Directives

• IronDataTable directive introduces two-way binding support for the properties in <iron-data-table>
• DataTableColumn directive introduces two-way binding support for the properties in <data-table-column>
• RowTemplate structural directive enables templating the rows with Angular 2 templating.
• HeaderTemplate structural directive enables templating the header with Angular 2 templating.

Usage:

@Component({
  selector: 'my-app',
  template: `
  <p>Heroes:</p>
  <iron-data-table [items]="heroes" selection-enabled [(selectedItem)]="myHero">
    <data-table-column name="Hero">
      <div *rowTemplate="#item=item">{{item.name}}</div>
    </data-table-column>
  </iron-data-table>
`,
  directives: [IronDataTable, DataTableColumn, RowTemplate, HeaderTemplate]
})

See Getting Started section for detailed instructions.

Unfortunately there no live examples yet, but the templating features listed in Demo pages should the same way in Angular and Polymer. Just remember to declare the local variables for item, index, selected or column in your Angular template.

Known issues: mutations on items array don't get picked up automatically.

Multi-Column Sorting

• Sorting for a column and now be toggled off by the user by clicking a few times.
• Multiple columns can be sorted at the same time just by clicking on the correspondent icons.
• A small number icon appears below the sorting icon to indicate the sorting order when multiple columns are being sorted.

Flex Height

• In addition to explicit px values, height can also be now set using CSS flex.
• See live demo in Styling

<style>
  .container {
    display: flex;
    height: 1000px;
  } 

  iron-data-table {
    flex: 1;
  }
</style>
<div class="container">
  <iron-data-table>...</iron-data-table>
</div>

Data Binding Improvements

• item-changed event is now fired when an item bound with two-way binding has been modified inside a cell.
• items-changed event is now fired when items has an array and an item has been modified inside a cell.
• Mutating items from outside should also now propagate changes all the way to the cells.

<iron-data-table items="[[items]]">
  <data-table-column name="Column">
    <paper-input value="{{item.value}}"></paper-input>
 </data-table-column>
</iron-data-table>

Performance improvements

• In previous versions, the templated cell contents where injected into DOM using a separate <content> element for each cell. Therefore, adding columns also added the number to <content> elements created by approx 25 per column. As it turned out, the node insertion using <content> elements is quite a heavy operation.
• From now there will be a <content> element created only for each item element inside <iron-list> so the number of rows wont affect the performance anymore from this aspect.

Styling Changes

• --iron-data-table-cell-height CSS property removed, use data-table-cell selector instead.
• --iron-data-table mixin was added.
• default-styles.html should now work better in applications where <iron-data-table> is encapsulated.

v1.0.0-alpha4 – Lazy Loading

New Features:

• Lazy Loading added, with the new dataSource property that takes a function data source

table.dataSource = function(opts, cb, err) {
 cb(items);
}

• pageSize added to tell the function data source how many items to load at a time.
• size added to tell the function data source how many items should be loaded in total.
• <paper-spinner> added for lazy loading indicator, looking for alternatives that are smaller and support Shadow DOM
• selectedItems.filter added to provide information on the filter that had been applied to the items while selection was made.
• <data-table-column> elements can now be added and removed dynamically.
• <data-table-column> elements are now rendered in the light DOM for better React support.

Breaking Changes:

• Row Grouping dropped for now, will be added back together with the hiearchial data support
• selectedItems now contain only the items that have been manually selected/deselected. "Select All" is now notified through the selectedItems.inverted flag.

v1.0.0-alpha3 – Custom Header Templates, Keyboard Navigation

New Features:

• <iron-list> 1.2.x now supported
• Custom Header Templates supported
• Keyboard Navigation enabled

v1.0.0-alpha2 – Row Grouping, Multi-Select

New Features:

• Row Grouping
• Multi-Select

API Changes:

• column.filter is now column.filterBy
• column.sort is now column.sortBy

v1.0.0-alpha1 – First Alpha Release

Features:

• Virtual, 'infinite' scrolling provided by <iron-list>
• In-Memory Data filtering
• In-Memory Data sorting
• Single Item selection
• Template support for each column
• Two-way binding support
• Custom styling support for templates
• Native Shadow DOM support
• API for Column manipulation, resizing, hiding, reordering