Improve declarative support

[jouni]

The current light DOM API is not really suitable for anything else than small static data sets, nor is the overall API very Polymer-like in it’s entirety, being more JS/programmatic driven than declarative.
We should offer a similar template based approach as iron-list to alleviate both of these issues.

Proposal

Replace the current <table> element directly inside <vaadin-grid> with <template>. All the other elements inside could stay the way they are currently, but <tbody> would be considered as a row template for an item (think of dom-repeat). The data could be passed to the vaadin-grid element using the data attribute, either as an array, or as a function reference.

<vaadin-grid data="[[myarray]]">
  <!-- Use Polymer.Templatizer behavior for this -->
  <!-- https://github.com/Polymer/polymer/blob/master/src/lib/template/templatizer.html -->
  <template>
    <col name="user.name.first">
    <col name="user.name.last">
    <col name="user.email">

    <thead>
      <tr>
        <td colspan="2">Name</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Email</td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>[[item.user.name.first]]</td>
        <td>[[item.user.name.last]]</td>
        <td><a href="mailto:[[item.user.email]]">[[item.user.email]]</a></td>
      </tr>
    </tbody>
  </template>
</vaadin-grid>

or with a JS data source function:

<vaadin-grid data="_myDataFunc">
  ...
</vaadin-grid>

After this, we could perhaps offer event handler binding for the row elements declaratively as well (see #144).

[jouni]

We could still keep supporting the current light DOM API for some time, but deprecate it.

[jojule]

Why would we need to replace <table> with this instead of supporting both? <table> for having actual data in light DOM and <template> for setting up the template used for creating table from external data source.

[jojule]

<table> notation is useful on the long run as well - why deprecate it?

[jouni]

I guess we could have both. I just initially felt like they’re both doing the same thing. But I guess you’re right, for very simple scenarios, the <table> approach is much easier.

[cwayfinder]

What do you think about something like the following markup for grouped headers? (I know that the col tag shouldn't contain anything. We can use use a custom tag instead of col)

<vaadin-grid data="[[myarray]]">
  <!-- Use Polymer.Templatizer behavior for this -->
  <!-- https://github.com/Polymer/polymer/blob/master/src/lib/template/templatizer.html -->
  <template>
    <col text="Name">
      <col name="user.name.first" text="First Name"/>
      <col name="user.name.last" text="Last Name"/>
    </col>
    <col name="user.email"/>

    <tbody>
      <tr>
        <td>[[item.user.name.first]]</td>
        <td>[[item.user.name.last]]</td>
        <td><a href="mailto:[[item.user.email]]">[[item.user.email]]</a></td>
      </tr>
    </tbody>
  </template>
</vaadin-grid>

[jouni]

Discussed this in rather close detail, and here’s the scratchpad of API that was discussed, with various options:

<script>
var app = document.querySelector("#app");
app._cellClassGenerator = function(cell) {
  ...
}
grid.addEventListener("row-clicked", function(e) {
  var index = e.details.row.index
  ...
}
app.mydata = function() {
  return function(req) {
    ..
  }
}
</script>
<template is="dom-bind" id="app">

<vaadin-grid items="[[mydata]]"
               cell-class-generator="[[_cellClassGenerator]]"
             selection-size="{{selection}}">
  <template config>
    <col name="name">
    <thead>
      <tr>
        <th colspan="2">
          <input placeholder="Filter" value="{{filterText}}">
        </th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="2">
          <span>[[selection]]</span> items selected
        </td>
      </tr>
    </tfoot>
  </template>

  <template column name="name">
    <span>[[item.user.name.first]]</span>
    <span>[[item.user.name.last]]</span>
  </template>

  <template row-details>
    [[item.user.email]]
  </template>
</vaadin-grid>




<vaadin-grid data="[[mydata]]">
  <template>
    [[index]]
  </template>
  <template>
    [[item.user.name.first]]
  </template>
  <template>
    [[item.user.name.last]]
  </template>
</vaadin-grid>


<vaadin-grid data="[[mydata]]" on-row-clicked="_myhandler">
  <table>
    <thead>
      <tr>
        <th colspan="2">
          <template>
            <input placeholder="Filter" value="{{filterText}}">
          </template>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <template>
            [[item.user.name.first]]
          </template>
        </td>
        <td>
          <template>
            [[item.user.name.last]]
          </template>
        </td>
      </tr>
    <tbody>
  </table>
</vaadin-grid>


</template>

[jouni]

Most of what has been discussed here will be covered by 2.0. We are not considering adding the same level of declarative support for 1.x, though.

We should create new issues for any remaining things missing from the 2.0 implementation. Closing this epic issue.