<div>
    <div class="copy">
        <h3>
            Cell Merging
        </h3>
        <p>
            FlexSheet supports to merge the selected cells into one cell via invoking the <b>mergeRange</b> method.<br />
            If the selected cells contain merged cell, the <b>mergeRange</b> method will un-merge the merged cell.<br />
            Otherwise it will merge the selected cells into one cell.<br />
            This is different with FlexGrid.  FlexGrid is content-driven cell merging.
        </p>
    </div>
    <button type="button" class="btn btn-default" (click)="mergeCells()">{{mergeState.isMergedCell ? 'UnMerge' : 'Merge'}}</button>
    <div>
        <wj-flex-sheet #flexSheet class="flexSheet" (initialized)="flexSheetInit(flexSheet)">
            <wj-sheet name="Unbound" [rowCount]="20" [columnCount]="8"></wj-sheet>
        </wj-flex-sheet>
    </div>
</div>