Dynamic Columns

import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
import { CollectionView, toHeaderCase, ObservableArray, Control } from '@mescius/wijmo';
import { FlexGrid, Column } from '@mescius/wijmo.grid';
import { ListBox } from '@mescius/wijmo.input';
import { getData } from './data';
const columns = new CollectionView([], {
    collectionChanged: s => {
        updateListHTML(s.items);
        const leftButton = document.getElementById('leftBtn');
        if (s.itemCount == 0) {
            leftButton.disabled = true;
        }
        else {
            leftButton.disabled = false;
        }
        //button is not disabled when current position is 0 
        let dwnButton = document.getElementById('downBtn');
        if (s.itemCount > 1 && s.currentPosition < s.itemCount - 1) {
            dwnButton.disabled = false;
        }
    }
});
let columnsAvailable = new CollectionView();
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
    const upButton = document.getElementById('upBtn');
    const dwnButton = document.getElementById('downBtn');
    const leftButton = document.getElementById('leftBtn');
    const rightButton = document.getElementById('rightBtn');
    const data = getData(50);
    const fields = Object.keys(data[0]);
    columnsAvailable = new CollectionView(fields, {
        collectionChanged: (s) => {
            if (s.itemCount == 0) {
                rightButton.disabled = true;
            }
            else {
                rightButton.disabled = false;
            }
        }
    });
    //init columns add
    for (var i = 0; i < 3; i++) {
        columnsAvailable.moveCurrentToFirst();
        addColumn();
    }
    var theGrid = new FlexGrid('#theGrid', {
        deferResizing: true,
        autoGenerateColumns: false,
        columns: columns.items.map((col) => {
            return { binding: col, header: toHeaderCase(col) };
        }),
        draggedColumn: (s) => {
            var _columns = new ObservableArray();
            for (var i = 0; i < s.columns.length; i++) {
                _columns.push(s.columns[i].binding);
            }
            columns.sourceCollection = _columns;
            columns.refresh();
        },
        itemsSource: data,
    });
    //available columns list
    new ListBox('#addList', {
        itemsSource: columnsAvailable
    });
    //columns list
    new ListBox('#columnList', {
        selectedIndexChanged: s => {
            if (s.selectedIndex <= 0) {
                upButton.disabled = true;
            }
            else {
                upButton.disabled = false;
            }
            if (s.selectedIndex >= columns.itemCount - 1) {
                dwnButton.disabled = true;
            }
            else {
                dwnButton.disabled = false;
            }
        },
        itemsSource: columns
    });
    rightButton.addEventListener('click', () => {
        addColumn();
    });
    leftButton.addEventListener('click', () => {
        removeColumn();
    });
    upButton.addEventListener('click', (e) => {
        moveColumn(-1);
    });
    dwnButton.addEventListener('click', (e) => {
        moveColumn(1);
    });
}
function updateListHTML(items) {
    let html = '';
    items.forEach((item) => {
        html += `<li>${toHeaderCase(item)}</li>`;
    });
    document.querySelector('#selectedColumns').innerHTML = html;
    let grid = Control.getControl('#theGrid');
    if (grid) {
        grid.columns.clear();
        columns.items.forEach((col) => {
            grid.columns.push(new Column({
                binding: col,
                header: toHeaderCase(col)
            }));
        });
    }
}
// move item from columnsAvailable to columns
function addColumn() {
    var item = columnsAvailable.currentItem, index = columns.currentPosition;
    if (item) {
        columnsAvailable.remove(item);
        columns.sourceCollection.splice(Math.max(0, index), 0, item);
        columns.moveCurrentTo(item);
        columns.refresh();
    }
}
// move item from columns to columnsAvailable
function removeColumn() {
    var item = columns.currentItem, index = columnsAvailable.currentPosition;
    if (item) {
        columnsAvailable.sourceCollection.splice(Math.max(0, index), 0, item);
        columnsAvailable.refresh();
        columnsAvailable.moveCurrentTo(item);
        columns.remove(item);
    }
}
// move a column within the columns collection
function moveColumn(offset) {
    var item = columns.currentItem;
    if (item) {
        var arr = columns.sourceCollection, index = arr.indexOf(item), newIndex = index + offset;
        if (index > -1 && newIndex > -1) {
            arr.splice(index, 1);
            arr.splice(newIndex, 0, item);
            columns.moveCurrentTo(item);
            columns.refresh();
        }
    }
}