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.