I have been trying to work through v-data-table in template node under dashboard 2.0 and have a problem getting basic functions to work. My data is passed in from an mqtt topic as individual JSON items and passed through a Join which now just collects 20 items and pass them along. My code in template node is as follows:
<template>
<div id="app">
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="outlined" hide-details></v-text-field>
<v-data-table v-model:search="search" :items="msg?.payload" class="elevation-1" :items-per-page="20">
<template v-slot:header.Event_Date_Time>
<div class="text-center">Event Time</div>
</template>
<template v-slot:item.Trade_Size="{ item }">
{{ parseFloat(item.Trade_Size).toFixed(2) }}
</template>
</v-data-table>
</div>
</template>
<script>
export default {
data () {
return {
search: '',
headers: [
{ text: 'Symbol', value: 'Symbol'},
{ text: 'T1', value: 'T1'},
{ text: 'Event Date Time', value: 'Event_Date_Time'},
{ text: 'NumQuotes', value: 'NumQuotes' },
{ text: 'BBO', value: 'BBO'},
{ text: 'NumTrades', value: 'NumTrades'},
{ text: 'Dollars', value: 'Dollars'},
{ text: 'T3', value: 'T3'},
{ text: 'Trade_Size', value: 'Trade_Size' }
],
}
},
}
</script>
A snippet of the flow is as follows:
[
{
"id": "99bf76d32bd8ec62",
"type": "mqtt in",
"z": "513b99fa31e5eec8",
"name": "",
"topic": "hft1_data",
"qos": "2",
"datatype": "json",
"broker": "71c8dd42d4b7b52a",
"nl": false,
"rap": true,
"rh": 0,
"inputs": 0,
"x": 140,
"y": 700,
"wires": [
[
"85ab316cc63d0164"
]
]
},
{
"id": "85ab316cc63d0164",
"type": "join",
"z": "513b99fa31e5eec8",
"name": "",
"mode": "custom",
"build": "array",
"property": "payload",
"propertyType": "msg",
"key": "topic",
"joiner": "\\n",
"joinerType": "str",
"accumulate": false,
"timeout": "",
"count": "20",
"reduceRight": false,
"reduceExp": "",
"reduceInit": "",
"reduceInitType": "",
"reduceFixup": "",
"x": 310,
"y": 700,
"wires": [
[
"fa8ad3b2f620b117",
"b7af0e79e864239a"
]
]
},
{
"id": "b7af0e79e864239a",
"type": "ui-template",
"z": "513b99fa31e5eec8",
"group": "fb2e77ec2c2a5dd1",
"page": "",
"ui": "",
"name": "HFT_New",
"order": 0,
"width": 0,
"height": 0,
"head": "",
"format": "<template>\n <div id=\"app\">\n <v-text-field v-model=\"search\" label=\"Search\" prepend-inner-icon=\"mdi-magnify\" single-line variant=\"outlined\" hide-details></v-text-field>\n <v-data-table v-model:search=\"search\" :items=\"msg?.payload\" class=\"elevation-1\" :items-per-page=\"20\">\n <!-- <v-data-table v-model:search=\"search\" :items=\"items\" :headers=\"headers\" class=\"elevation-1\" :items-per-page=\"20\"> -->\n <!-- <v-data-table :key=\"tableKey\" v-model:search=\"search\" :items=\"items\" :headers=\"headers\" class=\"elevation-1\" :items-per-page=\"20\"> -->\n <template v-slot:header.Event_Date_Time>\n <div class=\"text-center\">Event Time</div>\n </template>\n <template v-slot:item.Trade_Size=\"{ item }\">\n {{ parseFloat(item.Trade_Size).toFixed(2) }}\n </template>\n </v-data-table>\n </div>\n</template>\n\n<script>\n export default {\n data () {\n return {\n search: '',\n headers: [\n { text: 'Symbol', value: 'Symbol'},\n { text: 'T1', value: 'T1'},\n { text: 'Event Date Time', value: 'Event_Date_Time'},\n { text: 'NumQuotes', value: 'NumQuotes' },\n { text: 'BBO', value: 'BBO'},\n { text: 'NumTrades', value: 'NumTrades'},\n { text: 'Dollars', value: 'Dollars'},\n { text: 'T3', value: 'T3'},\n { text: 'Trade_Size', value: 'Trade_Size' }\n ],\n }\n },\n }\n</script>\n\n<style>\n /* .v-data-table { width: 800px; } */\n// define any styles here - supports raw CSS\n/* .v-field__field {padding: 0 0px 0 6px !important; height:20px; min-height: 20px;}\n.v-field__input{padding: 0 0px 0 6px !important; height:20px; min-height: 20px;}\n.v-data-table { width: 800px; }\n.v-data-table-column--no-padding {padding: 0 0px 0 6px !important;}\n.v-data-table-column--align-start {padding: 0 0px 0 6px !important;}\n.v-data-table-header__content {color: black; font-weight: bold; height:40px; min-height: 40px; }\n.v-data-table-header__content:hover {color: black; font-weight: bold;}\n.v-data-table__th {background-color: #B3C1C6; white-space: nowrap;}\n.v-data-table .v-data-table__td {white-space: nowrap; height: 40px !important; min-height: 40px !important;}\n.v-table__wrapper tr:nth-child(even){background-color: #f2f2f2;}\n.v-table__wrapper tr:hover {background-color: #ddd; color: black;}\n.v-data-table-footer { background-color: #B3C1C6; color: black; height: 43px !important; min-height: 43px !important; padding:0;}\n.v-data-table-footer .v-input__control {height: 35px !important; min-height: 30px !important; padding:0}\n</style>",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 560,
"y": 700,
"wires": [
[]
]
},
{
"id": "71c8dd42d4b7b52a",
"type": "mqtt-broker",
"name": "Locat_Server",
"broker": "localhost",
"port": "1883",
"clientid": "",
"autoConnect": true,
"usetls": false,
"protocolVersion": "4",
"keepalive": "60",
"cleansession": true,
"autoUnsubscribe": true,
"birthTopic": "",
"birthQos": "0",
"birthRetain": "false",
"birthPayload": "",
"birthMsg": {},
"closeTopic": "",
"closeQos": "0",
"closeRetain": "false",
"closePayload": "",
"closeMsg": {},
"willTopic": "",
"willQos": "0",
"willRetain": "false",
"willPayload": "",
"willMsg": {},
"userProps": "",
"sessionExpiry": ""
},
{
"id": "fb2e77ec2c2a5dd1",
"type": "ui-group",
"name": "Table examples",
"page": "c466b7e4bb472f99",
"width": "6",
"height": "1",
"order": -1,
"showTitle": false,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "c466b7e4bb472f99",
"type": "ui-page",
"name": "Tables",
"ui": "957559fb8731ef90",
"path": "/tables",
"icon": "table",
"layout": "notebook",
"theme": "0d92c765bfad87e6",
"order": -1,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "957559fb8731ef90",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"navigationStyle": "default"
},
{
"id": "0d92c765bfad87e6",
"type": "ui-theme",
"name": "Basic Blue Theme",
"colors": {
"surface": "#4d58ff",
"primary": "#0094ce",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]
This is currently work to show data, do search and the headers columns do display. There was time when I needed to comment out the Header elements in the script to get the column headers to display, but somehow that no longer seems to be an issue, although I took no action to fix it.
In the attached code, I am seeking comment on why the Template items for v-slot:header.Event_Date_Time and for v-slot:item.Trade_Size do not have any affect on the formatting of the table.
In addition, Any pointers about tools to debug this when working in Node-red would be much appreciated. Thanks
