Handsontable example

by Alexandre Yembo

HTML

<div id="example1" class="hot handsontable htColumnHeaders"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">

JavaScript

var SingleDataPointTemplate = {
    nestedHeaders:
    {
        label: null,
        colspan: 1
    },
    columns: '#column'
}


var MultipleSelectionTemplate = {
    nestedHeaders:
    {
        label: null,
        colspan: 2
    },
    columns: ['#column1', '#column2']

}


/**
 * templates = [SingleDataPointTemplate, MultipleSelectionTemplate] --> returns from the Backend
 *  template: 'MultipleSelectionTemplate',
        data: [{
            id: 10,
            x1: 20,
            x2: 10,
            x3: 4,
            Mean: 14,
            Range: 20,
            Std: 23,
            Summation: 44,
            SpcResult: null
        },
 * @param {any} templates
 */
var getTemplates = function (dataFromServer) {
    var group = [];
    var columns = [];
    var columnsRaw = [];
    var hiddenColumns = [];
    var opts = [];
    var colIdx = 0;

    /*Create column*/

    for (var tmpl in dataFromServer[0]) {
        var el = dataFromServer[0][tmpl];
        var cols = el.data;
        var colspan = 0;
        for (var col in cols) {
            columns.push(col);
            if (cols[col].hide) {
                hiddenColumns.push(colIdx);
            }
            columnsRaw.push(cols[col].label);
            colspan++;
            colIdx++

        }

        var nestedHeaders = this[el.template].nestedHeaders;
        nestedHeaders.label = el.name;
        nestedHeaders.colspan = colspan;
        group.push(nestedHeaders);
    }

    /*GetData*/

    dataFromServer.forEach(function (templates) {
        var oData = {};
        for (var tmpl in templates) {
            var el = templates[tmpl];
            if (el && this[el.template]) {
                $.extend(oData, el["data"].value);
            }
        }

        opts.push(oData);
    });


    var data = [];
    var properties = [];

    opts.forEach(function (e) {
        data = data.concat(model(e));
    });

    columns.forEach(function (e) {
        properties = properties.concat({ data:...