열 헤더 사용자 정의

테이블 시트의 보기를 사용자 정의하려면 다음 3단계를 수행해야 합니다.

1. 데이터 관리자에 테이블을 추가합니다.
2. 다음 속성을 가진 사용자 정의 보기를 추가합니다.

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. 사용자 정의 보기를 테이블 시트로 설정합니다. 사용자는 보기의 헤더 스타일을 설정하여 헤더 스타일을 사용자 정의할 수 있습니다.

다음은 샘플 코드입니다.

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