Is there a way to load cell metadata in handsontable using loaddata?

Question

I'm using handsontable as more or less a gui for a separate backend datastore that uses lokijs. My lokijs datastore has the row, column, the datum, and some metadata.

The user can take a few actions that adjust the db and reloads the page. I have a function that converts the lokijs store to a 2d array and calls loadData on it, which refreshes the page the users see.

The problem: users can mark a cell as 'invalid', which turns the cell red and updates the lokijs db with an 'invalid = true' boolean. Users can also hide columns. On the backend this refreshes handsontable by creating a new 2d array that excludes the selected column and calls loaddata.

However, hiding cells won't play nice with column colors. The way I color cells is like so:

    cells: function (row, col, prop) {
        var cellProperties = {};
        var cell = cells.findOne({ "col": {"$eq": col}, "row": {"$eq": row}});

        if (cell.invalid === true) {
            cellProperties.renderer = highlightRowRenderer; //colors red
        }
    return cellProperties;

You may be able to see the problem here -- if a column is hidden, there's an off by one error on highlighting, so a different cell gets hidden on the highlight.

Now a way to fix this is on load data, pass highlighting information in as metadata. Unfortunately I can't figure out how to do this. I'd imagine it looks something like this:

var data = 
  [
    [ { data: 5, color: red }, { data: 7, color: blue} ], 
    [ { data: 3, color: green}, { data: 2 } ] 
  ];
hot.loadData(data);

but I'm not sure what it is exactly. There appears to be a similar concern addressed here but it only seems to handle non-dynamically sized tables.

Any suggestions would be very much appreciated!

Answer 1

As of 1/2/18, this is not possible :(