Handsontable custom object data

Question

I am trying to fill a Handsontable with objects. For example:

var data = [
    [{title: 'A1', style: '...'}, {title: 'B1', style: '...'}],
    [{title: 'A2', style: '...'}, {title: 'B2', style: '...'}],
];

Now I want that Handsontable only renders the title attribute into the cells and not the style. The style attribute is used to render the cells with special fomatting. How do I tell Handsontable to only use the title attribute?

Answer 1

var data = [
    [{title: 'A1', style: '...'}, {title: 'B1', style: '...'}],
    [{title: 'A2', style: '...'}, {title: 'B2', style: '...'}],
];

var filterArrays = function (arys) {
    let ret = [];
    for (let i = 0; i < data.length; i++) {
        let ary = [];
        for (let j = 0; j < data[i].length; j++) {
            ary.push(data[i][j].title);
        }
        ret.push(ary);
    }
    return ret;
}

var titles = filterArrays(data);

Here titles could be

titles = [
    ['A1', 'B1'],
    ['A2', 'B2']
];

So, you can use titles as a data. And styling your cells for each cells please check followings.

hot = new Handsontable(container, {
    data: titles,
    ...
    cells: function (row, col, prop) {
        cellProperties.renderer = function (instance, td, row, col, prop, value, cellProperties) {
            Handsontable.renderers.TextRenderer.apply(this, arguments);
            td.style = data[row][col].style;
        };
    },
    ...
});