The properties of header columns are as follows.

  • Default Properties : headerName, headerAlign, text.
  • Additional properties : children
  • If there is a single header, the text of the column property becomes the name of the header.

children property.

  • The children property has column objects as child nodes.
// Examples
let columns = [
    { name: 'area',    header: { text: 'area'   }, width: 150, type: 'string'},
    { name: 'manager', header: { text: 'manager'}, width: 100, type: 'string'},
    { text: "header Text 1", children: [ // parent header column
        {name: 'amt1', header: { text: 'amt1' }, width: 100, type: 'number'},
        {name: 'amt2', header: { text: 'amt2' }, width: 100, type: 'number'}  ]},
    { text: "header Text 2", children: [ // parent header column
        { name: 'amt3', header: { text: 'amt3'}, width: 100, type: 'number'},
        { text: "header Text 3", children: [ // parent header column
            {name: 'amt4', header: { text: 'amt4'}, width: 100, type: 'number'},
            {name: 'amt5', header: { text: 'amt5'}, width: 100, type: 'number'} ]}
        ]
    }
    , {name: 'note', header: { text: 'note'}, width: 100, type: 'string'}
];
grid1 = new TbsGrid('grid1');
let options = {};
grid1.setGrid(columns, options);
grid1.setData(grid_data);