handsontable: how to use an entire datarow (object) as data for a hot-column?

Question

Using the Angular directive of handsontable 0.26.x in my project first time, I have the following table:

The table is showing some items, which are in scope as $scope.plants, and has three fix columns. The third column is a bit special though, because I have a special renderer there, to which I want to pass the the entire data row object (plant).

<hot-table datarows="plants" settings="hotTableSettings">
  <hot-column data="name" title="Name"></hot-column>
  <hot-column data="power" title="Power"></hot-column>
  <hot-column data="???" title="AdditionalInfo" renderer="measurementRenderer"></hot-column>
</hot-table>

The problem or question that I have now is: for the third column I have my own custom renderer (measurementRenderer), which needs multiple information from a plant. So I need to pass the entire plant object that the hot-table is currently iterating through, and not just one attribute of it, as the data of the hot-column. It's because the rendering logic of my custom renderer is based on multiple attributes of my plant item, not just one.

In my code above, you can see where I put data="???". How can I reference to the plant object which is part of the list of <hot-table datarows="plants"...?

<hot-table> does not offer something like <hot-table datarows="plan in plants" and also nothing like <hot-column data='this' or <hot-column data='self' or <hot-column data='', as far as I can see. What would be the best approach here?

Answer 1

The solution I came up with is to lookup the row data from the table data source inside the renderer.

The renderer gets the row number as parameter, and since the table could be sorted, I translate the row number to the actual index of the datasource via translateRow method of the ColumnSortingPlugin.

In the end, I have my plant object in rowData and can render it as I like.

$scope.measurementRenderer = function (instance, td, row, col, prop, value, cellProperties) {

    var translatedRow = instance.getPlugin('columnSorting').translateRow(row);
    var rowData = instance.getSourceData()[translatedRow];

    td.innerHTML = rowData. (... any special logic here)

    return td;
};

As for the <hot-column data="???">, the data parameter is then actually not really relevant at all. Not sure if this is the most elegant solution, but it works.