# Row names in uibuilder tables

**URL:** <https://discourse.nodered.org/t/row-names-in-uibuilder-tables/92710>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [27 October 2024 09:15 UTC](https://discourse.nodered.org/t/row-names-in-uibuilder-tables/92710 "2024-10-27T09:15:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [27 October 2024 09:15 UTC](https://discourse.nodered.org/t/row-names-in-uibuilder-tables/92710/1 "2024-10-27T09:15:56Z")

</div>

I have a standard object like this:

```auto
{
    "Apples": {
        "review": 1,
        "vote": 2
    },
    "Bananas": {
        "review": 2,
        "vote": 18
    },
    "Pears": {
        "review": 8,
        "vote": 179
    }
}

```

Setting up a table with an uib-element I get a 2x3 table with column names `review` and `vote`.  
How can I also have row names as `Apples`, `Bananas` and `Pears`?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 October 2024 15:59 UTC](https://discourse.nodered.org/t/row-names-in-uibuilder-tables/92710/2 "2024-10-27T15:59:29Z")

</div>

Hi, the simplest way is to add the property to the content as well:

```json
{
    "Apples": {
        "fruit": "Apples",
        "review": 1,
        "vote": 2
    },
    "Bananas": {
        "fruit": "Bananas",
        "review": 2,
        "vote": 18
    },
    "Pears": {
        "fruit": "Pears",
        "review": 8,
        "vote": 179
    }
}

```

I assume you are using `uib-element` set to "Simple Table". All it does with an object of objects input is to add an attribute `data-row-name` to each table body row. This makes it easier to target for updates. e.g. `tr[data-row-name="Bananas"] > td[data-col-name="vote"]`

Tables, of course, can be arbitrarily complex so having a no-code option to cover all bases is extremely complex. In such cases, it is generally better to use one of the existing excellent table libraries and to send the data direct to the front end to interact with the table library.

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [27 October 2024 16:13 UTC](https://discourse.nodered.org/t/row-names-in-uibuilder-tables/92710/3 "2024-10-27T16:13:54Z")

</div>

Yes. I am using Google Charts all over my project, but I was curious to make some test with `uib-element`.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 November 2024 16:14 UTC](https://discourse.nodered.org/t/row-names-in-uibuilder-tables/92710/4 "2024-11-10T16:14:29Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.