Adding Tables in FlexSheet for ASP.NET MVC

September 14 2018

Tables and graphs can be utilized to represent sizeable numerical or statistical data in an effective way. Tables are used as tools for data visualization across all industry domains, ranging from IT, retail, healthcare, and finance to sales and marketing. Utilizing visual elements can help authors interpret, analyze, and communicate quantitative data, complex relationships, patterns, and trends clearly. With the 2018v2 release, you'll see several exciting updates, including new controls and added features.

This article discusses a new feature introduced in FlexSheet for ASP.NET MVC — tables. Yes, you read it right! FlexSheet now supports tables. You can now transform a range of cells into Excel-like tables.

Adding a Table to FlexSheet

I’m going to use an ASP.NET Core MVC app. You can read more about how to create an ASP.NET Core MVC app here.

To add a table in FlexSheet, you'll need to add an unbound sheet and then add an instance of c1-sheet-table to the unbound sheet. The markup for adding a table to FlexSheet using tag helpers is given below:

<c1-flex-sheet id="tableSheet" height="500px">
            <c1-unbound-sheet>
                <c1-sheet-table name="Table1" range="@range" style="@style">
                    <c1-items-source source-collection="@Sale.GetData(10)"></c1-items-source>
                    <c1-sheet-table-column name="ID"></c1-sheet-table-column>
                    <c1-sheet-table-column name="Date"></c1-sheet-table-column>
                    <c1-sheet-table-column name="Country"></c1-sheet-table-column>
                    <c1-sheet-table-column name="Product"></c1-sheet-table-column>
                    <c1-sheet-table-column name="Amount" total-row-label="Total Sum"></c1-sheet-table-column>
                </c1-sheet-table>
            </c1-unbound-sheet>
        </c1-flex-sheet>

The data source for the table comes from the model (‘Sale’ in this case). The methods used to define the table:

Range – The range method is used to define the range of cells which will be converted into a table.
Style – The style method is used to define the style of the table with the help of the TableStyle class. You can also define styles for different parts of the table using the style method.

Once the table properties have been defined, on running the application, you’ll observe the following output:

Table properties

Display Totals

FlexSheet Table also provides the feature to show totals for numeric columns using the ShowTotalRow property.

<c1-sheet-table name="Table1" range="@range" style="@style" show-total-row="true">

With totals displayed the output would be something like this:

Table properties

Tables without Data Source

FlexSheet also offers the capability to display tables without a data source. For this, we'll only need to define the cell range in the table definition and set the data for the cells in the range through javascript.

<c1-flex-sheet id="tableSheet2" height="500px">
            <c1-unbound-sheet>
                <c1-sheet-table name="Table2" range="@range2" style="@style" show-total-row="true">
                </c1-sheet-table>
            </c1-unbound-sheet>
</c1-flex-sheet>

JavaScript:

var flexS;
c1.mvc.Utils.documentReady(function () {
    flexS = wijmo.Control.getControl('#tableSheet2');

    for (var r = 2; r <= 5; r++) {
        for (var c = 0; c <= 4; c++) {
            flexS.setCellData(r, c, r + c);
        }
    }
});

You will see the following output:

Tables without a data source