To create a drop-down groups with DETAIL packet data, use the following template for the master table:
<template-row custom="true">
<![CDATA[
<table {{{tableattributes}}}>
<tr>
{{{text}}}
</tr>
</table>
<input type="checkbox" class="tree" id="{{CUSTNO}}"/>{{{detail}}}
]]>
</template-row>
We use input element as a storage for group state.
In the cell template of the main table specify:
<template-cell>
<label for="{{CUSTNO}}"><a>{{CUSTNO}} {{COMPANY}}</a></label>
</template-cell>
And add styles:
table {
overflow: hidden;
display: block;
transition: height 0.3s;
transition: opacity 0.3s;
}
.tree {display:block; position: absolute; left:-500; top:-500}
input + table {height: 0; opacity: 0.2;}
input:checked + table {height: auto; opacity: 1;}
Result:
