Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<head>
<meta name="description" content="iron-data-table template">
  <meta charset="utf-8">
  <base href="https://polygit.org/vaadin-*+vaadin+master/iron-data-table+Saulis+master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-data-table/iron-data-table.html" rel="import">
  <link href="iron-data-table/default-styles.html" rel="import">
  <link href="vaadin-combo-box/vaadin-combo-box.html" rel="import">
</head>
<body>
  <dom-module id="x-foo">  
    <template>
      <iron-data-table items="[[items]]" columns="{{columns}}" on-item-changed="_itemChanged">
        <data-table-column name="Column 1">
          <template>[[item.value]]</template>
        </data-table-column>
        <data-table-column name="Column 2">
          <template>
            <vaadin-combo-box items="[[states]]" value="{{item.state}}"></vaadin-combo-box>            
          </template>
        </data-table-column>
      </iron-data-table>
    </template>
    <script>
      Polymer({
        is: 'x-foo',
        properties: {
          columns: Array,
          states: {
            value: function() {
              return ['Ready', 'Set', 'Go']  
            }
          },
          items: {
            value: function() {
              var items = [];
              
              for (var i=0; i < 100; i++) {
                items.push({'value': 'foo'+i, 'state': ''});
              }
​
              return items;
            }
          }
        },
        
        _itemChanged: function(e) {
          if (e.detail.path === 'state') {
            console.log('Value changed to ' + e.detail.value + ' for item ' + e.detail.item.value);            
          }
        }
      });
    </script>
  <dom-module>
​
  <x-foo></x-foo>
​
</body>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Saulispro
0viewers