Working with v-data-table in Dashboard 2

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

Hello .. the main problem with this is how the keys were named .. it seems that you need to follow some naming rules when passing props to Vue components and in the case of slots.
I didnt fully understand the reasons but you can read some info here

Regarding your v-data-table you could do most of the thing you wanted to do outside v-slots which i found a little cleaner.

Renaming the Column, adjusting its alignment and width can be done when you define the header

 { title: "Event Date Time", key: "Event_Date_Time", align: 'center', width: '10%' },

Rounding the number toFixed can be done also in headers

 { title: "Trade Size", key: "tradeSize", value: item => item["Trade_Size"].toFixed(2)  }

Test Flow

[{"id":"b7af0e79e864239a","type":"ui-template","z":"54efb553244c241f","group":"fb2e77ec2c2a5dd1","page":"","ui":"","name":"HFT_New","order":0,"width":"0","height":"0","head":"","format":"<template>\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=\"items\" :headers=\"headers\" class=\"elevation-1\" >\n      <!-- <template v-slot:item.tradeSize=\"{ value }\">\n          {{ value.toFixed(2) }}\n        </template> -->\n      </v-data-table>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        search: '',\n        headers: [\n          { title: \"Symbol\", key: \"Symbol\"},\n          { title: \"T1\", key: \"T1\"},\n          { title: \"Event Date Time\", key: \"Event_Date_Time\", align: 'center', width: '10%' },\n          { title: \"NumQuotes\", key: \"NumQuotes\" },\n          { title: \"BBO\", key: \"BBO\"},\n          { title: \"NumTrades\", key: \"NumTrades\"},\n          { title: \"Dollars\", key: \"Dollars\"},\n          { title: \"T3\", key: \"T3\"},\n          { title: \"Trade Size\", key: \"tradeSize\", value: item => item[\"Trade_Size\"].toFixed(2)  }\n        ],\n\n        items: [\n          {\n              \"Symbol\": \"white\",\n              \"T1\": 159,\n              \"Event_Date_Time\": 6,\n              \"NumQuotes\": 24,\n              \"BBO\": 1,\n              \"NumTrades\": 223,\n              \"Dollars\": 5,\n              \"T3\": \"foo\",\n              \"Trade_Size\": 1452.327324\n          },\n          {\n              \"Symbol\": \"green\",\n              \"T1\": 159,\n              \"Event_Date_Time\": 6,\n              \"NumQuotes\": 24,\n              \"BBO\": 1,\n              \"NumTrades\": 223,\n              \"Dollars\": 5,\n              \"T3\": \"foo\",\n              \"Trade_Size\": 12.328324\n          },\n          {\n              \"Symbol\": \"blue\",\n              \"T1\": 159,\n              \"Event_Date_Time\": 6,\n              \"NumQuotes\": 24,\n              \"BBO\": 1,\n              \"NumTrades\": 223,\n              \"Dollars\": 5,\n              \"T3\": \"foo\",\n              \"Trade_Size\": 14.884324\n          },\n          {\n              \"Symbol\": \"yellow\",\n              \"T1\": 159,\n              \"Event_Date_Time\": 6,\n              \"NumQuotes\": 24,\n              \"BBO\": 1,\n              \"NumTrades\": 223,\n              \"Dollars\": 5,\n              \"T3\": \"foo\",\n              \"Trade_Size\": 120.324324\n          },\n          {\n              \"Symbol\": \"white\",\n              \"T1\": 159,\n              \"Event_Date_Time\": 6,\n              \"NumQuotes\": 24,\n              \"BBO\": 1,\n              \"NumTrades\": 223,\n              \"Dollars\": 5,\n              \"T3\": \"foo\",\n              \"Trade_Size\": 412.124324\n          },\n          {\n              \"Symbol\": \"red\",\n              \"T1\": 159,\n              \"Event_Date_Time\": 6,\n              \"NumQuotes\": 24,\n              \"BBO\": 1,\n              \"NumTrades\": 223,\n              \"Dollars\": 5,\n              \"T3\": \"foo\",\n              \"Trade_Size\": 11.314324\n          },\n          {\n              \"Symbol\": \"blue\",\n              \"T1\": 159,\n              \"Event_Date_Time\": 6,\n              \"NumQuotes\": 24,\n              \"BBO\": 1,\n              \"NumTrades\": 223,\n              \"Dollars\": 5,\n              \"T3\": \"foo\",\n              \"Trade_Size\": 234.121324\n           }\n          ]\n      }\n    },\n  }\n</script>\n\n<style>\n\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":440,"y":2920,"wires":[[]]},{"id":"fb2e77ec2c2a5dd1","type":"ui-group","name":"Table examples","page":"c466b7e4bb472f99","width":"25","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":"grid","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"}}]

