# Examples for node-red-node-ui-table

**URL:** <https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256>\
**Category:** Dashboard\
**Created:** [12 August 2019 17:52 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256 "2019-08-12T17:52:43Z")\
**Posts on this page:** 1\
**Showing post:** 71

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [23 February 2020 08:50 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/71 "2020-02-23T08:50:24Z")

</div>

It actually uses `cellClick` but never mind.

Yes it is. You can use `msg.ui_control` send other callbacks to tabulator or even take control over the complete layout. See some posts before 😉 [Ui-table supports ui\_control](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870)

I use this to do the complete setup of my tables.

_A little tip: I use a change node emitting a json object (or most of the time a sub flow with a json environment variable) to configure ui-table and do other things. I write the callback functions in vs-code (but the editor of a function node is fine too). Then I use the visual json editor to paste in the function. All escape sequencing of `" to \"` is done automatically_

```json
    "tabulator": {
        "responsiveLayout": "collapse",
        "responsiveLayoutCollapseStartOpen": false,
        "index": "$name",
        "layout": "fitColumns",
        "movableColumns": true,
        "groupBy": "",
        "columnResized": "function(column){ var newColumn = { field: column._column.field, visible: column._column.visible, width: column._column.width, widthFixed: column._column.widthFixed, widthStyled: column._column.widthStyled }; this.send({topic:this.config.topic,ui_control:{callback:'columnResized',columnWidths:newColumn}}); }",
        "columnMoved": "function(column, columns){ var newColumns=[]; columns.forEach(function (column) { newColumns.push({'field': column._column.definition.field, 'title': column._column.definition.title}); }); this.send({topic:this.config.topic,ui_control:{callback:'columnMoved',columns:newColumns}}); }",
        "rowFormatter": "function(row){ var data = row.getData(); switch (data.$state) { case \"lost\": row.getElement().style.backgroundColor = \"#9e2e66\"; row.getElement().style.color = \"#a6a6a6\"; break; case \"sleeping\": row.getElement().style.backgroundColor = \"#336699\"; break; case \"disconnected\": row.getElement().style.backgroundColor = \"#cc3300\"; row.getElement().style.color = \"#a6a6a6\"; break; case \"alert\": row.getElement().style.backgroundColor = \"#A6A6DF\"; break; case \"init\": row.getElement().style.backgroundColor = \"#f2f20d\"; break; case \"ready\": row.getElement().style.backgroundColor = \"\"; row.getElement().style.color = \"\"; break; } }",
        "columns": [
            {
                "formatter": "responsiveCollapse",
                "width": 30,
                "minWidth": 30,
                "align": "center",
                "resizable": false,
                "headerSort": false,
                "frozen": true,
                "title": "expand",
                "field": "expand",
                "headerVertical": "flip"
            },
            {
                "formatter": "function(cell, formatterParams, onRendered) { var html = cell.getValue(); return html; }",
                "title": "State",
                "field": "$stateIcon",
                "width": 100,
                "frozen": true,
                "headerVertical": "flip"
            },
´´´
--- cutted here ---
```

---

_[View the full topic](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256)._