Features

Table

Table

FlexSheet supports turn a cell range to an Excel-like table.

Features

Table

To make managing and analyzing a group of related data easier, you can turn a range of cells into a Table.

You can add an empty table by adding the Table into the tables collection of the sheet.

FlexSheet also allows to add table with data source by binding the data to table.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace FlexSheetExplorer.Controllers
{
    public partial class FlexSheetController : Controller
    {
        public ActionResult Table()
        {
            return View();
        }
    }
}
@section Scripts{
    <script type="text/javascript" src="~/Scripts/FlexSheet/table.js"></script>
}

<div>
    <div class="copy">
        <h3>
            @Html.Raw(Resources.FlexSheet.Table_Text12)
        </h3>
<p>@Html.Raw(Resources.FlexSheet.Table_Text0)</p>

<p>@Html.Raw(Resources.FlexSheet.Table_Text1)</p>

<p>@Html.Raw(Resources.FlexSheet.Table_Text2)</p>

    </div>
    <div>
        @(Html.C1().FlexSheet().Id("tableSheet").CssClass("flexSheet")
            .AddUnboundSheet(s => s.Tables(ts =>
            {
                var style = TableStyle.CreateBuiltInTableStyleDark(9);
                ts.Add().Name("Table1").Range(2, 1).Style(style).Bind(Sale.GetData(10)).Columns(cs =>
                {
                    cs.Add().Name("ID");
                    cs.Add().Name("Date");
                    cs.Add().Name("Country");
                    cs.Add().Name("Product");
                    cs.Add().Name("Amount");
                });
            }))
        )
    </div>
    <div id="tableOptions" class="well well-lg" style="display:none;">
<h4>@Html.Raw(Resources.FlexSheet.Table_Text4)</h4>
        <div>
            <label>
                <input id="headerRow" class="form-check-input" type="checkbox">
               @Html.Raw(Resources.FlexSheet.Table_Text5)
            </label>
            <label>
                <input id="totalRow" class="form-check-input" type="checkbox">
                @Html.Raw(Resources.FlexSheet.Table_Text6)
            </label>
        </div>
        <div>
            <label>
                <input id="bandedRows" class="form-check-input" type="checkbox">
                @Html.Raw(Resources.FlexSheet.Table_Text7)
            </label>
            <label>
                <input id="bandedColumns" class="form-check-input" type="checkbox">
                @Html.Raw(Resources.FlexSheet.Table_Text8)
            </label>
        </div>
        <div>
            <label>
                <input id="firstColumn" class="form-check-input" type="checkbox">
                @Html.Raw(Resources.FlexSheet.Table_Text9)
            </label>
            <label>
                <input id="lastColumn" class="form-check-input" type="checkbox">
                @Html.Raw(Resources.FlexSheet.Table_Text10)
            </label>
        </div>
        <div>
            <label style="width:auto">
                @Html.Raw(Resources.FlexSheet.Table_Text11)
            </label>
            @Html.C1().ComboBox().Id("builtInStyles").IsEditable(false)
        </div>
    </div>
</div>
@section Summary{
<p>@Html.Raw(Resources.FlexSheet.Table_Text3)</p>

}