iron-data-table
iron-data-table copied to clipboard
Saulis
changing the datasource does not clear previous columns
I'm trying to use iron-data-table as a dynamic list. The user can select the datasource. When changing the datasource the columns don't refresh.
So if i change back and forth between 2 datasources the columns just keep being added to the existing columns.
setting #grid.columns=[] before switching doesn't help.
How have you defined the columns? Are they directly nested under <iron-data-table> or are they injected through a <content> element?
This works just fine for me: (rewrite-templatizers branch)
<!doctype html>
<head>
<meta name="description" content="iron-data-table">
<meta charset="utf-8">
<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="../iron-data-table.html" rel="import">
<link href="../default-styles.html" rel="import">
<link href="../../paper-button/paper-button.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<template>
<paper-button on-tap="_add" raised>Add</paper-button>
<paper-button on-tap="_remove" raised>Remove</paper-button>
<iron-data-table items="[[items]]" details-enabled="[[details]]">
<template is="dom-repeat" items="[[columns]]" as="col">
<data-table-column name="Column [[col]]" filter-by="value">
<template>[[item.value]]</template>
</data-table-column>
</template>
</iron-data-table>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-foo',
properties: {
columns: {
value: function() {
return [0, 1, 2, 3];
}
},
items: {
value: function() {
var items = [];
for (var i = 0; i < 100; i++) {
items.push({
'value': 'foo' + i
});
}
return items;
}
}
},
_add: function() {
this.push('columns', this.columns.length);
},
_remove: function() {
this.pop('columns');
}
});
});
</script>
<dom-module>
<x-foo></x-foo>
</body>
