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

197 views

Skip to first unread message

Mathias Conradt

unread,

Aug 24, 2016, 2:59:17 PM8/24/16

to Handsontable

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 two fix columns and some additional ones that are known dynamically through the controller logic, put in scope as $scope.additionalDynamicColums.

<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-ng-repeat="column in additionalDynamicColumns" data="???" 
    title="column.label" renderer="measurementRenderer"></hot-column>

</hot-table>

The problem or question that I have now is: for the additional columns 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?

Mathias Conradt

unread,

Aug 24, 2016, 4:11:13 PM8/24/16

to Handsontable

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 hotDiv = angular.element($("hot-table"));
    var hotInstance = hotDiv.isolateScope().hotInstance;
    var translatedRow = hotInstance.getPlugin('columnSorting').translateRow(row);
    var rowData = hotInstance.getSourceData()[translatedRow];

    if (prop=='something') td.innerHTML = rowData. (... any special logic here)
    else if (prop=='someother') td.innerHTML = rowData. (... any special logic here)



    return td;
};

As for the <hot-column data="???">, I have it as <hot-column data="column.measurement">, which holds a name I can then use inside the custom renderer (passed as 'prop' parameter) to dinstinguish between the columns.