열 헤더 맞춤 모드

테이블 시트는 열 헤더 맞춤 모드를 조정하기 위한 다음의 세 가지 유형을 지원합니다.

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

사용자는 헤더 및 뷰포트 데이터를 적절히 표시하기 위해 테이블 시트 보기의 지정된 열에 대해 열 헤더 맞춤 모드를 설정할 수 있습니다.

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
}

다음은 샘플 코드입니다.

//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);