demo.component.html

<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<jigsaw-header [level]="1">Table Expand</jigsaw-header>

<div class="demo-buttons">
    <span>展开方式</span>
    <jigsaw-button-bar [data]="['toggle', 'show', 'hide']" [(selectedItems)]="action"></jigsaw-button-bar>
</div>
<div class="demo-buttons" style="display: flex;">
    <span>数据更新后是否保持打开</span>
    <jigsaw-switch [(checked)]="remainOpen"></jigsaw-switch>
</div>
<div class="demo-buttons">
    <jigsaw-button (click)="updateData()">更新数据</jigsaw-button>
    <jigsaw-button (click)="resetData()">重置数据</jigsaw-button>
    <jigsaw-button (click)="expandRow(2)">展开/关闭第三行</jigsaw-button>
</div>

<jigsaw-header [level]="2">信息展示</jigsaw-header>
<jigsaw-table #tableCmp width="600px" [data]="tableData" (rowExpand)="rowClick($event)">
</jigsaw-table>