Features

Table

Table

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

Features

Introduction
Data Binding
Sorting
Filtering
Format Cells
Multiple Headers
Cell Merging
Drag & Drop
Frozen Cells
Formulas
Custom Function
Table
Excel I/O
Server Load
Remote Load/Save
Excel Service

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.

  • Sheet1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
@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>
 
}