My setup:
Node-RED inside the docker container
Palette @flowfuse/node-red-dashboard
Hello
I have a quick question
Let say I have 4 node in my flow
Inject node - every 1s
function node sending data to the table
template 1 node - tab template - tab1 - tab2 - tab3
template 2 node - table template
I need to render table template into one of the tabs
Here is the example code for the tab template node
<template>
<v-card>
<v-tabs
v-model="tab"
bg-color="primary"
>
<v-tab value="one">Item One</v-tab>
<v-tab value="two">Item Two</v-tab>
<v-tab value="three">Item Three</v-tab>
</v-tabs>
<v-card-text>
<v-tabs-window v-model="tab">
<v-tabs-window-item value="one">
One
</v-tabs-window-item>
<v-tabs-window-item value="two">
Two
</v-tabs-window-item>
<v-tabs-window-item value="three">
Three
</v-tabs-window-item>
</v-tabs-window>
</v-card-text>
</v-card>
</template>
<script>
export default {
data: () => ({
tab: null,
}),
}
</script>
Here is the example for table node
<template>
<v-data-table-server
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="serverItems"
:items-length="totalItems"
:loading="loading"
item-value="name"
@update:options="loadItems"
></v-data-table-server>
</template>
<script>
const desserts = [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22',
},
]
const FakeAPI = {
async fetch ({ page, itemsPerPage, sortBy }) {
return new Promise(resolve => {
setTimeout(() => {
const start = (page - 1) * itemsPerPage
const end = start + itemsPerPage
const items = desserts.slice()
if (sortBy.length) {
const sortKey = sortBy[0].key
const sortOrder = sortBy[0].order
items.sort((a, b) => {
const aValue = a[sortKey]
const bValue = b[sortKey]
return sortOrder === 'desc' ? bValue - aValue : aValue - bValue
})
}
const paginated = items.slice(start, end)
resolve({ items: paginated, total: items.length })
}, 500)
})
},
}
export default {
data: () => ({
itemsPerPage: 5,
headers: [
{
title: 'Dessert (100g serving)',
align: 'start',
sortable: false,
key: 'name',
},
{ title: 'Calories', key: 'calories', align: 'end' },
{ title: 'Fat (g)', key: 'fat', align: 'end' },
{ title: 'Carbs (g)', key: 'carbs', align: 'end' },
{ title: 'Protein (g)', key: 'protein', align: 'end' },
{ title: 'Iron (%)', key: 'iron', align: 'end' },
],
serverItems: [],
loading: true,
totalItems: 0,
}),
methods: {
loadItems ({ page, itemsPerPage, sortBy }) {
this.loading = true
FakeAPI.fetch({ page, itemsPerPage, sortBy }).then(({ items, total }) => {
this.serverItems = items
this.totalItems = total
this.loading = false
})
},
},
}
</script>
I tried doing this with chatgpt but its little confuse 
I wonder if that can even be done or I have to merge them into a single template node
