Hi, doing some tests today to build a nice table in DB2 , trying to use v-table in template .
So far so good, but I have a problem with expandable rows :
I'm trying to replicate this from vuetify examples ( https://vuetifyjs.com/en/components/data-tables/basics/#expandable-rows):
But actually what I get in my table looks like this :
Maybe someone could help me to trouble shoot or give me a direction ?
Here is a code sample :
[
{
"id": "7239567b6bf2a2ca",
"type": "inject",
"z": "49f4dd83f48e75ca",
"name": "Trigger",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": "0.5",
"topic": "",
"payload": "",
"payloadType": "date",
"x": 1060,
"y": 280,
"wires": [
[
"26aee7d32cdea4e2"
]
]
},
{
"id": "3805253c14d46132",
"type": "ui-template",
"z": "49f4dd83f48e75ca",
"group": "fb2e77ec2c2a5dd1",
"page": "",
"ui": "",
"name": "File Explorer",
"order": 5,
"width": "0",
"height": "0",
"head": "",
"format": "<template>\n <!-- Provide an input text box to search the content -->\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\" :group-by=\"msg?.groupBy\" :headers=\"msg?.headers\"\n :sort-by=\"msg?.sortBy\" v-model=\"selected\" item-selectable=\"selectable\" show-expand select-strategy=\"all\"\n density=\"compact\" show-select return-object>\n\n <template v-slot:item.icon=\"{ item }\">\n <v-icon :icon=\"item.icon\"></v-icon>\n </template>\n\n <template v-slot:group-header=\"{ item, columns, toggleGroup, isGroupOpen }\">\n <tr>\n <td :colspan=\"columns.length\">\n <div class=\"d-flex align-center\">\n <v-btn :icon=\"isGroupOpen(item) ? '$expand' : '$next'\" color=\"medium-emphasis\" density=\"comfortable\"\n size=\"small\" variant=\"outlined\" @click=\"toggleGroup(item)\"></v-btn>\n\n <span class=\"ms-4\">Location Test: {{ item.value }}</span>\n </div>\n </td>\n </tr>\n </template>\n\n\n <template v-slot:item.format=\"{ value }\">\n <v-chip :border=\"`${getColor(value)} thin opacity-25`\" :color=\"getColor(value)\" :text=\"value\" size=\"small\"\n variant=\"elevated\">\n </v-chip>\n </template>\n\n <template v-slot:item.data-table-expand=\"{ internalItem, isExpanded, toggleExpand }\">\n <v-btn :append-icon=\"isExpanded(internalItem) ? 'mdi-chevron-up' : 'mdi-chevron-down'\"\n :text=\"isExpanded(internalItem) ? 'Collapse' : 'More info'\" class=\"text-none\" color=\"medium-emphasis\"\n size=\"small\" variant=\"text\" border slim @click=\"toggleExpand(internalItem)\"></v-btn>\n </template>\n\n <template v-slot:expanded-row=\"{ columns, item }\">\n <tr>\n <td :colspan=\"columns.length\" class=\"py-2\">\n <v-sheet rounded=\"lg\" border>\n <tbody class=\"bg-surface-light\">\n <tr>\n <th>Rating</th>\n <th>Synopsis</th>\n <th>Cast</th>\n </tr>\n </tbody>\n\n <tbody>\n <tr>\n <td>\n <v-rating :model-value=\"item.details.rating\" color=\"orange-darken-2\" density=\"comfortable\"\n size=\"x-small\" half-increments readonly></v-rating>\n </td>\n <td>{{ item.details.synopsis }}</td>\n <td>{{ item.details.cast.join(', ') }}</td>\n </tr>\n </tbody>\n </v-table>\n </v-sheet>\n </td>\n </tr>\n </template>\n\n\n </v-data-table>\n</template>\n\n<script>\n export default {\n data () {\n return {\n selected: [],\n search: ''\n }\n },\n watch: {\n selected: function () {\n this.send({topic:'selected', payload: this.selected});\n }\n },\n methods: {\n getColor: function (value) {\n if (value.includes(\"Vid\")) return 'error'\n else if (value.includes(\"Aud\")) return 'warning'\n else return 'success'\n }\n \n\n }\n }\n</script>",
"storeOutMessages": true,
"passthru": false,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 1450,
"y": 220,
"wires": [
[
"0f0acd5f60be7b78"
]
]
},
{
"id": "0f0acd5f60be7b78",
"type": "debug",
"z": "49f4dd83f48e75ca",
"name": "debug 2",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1610,
"y": 280,
"wires": []
},
{
"id": "26aee7d32cdea4e2",
"type": "function",
"z": "49f4dd83f48e75ca",
"name": "content with Children headers",
"func": "\nmsg.payload =\n [\n {\n \"name\": \"'Great Pyramid of Giza'\",\n \"location\": \"'Egypt'\",\n \"height\": \"'146.6'\",\n \"base\": \"'230.4'\",\n \"volume\": \"'2583285'\",\n \"constructionDate\": \"'c. 2580–2560 BC'\",\n \"details\": {\n \"synopsis\": 'Two imprisoned men bond over years, finding solace and redemption through acts of decency.',\n \"cast\": ['Tim Robbins', 'Morgan Freeman'],\n \"rating\": 3.5,\n },\n \"format\":\"Vid_1080i50\"\n },\n {\n \"name\": \"'Pyramid of Khafre'\",\n \"location\": \"'Egypt'\",\n \"height\": \"'136.4'\",\n \"base\": \"'215.3'\",\n \"volume\": \"'1477485'\",\n \"constructionDate\": \"'c. 2570 BC\",\n \"details\": {\n \"synopsis\": 'Two imprisoned men bond over years, finding solace and redemption through acts of decency.',\n \"cast\": ['Tim Robbins', 'Morgan Freeman'],\n \"rating\": 3.5,\n },\n \"format\": \"Vid_1080p50\"\n },\n {\n \"name\": \"'Red Pyramid'\",\n \"location\": \"'Egypt'\",\n \"height\": \"'104'\", \"base\": \"'220'\",\n \"volume\": \"'1602895'\",\n \"constructionDate\": \"'c. 2590 BC'\",\n \"details\": {\n \"synopsis\": 'Two imprisoned men bond over years, finding solace and redemption through acts of decency.',\n \"cast\": ['Tim Robbins', 'Morgan Freeman'],\n \"rating\": 3.5,\n },\n \"format\": \"Vid_1080i50\"\n },\n \n {\n \"name\": \"'Red Pyramid 1'\",\n \"location\": \"'France'\",\n \"height\": \"'123'\", \"base\": \"'210'\",\n \"volume\": \"'1602895'\",\n \"constructionDate\": \"'c. 2590 BC'\",\n \"details\": {\n \"synopsis\": 'Two imprisoned men bond over years, finding solace and redemption through acts of decency.',\n \"cast\": ['Tim Robbins', 'Morgan Freeman'],\n \"rating\": 3.5,\n },\n \"format\": \"Aud_2CH\"\n },\n {\n \"name\": \"'Red Pyramid 2'\",\n \"location\": \"'France'\",\n \"height\": \"'456'\", \"base\": \"'220'\",\n \"volume\": \"'1602895'\",\n \"constructionDate\": \"'c. 2590 BC'\",\n \"details\": {\n \"synopsis\": 'Two imprisoned men bond over years, finding solace and redemption through acts of decency.',\n \"cast\": ['Tim Robbins', 'Morgan Freeman'],\n \"rating\": 3.5,\n },\n \"format\": \"Aud_8CH\"\n },\n {\n \"name\": \"'Red Pyramid 2'\",\n \"location\": \"\",\n \"height\": \"'456'\", \"base\": \"'220'\",\n \"volume\": \"'1602895'\",\n \"constructionDate\": \"'c. 2590 BC'\",\n \"details\": {\n \"synopsis\": 'Two imprisoned men bond over years, finding solace and redemption through acts of decency.',\n \"cast\": ['Tim Robbins', 'Morgan Freeman'],\n \"rating\": 3.5,\n },\n \"format\": \"Aud_8CH\"\n }\n ]\n\nmsg.headers = [\n { title: 'Pyramid222', value: 'name' },\n { title: 'Location', value: 'location' },\n { title: 'Construction Date', value: 'constructionDate', \"sortable\": true, align: 'start' },\n { title: 'Format', value: 'format', \"sortable\": true, align: 'end' },\n {\n title: 'Dimensions',\n align: 'center',\n children: [\n { title: 'Height(m)', value: 'height', \"sortable\": true },\n { title: 'Base(m)', value: 'base', \"sortable\": true },\n { title: 'Volume(m³)', value: 'volume', \"sortable\": true },\n ],\n },\n]\n//msg.sortBy = [{ key: 'format', order: 'asc' }]\n//msg.groupBy = [{ key: 'location', order: 'asc' }]\n\nreturn msg;\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 1270,
"y": 280,
"wires": [
[
"3805253c14d46132"
]
]
},
{
"id": "fb2e77ec2c2a5dd1",
"type": "ui-group",
"name": "Table examples",
"page": "c466b7e4bb472f99",
"width": "12",
"height": "1",
"order": 1,
"showTitle": false,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "c466b7e4bb472f99",
"type": "ui-page",
"name": "Tables",
"ui": "cb79bc4520925e32",
"path": "/tables",
"icon": "table",
"layout": "grid",
"theme": "0d92c765bfad87e6",
"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": "cb79bc4520925e32",
"type": "ui-base",
"name": "My UI",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false
},
{
"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",
"density": "default"
}
}
]
Thanks in advance
