Column Groups (Object Model)

import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo-core.css';
import './styles.css';
import { FlexGrid, ColumnGroup, ColumnGroupCollection } from '@mescius/wijmo.grid';
import { toggleClass } from '@mescius/wijmo';
import * as DataService from './data';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
    let theGrid = new FlexGrid('#theGrid', {
        headersVisibility: 'Column',
        alternatingRowStep: 0,
        showMarquee: true,
        showSelectedHeaders: 'All',
        autoGenerateColumns: false,
        columnGroups: new ColumnGroupCollection([
            new ColumnGroup({ binding: 'name', header: 'Name', width: 150 }),
            new ColumnGroup({ binding: 'currency', header: 'Curr', width: 80, align: 'center' }),
            new ColumnGroup({ header: 'Allocation', align: 'center', collapseTo: 'alloc.amount', columns: new ColumnGroupCollection([
                    new ColumnGroup({ binding: 'alloc.stock', header: 'Stocks', format: 'p0', width: 80 }),
                    new ColumnGroup({ binding: 'alloc.bond', header: 'Bonds', format: 'p0', width: 80 }),
                    new ColumnGroup({ header: 'Detail', align: 'center', columns: new ColumnGroupCollection([
                            new ColumnGroup({ binding: 'alloc.cash', header: 'Cash', format: 'p0', width: 80 }),
                            new ColumnGroup({ binding: 'alloc.other', header: 'Other', format: 'p0', width: 80 }),
                        ]) }),
                    new ColumnGroup({ binding: 'alloc.amount', header: 'Amount', format: 'c0', width: 100, cssClass: 'main-column' }),
                ]) }),
            new ColumnGroup({ header: 'Perf', align: 'center', columns: new ColumnGroupCollection([
                    new ColumnGroup({ header: 'Short', align: 'center', collapseTo: 'perf.ytd', isCollapsed: true, columns: new ColumnGroupCollection([
                            new ColumnGroup({ binding: 'perf.ytd', header: 'YTD', format: 'p2', width: 100, cssClass: 'main-column' }),
                            new ColumnGroup({ binding: 'perf.m1', header: '1 M', format: 'p2', width: 80 }),
                        ]) }),
                    new ColumnGroup({ header: 'Long', align: 'center', collapseTo: 'perf.m12', isCollapsed: true, columns: new ColumnGroupCollection([
                            new ColumnGroup({ binding: 'perf.m6', header: '6 M', format: 'p2', width: 80 }),
                            new ColumnGroup({ binding: 'perf.m12', header: '12 M', format: 'p2', width: 100, cssClassAll: 'main-column' }),
                        ]) }),
                ]) }),
        ]),
        itemsSource: DataService.getData(),
    });
    // init collapse/expand animation checkbox
    const setAnimation = (animated) => {
        toggleClass(theGrid.hostElement, 'animated', animated);
    };
    const animChk = document.getElementById('animated');
    animChk.addEventListener('click', e => setAnimation(e.target.checked));
    animChk.checked = true;
    setAnimation(animChk.checked);
    // init use cell templates checkbox
    const setUseTemplates = (useTemplates) => {
        const cellTemplate = useTemplates
            ? cell => {
                const grid = cell.row.grid;
                const rowIdx = cell.row.index;
                const colIdx = cell.col.index;
                const cssClass = grid.getCellData(rowIdx, colIdx, false) > .2 ? 'big-val' : 'small-val';
                const value = grid.getCellData(rowIdx, colIdx, true);
                return `<span class="${cssClass}">${value}</span>`;
            }
            : null;
        theGrid.getColumn('alloc.stock').cellTemplate = cellTemplate;
        theGrid.getColumn('alloc.bond').cellTemplate = cellTemplate;
        theGrid.getColumn('alloc.cash').cellTemplate = cellTemplate;
        theGrid.getColumn('alloc.other').cellTemplate = cellTemplate;
    };
    const tplChk = document.getElementById('templates');
    tplChk.addEventListener('click', e => setUseTemplates(e.target.checked));
    tplChk.checked = true;
    setUseTemplates(tplChk.checked);
}