ps. its better to provide some sample data next time to make it easier to reproduce the problem since we dont have your mqtt nodes etc

1 Like

Thanks for the leads on this. With respect to the data, here is a snippet of the msg.payload.

[{"Symbol":"IWM","T1":"0","Event_Date_Time":"2024-05-05T16:00:00","NumQuotes":"1076","BBO":"186","NumTrades":"7","Dollars":"81235463","T3":"","Trade_Size":11605066.142857144},{"Symbol":"SPY","T1":"0","Event_Date_Time":"2024-05-05T16:00:00","NumQuotes":"3165","BBO":"968","NumTrades":"208","Dollars":"1302322784","T3":"","Trade_Size":6261167.230769231},{"Symbol":"IVV","T1":"0","Event_Date_Time":"2024-05-05T16:00:00","NumQuotes":"1100","BBO":"187","NumTrades":"2","Dollars":"38129494","T3":"","Trade_Size":19064747},{"Symbol":"VOO","T1":"0","Event_Date_Time":"2024-05-05T16:00:00","NumQuotes":"1157","BBO":"193","NumTrades":"4","Dollars":"34531262","T3":"","Trade_Size":8632815.5},{"Symbol":"SPXL","T1":"0","Event_Date_Time":"2024-05-05T16:00:00","NumQuotes":"1010","BBO":"188","NumTrades":"4","Dollars":"2756262","T3":"","Trade_Size":689065.5},{"Symbol":"SSO","T1":"0","Event_Date_Time":"2024-05-05T16:00:00","NumQuotes":"1017","BBO":"118","NumTrades":"4","Dollars":"1979570","T3":"","Trade_Size":494892.5},{"Symbol":"QQQ","T1":"0","Event_Date_Time":"2024-05-05T16:00:01","NumQuotes":"1606","BBO":"561","NumTrades":"5","Dollars":"523917","T3":"","Trade_Size":104783.4},{"Symbol":"SQQQ","T1":"0","Event_Date_Time":"2024-05-05T16:00:01","NumQuotes":"1289","BBO":"198","NumTrades":"0","Dollars":"0","T3":"","Trade_Size":0},{"Symbol":"SPY","T1":"0","Event_Date_Time":"2024-05-05T16:00:01","NumQuotes":"1969","BBO":"550","NumTrades":"61","Dollars":"10591845","T3":"","Trade_Size":173636.80327868852},{"Symbol":"PSQ","T1":"0","Event_Date_Time":"2024-05-05T16:00:01","NumQuotes":"1118","BBO":"176","NumTrades":"0","Dollars":"0","T3":"","Trade_Size":0},{"Symbol":"SPY","T1":"0","Event_Date_Time":"2024-05-05T16:00:02","NumQuotes":"1770","BBO":"537","NumTrades":"100","Dollars":"17706538","T3":"","Trade_Size":177065.38},{"Symbol":"QQQ","T1":"0","Event_Date_Time":"2024-05-05T16:00:02","NumQuotes":"1307","BBO":"459","NumTrades":"9","Dollars":"925011","T3":"","Trade_Size":102779},{"Symbol":"QQQ","T1":"0","Event_Date_Time":"2024-05-05T16:00:06","NumQuotes":"1185","BBO":"344","NumTrades":"16","Dollars":"983838","T3":"","Trade_Size":61489.875},{"Symbol":"SPY","T1":"0","Event_Date_Time":"2024-05-05T16:00:06","NumQuotes":"1367","BBO":"437","NumTrades":"28","Dollars":"4854083","T3":"","Trade_Size":173360.10714285713},{"Symbol":"SPY","T1":"0","Event_Date_Time":"2024-05-05T16:00:07","NumQuotes":"1101","BBO":"318","NumTrades":"6","Dollars":"554257","T3":"","Trade_Size":92376.16666666667},{"Symbol":"QQQ","T1":"0","Event_Date_Time":"2024-05-05T16:00:10","NumQuotes":"1132","BBO":"421","NumTrades":"28","Dollars":"1329580","T3":"","Trade_Size":47485},{"Symbol":"QQQ","T1":"0","Event_Date_Time":"2024-05-05T16:00:17","NumQuotes":"1000","BBO":"331","NumTrades":"4","Dollars":"130685","T3":"","Trade_Size":32671.25},{"Symbol":"SPY","T1":"0","Event_Date_Time":"2024-05-05T16:00:18","NumQuotes":"1236","BBO":"413","NumTrades":"40","Dollars":"3547751","T3":"","Trade_Size":88693.775},{"Symbol":"QQQ","T1":"0","Event_Date_Time":"2024-05-05T16:00:18","NumQuotes":"1051","BBO":"420","NumTrades":"5","Dollars":"187323","T3":"","Trade_Size":37464.6},{"Symbol":"SPY","T1":"0","Event_Date_Time":"2024-05-05T16:00:21","NumQuotes":"1069","BBO":"284","NumTrades":"170","Dollars":"22353166","T3":"","Trade_Size":131489.2117647059}]```

I tested also with your data and it works fine .. with one small change though
During my test i forgot to rename the key to an acceptable key name (kebab-case can work instead of camelCase)

In case you still want to use slots :

<template>
    <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" :headers="headers" class="elevation-1" >
      <template v-slot:item.trade-size="{ value }">
          {{ value.toFixed(2) }}
        </template>
      </v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        search: '',
        headers: [
          { title: "Symbol", key: "Symbol"},
          { title: "T1", key: "T1"},
          { title: "Event Date Time", key: "Event_Date_Time", align: 'center', width: '10%' },
          { title: "NumQuotes", key: "NumQuotes" },
          { title: "BBO", key: "BBO"},
          { title: "NumTrades", key: "NumTrades"},
          { title: "Dollars", key: "Dollars"},
          { title: "T3", key: "T3"},
          { title: "Trade Size", key: "trade-size", value: item => item["Trade_Size"]   } //value: item => item["Trade_Size"].toFixed(2)
        ],

      }
    },
  }
</script>

Thanks for the input on this. I don't think I would ever have found that case limitation on the slot names. I am marking Solution. I still have an issue that has the Trade Size column not sorting properly, but that is another issue. Thanks again for the input.

As I looked at this further if find that the following code seems to solve the caps problem and allows for formatting in a slot template, but it breaks the sorting with up and down arrows on a least the event_date_time column ... other columns still sort , but it seems like there are multiple sorted states not just the ascending and descending I would expect. Guess I need to keep digging...

<template>
  <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" :headers="headers" class="elevation-1">
    <template v-slot:item.event-date-time="{ value }">
      {{ new Date(value).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) }}
      {{ new Date(value).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) }}
    </template>
  </v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        search: '',
        headers: [
          { title: "Event Date Time", key: "event-date-time", value: "Event_Date_Time"},
          { title: "Grade", key: "Grade"},
          { title: "Prog Type", key: "ProgType"},
          { title: "Background", key: "Bckgrnd" },
          { title: "S1", key: "S1"},
          { title: "S2", key: "S2"},
          { title: "CT", key: "CT"},
          { title: "CB", key: "CB"},
          { title: "CS", key: "CS"}],
      }
    },
  }
</script>

Data for this ....

{"Event_Date_Time":"2024-04-25T09:30:01","Grade":"2","ProgType":"0","Bckgrnd":"0","S1":"251","S2":"595","CT":"1","CB":"0","Burst_Symbols":[["AAAU","6","219","47"],["AAL","738","3757","1180"],["AAPB","1","163","22"],["AAPD","1","192","24"],["AAPL","317","601","185"],["AAPU","4","298","66"],["ACES","1","240","29"],["ACWI","17","270","85"],["AEM","19","272","88"],["AGBA","94","225","63"],["AIRR","1","239","41"],["AIVL","1","252","38"],["ALV","29","300","73"],["AMAT","136","267","58"],["AMD","495","830","180"],["AMDL","1","423","83"],["AMZD","1","923","200"],["AMZN","3732","4528","1090"],["AMZU","6","903","235"],["AMZZ","0","765","55"],["ARKB","16","406","71"],["ARKG","46","322","48"],["ARKK","83","470","99"],["ARKQ","1","294","42"],["ARQT","21","227","68"],["ASML","46","237","70"],["AUSF","1","167","17"],["AZN","54","254","58"],["AZUL","86","322","95"],["BAC","55","336","76"],["BAMG","2","153","17"],["BB","22","168","57"],["BBCA","6","189","36"],["BBH","1","154","54"],["BEKE","12","176","74"],["BEPC","33","194","60"],["BERZ","8","309","45"],["BFOR","1","188","29"],["BHP","65","361","85"],["BIB","1","239","42"],["BIL","18","152","81"],["BIS","1","402","70"],["BITB","16","276","47"],["BITI","9","183","31"],["BITO","77","441","116"],["BITX","56","575","82"],["BMY","79","208","74"],["BND","15","167","36"],["BNKD","4","194","37"],["BNKU","13","263","52"],["BOIL","32","410","52"],["BP","24","309","101"],["BRRR","8","161","28"],["BSV","12","153","14"],["BTBT","37","182","48"],["BTCO","4","241","40"],["BTCW","1","204","42"],["BTFX","1","448","56"],["BUD","9","152","28"],["BULZ","5","431","62"],["BZQ","1","160","20"],["C","39","211","59"],["CAFG","1","323","0"],["CALF","14","163","14"],["CBLS","0","297","29"],["CBSE","0","198","24"],["CCJ","70","152","45"],["CCL","32","192","38"],["CDL","1","238","47"],["CFO","1","197","54"],["CGC","57","236","61"],["CGGR","12","210","22"],["CIX","1","208","124"],["CLOU","1","151","29"],["CLSK","51","214","113"],["CMCL","2","154","50"],["CMCSA","166","416","148"],["CMT","1","165","58"],["CNHI","8","175","27"],["CNI","45","199","59"],["CNRG","1","204","11"],["COIN","322","503","128"],["CONL","109","642","137"],["CONY","31","167","17"],["CSA","0","265","52"],["CSB","1","365","73"],["CSCO","116","426","116"],["CUK","3","235","56"],["CURE","1","157","21"],["CZA","1","215","87"],["DBA","2","182","42"],["DCMT","0","168","32"],["DDM","22","890","261"],["DEEP","1","218","37"],["DEUS","1","164","25"],["DFAC","2","160","23"],["DFEN","29","417","76"],["DFSV","2","153","48"],["DGRO","10","230","21"],["DGRS","2","338","71"],["DGRW","0","221","43"],["DIA","112","2193","559"],["DIVB","2","186","21"],["DKNG","110","208","35"],["DOG","7","193","71"],["DPST","11","301","64"],["DRIV","5","224","60"],["DSI","1","213","25"],["DUSL","1","241","51"],["DUST","16","281","42"],["DVLU","1","224","64"],["DVY","2","170","20"],["DWAS","1","282","54"],["DXD","24","643","265"],["DYNF","3","160","38"],["E","3","180","32"],["ECLN","0","154","1"],["EDIT","75","157","37"],["EEM","41","807","124"],["EEMV","3","262","37"],["EES","1","239","31"],["EFA","23","591","109"],["EFIX","1","264","63"],["ELMD","6","248","73"],["ENB","27","154","43"],["EPI","9","169","35"],["EQAL","1","200","28"],["ERJ","30","168","43"],["ESGS","1","197","27"],["ESGU","1","173","46"],["EUM","1","158","18"],["EURN","6","223","44"],["EVAV","1","188","25"],["EVBN","1","227","76"],["EWI","1","174","54"],["EWW","5","195","34"],["EXPO","3","506","336"],["EZM","1","199","32"],["FAD","1","282","63"],["FAS","12","402","104"],["FAZ","28","575","123"],["FBL","0","397","66"],["FBT","1","206","20"],["FBTC","44","418","68"],["FCG","1","153","9"],["FCOM","11","285","74"],["FDIS","3","303","72"],["FDL","1","267","51"],["FDN","8","244","55"],["FENY","2","199","22"],["FEX","1","162","15"],["FFSM","1","152","0"],["FHLC","1","168","14"],["FIDU","3","186","28"],["FINX","3","173","42"],["FIVG","2","242","33"],["FIW","2","284","40"],["FLQM","1","237","35"],["FNDA","1","153","16"],["FNGD","11","296","35"],["FNGG","2","200","75"],["FNGU","18","277","66"],["FNK","1","206","52"],["FNY","1","188","40"],["FOVL","1","166","65"],["FPX","3","186","51"],["FTA","1","227","34"],["FTC","1","286","56"],["FTEC","4","347","39"],["FTXR","1","202","3"],["FUTY","6","208","25"],["FV","1","248","42"],["FVD","1","246","45"],["FXD","1","222","39"],["FXG","1","204","20"],["FXH","1","301","39"],["FXI","58","391","78"],["FXN","1","223","29"],["FXO","1","267","19"],["FXR","2","154","34"],["FXU","1","246","37"],["FYC","1","258","44"],["GBTC","24","460","64"],["GDX","17","321","61"],["GDXJ","47","612","123"],["GDXU","5","252","60"],["GFI","12","203","60"],["GGLL","16","901","249"],["GGLS","4","529","174"],["GLD","52","823","171"],["GLDM","7","439","83"],["GNOM","1","199","37"],["GOOG","461","530","160"],["GOOGL","1442","2030","528"],["GSEW","1","160","17"],["GSSC","1","283","19"],["GURU","1","205","50"],["GUSH","3","231","20"],["HACK","2","231","46"],["HIBL","4","263","40"],["HIBS","7","325","71"],["HLAL","1","158","12"],["HODL","4","191","45"],["HOOD","56","288","73"],["HSBC","50","285","92"],["HUSV","1","174","21"],["IAT","6","232","47"],["IAU","7","435","67"],["IAUM","2","187","55"],["IBIT","78","329","67"],["ICF","1","206","38"],["ICLN","23","220","64"],["IDU","5","343","49"],["IDV","19","162","33"],["IEFA","43","349","65"],["IEMG","39","447","106"],["IEO","2","213","33"],["IETC","3","173","39"],["IEZ","2","249","17"],["IFRA","11","248","26"],["IGM","2","279","54"],["IGSB","4","170","16"],["IGV","28","390","67"],["IHE","2","292","56"],["IJH","33","756","185"],["IJR","13","154","31"],["IMCG","4","164","24"],["INDA","48","397","84"],["INFY","29","211","29"],["INTC","556","2055","296"],["INTT","1","207","53"],["IQ","34","173","41"],["IQLT","1","152","26"],["ISCG","1","101","10"],["ITA","64","321","52"],["ITB","11","246","50"],["IUSG","2","290","75"],["IVV","109","1986","363"],["IVW","11","183","25"],["IWC","1","160","37"],["IWF","12","215","58"],["IWM","259","4054","1013"],["IWS","3","179","34"],["IXJ","46","284","58"],["IXP","3","207","24"],["IXUS","1","182","66"],["IYC","1","282","35"],["IYE","2","160","16"],["IYH","3","216","43"],["IYJ","1","170","36"],["IYM","1","194","36"],["IYT","2","222","39"],["IYW","13","208","26"],["JD","45","289","95"],["JDST","38","504","118"],["JETS","15","250","47"],["JHMM","5","201","28"],["JNK","5","204","39"],["JNUG","22","234","52"],["JPSE","1","167","22"],["JPSV","4","417","53"],["JXI","1","220","43"],["KBWB","1","267","42"],["KBWD","2","163","24"],["KDP","74","274","52"],["KHC","78","240","72"],["KOLD","9","381","78"],["KOMP","18","272","60"],["KRE","155","761","177"],["KWEB","17","179","52"],["KXI","6","185","32"],["LABD","75","1400","289"],["LABU","96","574","81"],["LCG","1","156","22"],["LEAD","1","174","21"],["LRGE","1","206","14"],["LUNR","88","227","48"],["MAKX","0","151","27"],["MARA","163","824","139"],["MDCP","1","184","18"],["MDLZ","79","400","106"],["MDY","19","485","161"],["META","869","440","68"],["MFC","28","348","94"],["MGK","18","281","48"],["MI","174","198","9"],["MIDE","0","173","0"],["MIDU","3","195","32"],["MLPX","6","177","22"],["MOAT","6","284","45"],["MRGR","0","253","0"],["MRVL","106","338","134"],["MSFU","35","195","57"],["MSOS","46","227","57"],["MSOX","4","209","43"],["MTUM","14","278","45"],["MU","216","442","87"],["NAIL","19","227","46"],["NBSM","1","294","1"],["NETZ","3","169","25"],["NHC","1","242","145"],["NOBL","5","253","34"],["NRGD","1","384","75"],["NRGU","2","200","40"],["NUGT","4","169","34"],["NULG","4","178","30"],["NUMG","2","219","49"],["NUMV","1","151","38"],["NUSC","1","186","35"],["NVD","14","423","66"],["NVDA","668","581","139"],["NVDD","1","241","21"],["NVDL","78","1341","288"],["NVDQ","38","251","38"],["NVDS","62","962","211"],["NVDU","5","701","172"],["NVDX","50","667","110"],["NVO","3","175","30"],["OIH","4","273","49"],["OILD","0","254","56"],["OILU","3","284","51"],["OMFL","5","218","22"],["ON","61","226","73"],["ONEQ","1","157","46"],["ONEV","1","182","23"],["ONLN","1","229","66"],["OPEN","114","471","123"],["OSCV","0","250","0"],["OUNZ","1","278","92"],["OUSA","1","198","43"],["PALL","55","274","143"],["PARA","76","187","31"],["PAVE","19","342","52"],["PBW","2","156","19"],["PCEF","1","154","20"],["PCSA","253","829","138"],["PCY","1","200","20"],["PDP","2","175","28"],["PEJ","1","188","18"],["PEP","185","268","77"],["PEZ","1","230","50"],["PGJ","2","193","62"],["PHO","4","248","45"],["PILL","5","202","18"],["PJP","2","247","19"],["PKW","1","187","34"],["PLUG","21","200","38"],["POWA","1","161","25"],["PPA","5","177","24"],["PPH","2","208","37"],["PRF","3","177","40"],["PRN","1","205","48"],["PSCD","1","236","46"],["PSCE","1","161","17"],["PSCI","1","187","35"],["PSCM","0","167","55"],["PSCU","16","233","78"],["PSI","1","229","58"],["PSL","1","260","54"],["PSQ","17","2219","433"],["PSR","1","182","45"],["PTH","1","314","49"],["PVAL","1","210","1"],["PWB","1","252","57"],["PWV","1","207","45"],["PXI","1","200","34"],["PYZ","2","158","25"],["QABA","1","405","45"],["QCLN","1","278","24"],["QID","69","1533","301"],["QLD","144","1840","561"],["QMOM","1","407","51"],["QQEW","2","256","44"],["QQQ","647","7516","2345"],["QQQD","1","198","15"],["QQQJ","2","203","11"],["QQQM","40","1449","325"],["QQQU","1","279","51"],["QQXT","1","169","31"],["QTEC","3","290","67"],["QUAL","15","217","61"],["QVAL","1","251","63"],["RBLD","0","211","9"],["RDVY","2","221","28"],["REGL","2","290","11"],["RIO","16","196","76"],["RIOT","148","538","142"],["RIVN","35","165","50"],["RNMC","0","188","52"],["RNSC","0","190","34"],["RODM","1","174","33"],["ROM","5","221","26"],["RPG","1","183","32"],["RSP","5","192","27"],["RSPC","1","203","28"],["RSPD","2","170","27"],["RSPS","1","199","24"],["RSPU","1","179","29"],["RTH","2","274","135"],["RWM","11","585","89"],["RWR","1","259","29"]]}

This seems to work with sorting

Flow :

[{"id":"b7af0e79e864239a","type":"ui-template","z":"54efb553244c241f","group":"fb2e77ec2c2a5dd1","page":"","ui":"","name":"HFT_New","order":0,"width":"0","height":"0","head":"","format":"<template>\n  <v-text-field v-model=\"search\" label=\"Search\" prepend-inner-icon=\"mdi-magnify\" single-line variant=\"outlined\"\n    hide-details></v-text-field>\n  <v-data-table v-model:search=\"search\" :items=\"msg?.payload\" :headers=\"headers\" density=\"compact\">\n    <!-- <template v-slot:headers=\"{ columns, isSorted, getSortIcon, toggleSort }\">\n      <tr>\n        <template v-for=\"column in columns\" :key=\"column.key\">\n          <td>\n            <span class=\"mr-2 cursor-pointer\" @click=\"() => toggleSort(column)\">{{ column.title }}</span>\n            <template v-if=\"isSorted(column)\">\n              <v-icon :icon=\"getSortIcon(column)\"></v-icon>\n            </template>\n            <v-icon v-if=\"column.removable\" icon=\"$close\" @click=\"() => remove(column.key)\"></v-icon>\n          </td>\n        </template>\n      </tr>\n    </template> -->\n  </v-data-table>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        search: '',\n        headers: [\n          { title: \"Symbol\", key: \"Symbol\"},\n          { title: \"T1\", key: \"T1\"},\n          { title: \"Event Date Time\", key: \"Event_Date_Time\", align: 'center', value: v => v[\"Event_Date_Time\"].replace(\"T\", \" \") },\n          { title: \"NumQuotes\", key: \"NumQuotes\" },\n          { title: \"BBO\", key: \"BBO\"},\n          { title: \"NumTrades\", key: \"NumTrades\"},\n          { title: \"Dollars\", key: \"Dollars\", align: 'end'},\n          { title: \"T3\", key: \"T3\"},\n          { title: \"Trade Size\", key: \"Trade_Size\", align: 'end', value: v => v[\"Trade_Size\"].toFixed(2)  }\n        ],\n      }\n    },\n  }\n</script>\n\n<style scoped>\n  th span {\n    font-weight: bold !important;\n  }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":520,"y":2800,"wires":[[]]},{"id":"202d0b41f2f8b4b5","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":150,"y":2800,"wires":[["b467592ba9d3e2b5"]]},{"id":"b467592ba9d3e2b5","type":"function","z":"54efb553244c241f","name":"data","func":"msg.payload = [\n    { \"Symbol\": \"IWM\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:00\", \"NumQuotes\": \"1076\", \"BBO\": \"186\", \"NumTrades\": \"7\", \"Dollars\": \"81235463\", \"T3\": \"\", \"Trade_Size\": 11605066.142857144 },\n    { \"Symbol\": \"SPY\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:00\", \"NumQuotes\": \"3165\", \"BBO\": \"968\", \"NumTrades\": \"208\", \"Dollars\": \"1302322784\", \"T3\": \"\", \"Trade_Size\": 6261167.230769231 },\n    { \"Symbol\": \"IVV\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:00\", \"NumQuotes\": \"1100\", \"BBO\": \"187\", \"NumTrades\": \"2\", \"Dollars\": \"38129494\", \"T3\": \"\", \"Trade_Size\": 19064747 },\n    { \"Symbol\": \"VOO\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:00\", \"NumQuotes\": \"1157\", \"BBO\": \"193\", \"NumTrades\": \"4\", \"Dollars\": \"34531262\", \"T3\": \"\", \"Trade_Size\": 8632815.5 },\n    { \"Symbol\": \"SPXL\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:00\", \"NumQuotes\": \"1010\", \"BBO\": \"188\", \"NumTrades\": \"4\", \"Dollars\": \"2756262\", \"T3\": \"\", \"Trade_Size\": 689065.5 },\n    { \"Symbol\": \"SSO\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:00\", \"NumQuotes\": \"1017\", \"BBO\": \"118\", \"NumTrades\": \"4\", \"Dollars\": \"1979570\", \"T3\": \"\", \"Trade_Size\": 494892.5 },\n    { \"Symbol\": \"QQQ\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:01\", \"NumQuotes\": \"1606\", \"BBO\": \"561\", \"NumTrades\": \"5\", \"Dollars\": \"523917\", \"T3\": \"\", \"Trade_Size\": 104783.4 },\n    { \"Symbol\": \"SQQQ\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:01\", \"NumQuotes\": \"1289\", \"BBO\": \"198\", \"NumTrades\": \"0\", \"Dollars\": \"0\", \"T3\": \"\", \"Trade_Size\": 0 },\n    { \"Symbol\": \"SPY\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:01\", \"NumQuotes\": \"1969\", \"BBO\": \"550\", \"NumTrades\": \"61\", \"Dollars\": \"10591845\", \"T3\": \"\", \"Trade_Size\": 173636.80327868852 },\n    { \"Symbol\": \"PSQ\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:01\", \"NumQuotes\": \"1118\", \"BBO\": \"176\", \"NumTrades\": \"0\", \"Dollars\": \"0\", \"T3\": \"\", \"Trade_Size\": 0 },\n    { \"Symbol\": \"SPY\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:02\", \"NumQuotes\": \"1770\", \"BBO\": \"537\", \"NumTrades\": \"100\", \"Dollars\": \"17706538\", \"T3\": \"\", \"Trade_Size\": 177065.38 },\n    { \"Symbol\": \"QQQ\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:02\", \"NumQuotes\": \"1307\", \"BBO\": \"459\", \"NumTrades\": \"9\", \"Dollars\": \"925011\", \"T3\": \"\", \"Trade_Size\": 102779 },\n    { \"Symbol\": \"QQQ\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:06\", \"NumQuotes\": \"1185\", \"BBO\": \"344\", \"NumTrades\": \"16\", \"Dollars\": \"983838\", \"T3\": \"\", \"Trade_Size\": 61489.875 },\n    { \"Symbol\": \"SPY\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:06\", \"NumQuotes\": \"1367\", \"BBO\": \"437\", \"NumTrades\": \"28\", \"Dollars\": \"4854083\", \"T3\": \"\", \"Trade_Size\": 173360.10714285713 },\n    { \"Symbol\": \"SPY\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:07\", \"NumQuotes\": \"1101\", \"BBO\": \"318\", \"NumTrades\": \"6\", \"Dollars\": \"554257\", \"T3\": \"\", \"Trade_Size\": 92376.16666666667 },\n    { \"Symbol\": \"QQQ\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:10\", \"NumQuotes\": \"1132\", \"BBO\": \"421\", \"NumTrades\": \"28\", \"Dollars\": \"1329580\", \"T3\": \"\", \"Trade_Size\": 47485 },\n    { \"Symbol\": \"QQQ\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:17\", \"NumQuotes\": \"1000\", \"BBO\": \"331\", \"NumTrades\": \"4\", \"Dollars\": \"130685\", \"T3\": \"\", \"Trade_Size\": 32671.25 },\n    { \"Symbol\": \"SPY\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:18\", \"NumQuotes\": \"1236\", \"BBO\": \"413\", \"NumTrades\": \"40\", \"Dollars\": \"3547751\", \"T3\": \"\", \"Trade_Size\": 88693.775 },\n    { \"Symbol\": \"QQQ\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:18\", \"NumQuotes\": \"1051\", \"BBO\": \"420\", \"NumTrades\": \"5\", \"Dollars\": \"187323\", \"T3\": \"\", \"Trade_Size\": 37464.6 },\n    { \"Symbol\": \"SPY\", \"T1\": \"0\", \"Event_Date_Time\": \"2024-05-05T16:00:21\", \"NumQuotes\": \"1069\", \"BBO\": \"284\", \"NumTrades\": \"170\", \"Dollars\": \"22353166\", \"T3\": \"\", \"Trade_Size\": 131489.2117647059 }\n]\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":310,"y":2800,"wires":[["c20676f82a7db3f1","b7af0e79e864239a"]]},{"id":"c20676f82a7db3f1","type":"debug","z":"54efb553244c241f","name":"debug 75","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":470,"y":2720,"wires":[]},{"id":"fb2e77ec2c2a5dd1","type":"ui-group","name":"Table examples","page":"c466b7e4bb472f99","width":"25","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":"grid","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":"#0080c0","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

I completely agree here. I'll add this to the documentation for D2.0 as this was a new one for me too and I've been working with this for months.

Couple of other pieces I noted that were missing in your initial example too btw:

  • You hadn't added the :headers="headers" into your v-data-table, so you'd defined them on your component, but not told the table about them
  • The headers docs says it should be title, not text for the key to define the primary text displayed as the header

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