Problem Creating Table in Template Node

[Ross Newby]

Hi, I'm following this guild: http://noderedguide.com/tutorial-node-red-dashboards-creating-your-own-ui-widget/, to create a table. The final table will read a boat load of sensor data and im hoping to make each row clickable to expand on the information on the record.

In the guide; msg.payoad in a JSON object which is passed to the template node. The template node then uses this to populate a table using ng-repeat. I've attached screenshots of my (almost) identical code, yet my output does not populate the table, any ideas?

Also, is there a way to make each row 'clickable' with onClick event?

Cheers! Ross

[Ross Newby]

Well now I feel stupid; the quotation marks " were incorrect after being copied from the tutorial webpage! It works now!

Does anyone have any pointers on how to go about implementing an on click listener? I don't want something simple; ideally, when the user clicks a row, a graph in a separate window will be displayed

Thanks in advance

[steve rickus]

Ross,

I'm using something similar to show an html table, highlight each row on hover, and send the row's data whenever I click anywhere on the row. I see that you are using the flex layout with divs/spans, so it may not work for you, unless you can assign the onclick event to the entire div?

Anyway, here is the content of my ui_template node:

<style>
    th {
        text-decoration: underline;
    }
    .numeric {
        text-align: right;
        padding-right: 15px;
    }
</style>

<table style="width: 100%;">
    <thead>
        <tr>
            <th>Site Id</th>
            <th>Site Name</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in msg.payload" ng-click="sendRow(row)">
            <td class="numeric">{{row.Id}}</td>
            <td>{{row.Name}}</td>
        </tr>
    </tbody>
</table>

<script>
(function($scope) {
    $scope.sendRow = function(obj) {
        //console.dir(obj);
        $scope.send({ "payload": obj });
    };
})(scope);
</script>

Then, you can wire the output of this node to another flow that switches pages (using the ui_control node). Just make sure to uncheck the "Pass through message from input" option on the template node.

--

Steve

[steve rickus]

Oops, this example doesn't include the row hover highlighting, which is pretty nice -- just add a css style directive like this:

    tbody tr:hover {
        color: darkorange;
        cursor: pointer;
    }

[Ross Newby]

Thank you Steve the code works great and its helped me a bunch in making an interactive table!