I am just starting to work on Dashboard 2.0. My flow is a simple table that is populated by msg.payload The issue I am trying to work out is that if I use <template v-slot:header.current> all the items in my payload appear as they should and the column sort icon is visible and works as it should. However when I try to create custom headers using <template v-slot:header.(column index)> the column names appear as they should and I can sort on the column but the sort icon is broken.
Attached is my test flow for review and comment. Once again I am indebted to the Node-RED folks who advise me.
[{"id":"d4aec73d6b783d30","type":"ui-template","z":"5a0222bcbaf1744c","group":"7843c3d08c03a99b","page":"","ui":"","name":"Test Table","order":3,"width":"0","height":"0","head":"","format":"<template>\n\n <!-- Input field for searching tasks -->\n <v-text-field v-model=\"search\" label=\"Search\" prepend-inner-icon=\"mdi-magnify\" single-line variant=\"outlined\" hide-details></v-text-field>\n\n <v-data-table v-model:search=\"search\" :items=\"msg?.payload\">\n\n <template v-slot:header.id>\n <div class=\"text-center\">ID</div>\n </template>\n\n <template v-slot:header.servicetype>\n <div class=\"text-center\">Type</div>\n </template>\n \n <template v-slot:header.servicename>\n <div class=\"text-center\">Name</div>\n </template>\n \n <template v-slot:header.account>\n <div class=\"text-center\">Account</div>\n </template> \n \n <template v-slot:header.websiteurl>\n <div class=\"text-center\">Web Site</div>\n </template>\n \n <template v-slot:header.username>\n <div class=\"text-center\">User</div>\n </template>\n \n <template v-slot:header.password>\n <div class=\"text-center\">Password</div>\n </template>\n \n <template v-slot:header.notes>\n <div class=\"text-center\">Notes</div>\n </template>\n \n <template v-slot:header.passwordhint>\n <div class=\"text-center\">Hint</div>\n </template>\n \n <template v-slot:header.keyinfo>\n <div class=\"text-center\">Key</div>\n </template>\n \n <template v-slot:header.passphrase>\n <div class=\"text-center\">Passphrase</div>\n </template>\n \n <template v-slot:header.dt>\n <div class=\"text-center\">Date</div>\n </template> \n\n </v-data-table>\n\n</template>\n\n<script>\n export default {\n data () {\n return {\n search: ''\n }\n },\n methods: {\n // add a function to determine the color of the progress bar given the row's item\n\n }\n }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":780,"y":280,"wires":[[]]},{"id":"e294beaa4d1aa174","type":"template","z":"5a0222bcbaf1744c","name":"","field":"payload","fieldType":"msg","format":"json","syntax":"plain","template":"[\n {\n \"id\": 295,\n \"servicetype\": \"Test\",\n \"servicename\": \"Darth Vader\",\n \"websiteurl\": \"https://en.wikipedia.org/wiki/Star_Wars\",\n \"account\": \"Tatooine\",\n \"username\": \"Jabba\",\n \"password\": \"theHutt\",\n \"notes\": \"Tuskin Raiders\",\n \"passwordhint\": \"Obi-Wan Kenobi\",\n \"keyinfo\": \"\",\n \"passphrase\": \"Jedi\",\n \"dt\": \"2025-03-12T18:57:13.000Z\"\n },\n {\n \"id\": 298,\n \"servicetype\": \"Test\",\n \"servicename\": \"Star Trek\",\n \"websiteurl\": \"https://startrek.com\",\n \"account\": \"Officer\",\n \"username\": \"James\",\n \"password\": \"Kirk\",\n \"notes\": \"Kahn\",\n \"passwordhint\": \"Remember\",\n \"keyinfo\": \"\",\n \"passphrase\": \"Spock\",\n \"dt\": \"2025-03-13T18:57:13.000Z\"\n }\n]","output":"json","x":620,"y":280,"wires":[["d4aec73d6b783d30"]]},{"id":"174c0abbf7295584","type":"inject","z":"5a0222bcbaf1744c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":480,"y":280,"wires":[["e294beaa4d1aa174"]]},{"id":"7843c3d08c03a99b","type":"ui-group","name":"Group 1","page":"d73efe82f8828532","width":"12","height":1,"order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d73efe82f8828532","type":"ui-page","name":"Password","ui":"33caac1cdd657608","path":"/page1","icon":"home","layout":"grid","theme":"9cbd78d9d6b8dd9a","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"33caac1cdd657608","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true},{"id":"9cbd78d9d6b8dd9a","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
Regards
