Column Header Fit Mode

Tablesheet supports three type to adjust the column header fit mode:

1. normal(default)
2. vertical
3. stack

Users can set the column header fit mode for the specified column in a tablesheet view in order to display the header and viewport data in a suitable manner.

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; // 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.
    headerFit?: "normal" | "vertical" | "stack" // the column header fit mode, default is normal
}

This is the sample code.

//add table
dataManager.addTable("myTable", {
    remote: {
        read: {
            url: "https://demodata.mescius.io/northwind/api/v1/Orders"
        }
    }
});
//add custom view
var myView = orderTable.addView("myView", [
    {value: 'orderId',caption: "OrderId", width: 45, headerFit: "stack"},
    {value: 'customerId', caption: "CustomerName", width: 50,  headerFit: "stack"},
    {value: 'employeeId', caption: "EmployeeId", width: 16, headerFit: "stack"},
    {value: 'orderDate', caption: "orderDate", width: 136, },
    {value: 'requiredDate', caption: "requiredDate", width: 136, headerFit: "vertical"},
    {value: 'shippedDate', caption: "ShippedDate", width: 136, headerFit: "normal"},
    {value: 'shipVia', caption: "ShipVia", width: 16, headerFit: "stack"},
    {value: 'freight', caption: "Freight", width: 45, headerFit: "stack"},
    {value: 'shipName', caption: "ShipName", width: 100, headerFit: "normal"}
]);
// Set custom view into tableSheet.
tableSheet.setDataView(myView);