Polymer iron selector for table rows
I would like to use <iron-selector>
to select rows of my table, but it seems to be weird.
This (obviously) works:
<iron-selector selected="0">
<div>Item 0</div>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</iron-selector>
But if I want to have selected rows in the table, nor with a div in the table:
<table>
<tr>
<td>Item 0</td><td>bar</td><td>flan</td>
</tr>
<iron-selector selected="0">
<div>
<tr>
<td>item 1</td><td>bard</td><td>fladn</td>
</tr>
</div>
<div>
<tr>
<td>item 2</td><td>bard</td><td>fladn</td>
</tr>
</div>
</iron-selector>
</table>
or without:
<table>
<iron-selector selected="0">
<tr><td>Item 0</td></tr>
<tr><td>Item 1</td></tr>
<tr><td>Item 2</td></tr>
<tr><td>Item 3</td></tr>
</iron-selector>
works. Should I just make a table with divs? Thank.
source to share
What you are doing here is invalid HTML. You cannot have iron-selector
or div
as a child table
.
You can either make your table with multiple div
elements as you say, or create your own Polymer element that extends tbody
and uses the same behavior as iron-selector
. Here is a tutorial on extending native elements. The docs for iron-selector will tell you about the behavior it implements.
Here's an example of extending an element tbody
and implementing the same behavior as an element iron-selector
:
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-selector/iron-selectable.html">
<dom-module id="selectable-table">
<style>
:host {
display: block;
}
</style>
<template>
<content></content>
</template>
<script>
Polymer({
is: "selectable-table",
extends: "tbody",
behaviors: [
Polymer.IronSelectableBehavior
]
});
</script>
</dom-module>
Then you can use this by following these steps:
<table>
<tbody is="selectable-table">
<tr>
<td>
item 1
</td>
</tr>
<tr>
<td>
item 2
</td>
</tr>
<tr>
<td>
item 3
</td>
</tr>
</tbody>
</table>
This gives you the following output (with styles added to display the selected item):
source to share