<div>
    <div class="copy">
        <h3>
            Table
        </h3>
        <p>
            To make managing and analyzing a group of related data easier, you can turn a range of cells into a Table.
        </p>
        <p>
            FlexSheet provides <b>addTable</b> method to add empty table.
        </p>
        <p>
            FlexSheet also allows to add table with data source by <b>addTableFromDataSource</b> method.
        </p>
    </div>
    <div>
        <wj-flex-sheet class="flexSheet" control="ctx.flexSheet" initialized="initialized(s)">
            <wj-sheet name="Table" row-count="20" column-count="8"></wj-sheet>
        </wj-flex-sheet>
    </div>
    <div class="well well-lg" ng-show="ctx.selectedTable != null">
        <h4>Table Style Options</h4>
        <div>
            <label>
                <input class="form-check-input" type="checkbox" ng-model="ctx.selectedTable.showHeaderRow">
                Header Row
            </label>
            <label>
                <input class="form-check-input" type="checkbox" ng-model="ctx.selectedTable.showTotalRow">
                Total Row
            </label>
        </div>
        <div>
            <label>
                <input class="form-check-input" type="checkbox" ng-model="ctx.selectedTable.showBandedRows">
                Banded Rows
            </label>
            <label>
                <input class="form-check-input" type="checkbox" ng-model="ctx.selectedTable.showBandedColumns">
                Banded Columns
            </label>
        </div>
        <div>
            <label>
                <input class="form-check-input" type="checkbox" ng-model="ctx.selectedTable.showFirstColumn">
                First Column
            </label>
            <label>
                <input class="form-check-input" type="checkbox" ng-model="ctx.selectedTable.showLastColumn">
                Last Column
            </label>
        </div>
        <div>
            <label style="width:auto">
                Built-in Styles:
            </label>
            <wj-combo-box control="ctx.cboTableStyles" items-source="ctx.tableStyleNames" is-editable="false">
            </wj-combo-box>
        </div>
    </div>
</div>