Customize Column Headers

A user needs to follow these 3 steps to customize a view for tableSheet:

1. Add table to the data manager
2. Add a custom view, which has following properties:

interface IColumn {
    name: string; // the unique name of the column
    value?: string; // the value of the column, could be a field name of table from database, or formula which uses the fields names.
    caption?: string; // the caption of the column, which is the key of row data
    width?: number | string; // the width of the column, support number in pixel, or star size
    style?: GC.Data.StyleOptions; // the whole column style
    conditionalFormats?: Array<GC.Data.CellValueRuleOptions | GC.Data.SpecificTextRuleOptions | GC.Data.FormulaRuleOptions | GC.Data.DateOccurringRuleOptions | GC.Data.    Top10RuleOptions | GC.Data.UniqueRuleOptions | GC.Data.DuplicateRuleOptions | GC.Data.AverageRuleOptions | GC.Data.TwoScaleRuleOptions | GC.Data.ThreeScaleRuleOptions | GC.Data.DataBarRuleOptions | GC.Data.IconSetRuleOptions>;
    validator?: GC.Data.NumberValidatorOptions | GC.Data.DateValidatorOptions | GC.Data.TimeValidatorOptions | GC.Data.TextLengthValidatorOptions | GC.Data.FormulaValidatorOptions | GC.Data.FormulaListValidatorOptions | GC.Data.ListValidatorOptions;
    isPrimaryKey?: boolean; // mark the column as primary key column
    readonly?: boolean; // mark the column is readonly
    required?: boolean; // mark the column is required when insert a new row
    defaultValue?: any; // provide the default value when insert a new row, could be a const or a formula
    headerStyle?: GC.Data.HeaderStyleOptions; // the column header style.
}

3. Set custom view into tableSheet. Users can set header style in view to customize the header style.

This is the sample code.

//add table
dataManager.addTable("myTable", {
    remote: {
        read: {
            url: "https://demodata.mescius.io/northwind/api/v1/Orders"
        }
    }
});
// add custom column header style
var headerStyle = {
    font: "italic bold 14pt Calibri",
    borderTop: {
        color: "lightgrey",
        style: "thick"
    },
    borderLeft: {
        color: "lightgrey",
        style: "thin"
    },
    borderRight: {
        color: "lightgrey",
        style: "thin"
    },
};
//add custom view
var myView = orderTable.addView("myView", [
    { value: "orderId", width: 100, headerStyle: headerStyle }, //set column width 100px
    { value: "orderDate", width: 200, headerStyle: headerStyle },
    { value: "freight", width: 100, headerStyle: headerStyle },
    { caption: "CompanyName", value: "customer.companyName", width: "2*", headerStyle: headerStyle }, //set column width with star size, which will calculate actual column width by the rest size of viewport
    { value: "customer.contactName", width: "*", headerStyle: headerStyle },
    { value: "customer.contactTitle", width: "*", headerStyle: headerStyle },
    { value: "=[@]", caption: "Address", width: "3*", headerStyle: headerStyle }
]);
// Set custom view into tableSheet.
tableSheet.setDataView(myView);