# Questions about the dashboard 2 template table

**URL:** https://discourse.nodered.org/t/questions-about-the-dashboard-2-template-table/87664
**Category:** Dashboard
**Tags:** node-red-dashboard, dashboard-2
**Created:** [3 May 2024 00:58 UTC](https://discourse.nodered.org/t/questions-about-the-dashboard-2-template-table/87664 "2024-05-03T00:58:10Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![2shlee](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/2shlee/32/89413_2.png) [@2shlee](https://discourse.nodered.org/u/2shlee)
#### Post date: [3 May 2024 00:58 UTC](https://discourse.nodered.org/t/questions-about-the-dashboard-2-template-table/87664/1 "2024-05-03T00:58:10Z")

</div>

I'm writing a program that shows these values in the table and shows the monitoring panel of the device when DeviceID is selected.

The DB outputs the location value and DeviceID.  
with this query.

```auto
var query = "SELECT DISTINCT location, deviceID FROM devicelist;";

msg.topic=query;

return msg;

```

The output values are as follows.

```auto
[{"location":"1","deviceID":1},
{"location":"1","deviceID":2},
{"location":"1","deviceID":3},
{"location":"1","deviceID":4},
{"location":"1","deviceID":5},
{"location":"1","deviceID":6},
{"location":"1","deviceID":7},
{"location":"1","deviceID":8},
{"location":"1","deviceID":9},
{"location":"1","deviceID":10}]

```

I want to create an interior table structure in the table using the "b-table" of "vue bootstrap".

What I want to do is to separate and output the location ID, and if I click the location ID, I will output the DeviceID table with the same location ID.  
In other words, if you click on a row with location=1 in the table, all DeviceIDs with location 1 will be output as another table. (using "row-details slot")

So far, I've only written template nodes that handle msg.payload, which is the result I got from the DB. Below is the corresponding code.

```auto
<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Location</th>
          <th>Device ID</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.deviceID">
          <td>{{ item.location }}</td>
          <td>{{ item.deviceID }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: ['msg'],
  computed: {
    data() {
      return this.msg.payload;
    }
  }
};
</script>

```

I only see one common location value here, and when I click the location value, I would like to re-output the DeviceID table with the locationID that I clicked on, as shown below.

 ![img](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/2/c26599b07877aae56e5562324f6f9826c4d3c556.png)

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [3 May 2024 11:50 UTC](https://discourse.nodered.org/t/questions-about-the-dashboard-2-template-table/87664/2 "2024-05-03T11:50:35Z")

</div>

Just to understand - you're looking to build nested tables? The top level table the locations and then the nested table each of the devices at that location?

---

<div class="post-metadata">

### Author: ![2shlee](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/2shlee/32/89413_2.png) [@2shlee](https://discourse.nodered.org/u/2shlee)
#### Post date: [7 May 2024 01:54 UTC](https://discourse.nodered.org/t/questions-about-the-dashboard-2-template-table/87664/3 "2024-05-07T01:54:04Z")

</div>

That's right. If you click the location=n line, you want the deviceID of "Devices" with "location=n" to be output.

---

<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: [6 June 2024 01:54 UTC](https://discourse.nodered.org/t/questions-about-the-dashboard-2-template-table/87664/4 "2024-06-06T01:54:55Z")

</div>

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