The properties of top summary columns are as follows.

• Default Properties : name, align, text, className, summaryType

name property.

• This is the name of the summary column.

align property.

• You can align columns left and right.

text property.

• This is the label of the column.

summaryType property.

• Types include sum and avg.

// 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', scale: '18,2' },
        { 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: [
            {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'}
];
let topColumns =  [
        { name: "area", text: 'Area'  },
        { name: "amt1", align: 'left' , className: 'tbs-blue' , summaryType : 'sum' },
        { name: "amt2", align: 'right', className: 'tbs-blue' , summaryType : 'sum' },
        { name: "amt3", align: 'right', className: 'tbs-red'  , summaryType : 'sum' },
        { name: "amt4", align: 'right', className: 'tbs-red'  , summaryType : 'avg' },
        { name: "amt5", align: 'right', className: 'tbs-red'  , summaryType : 'avg' },
    ];
grid1 = new TbsGrid('grid1');
let options = {};
grid1.setTopColumns(topColumns);
grid1.setGrid(columns, options);

grid1.setData(grid_data);