Different alignments of columns in v-data-table

Dashboard
1

Hello,
I've just started to use Dashboard 2.0 with th v-data-table component.
I have a simple table with two columns. First column displays labels and should be left-aligned. The second column displays numerical values and should be right-aligned.
This construct in ui-template has no effect:

        headers: [
          { text: 'Speicher', value: 'speicher', align: 'left' },
          { text: 'Wert', value: 'wert', align: 'right' },
        ]

The following styling aligns both columns

.v-data-table__tr {
   text-align: right;
 }

Can you pls. recommend a way to align both columns in a different way.

regards
Juergen

2

I don't know the answer to your question, but is there a reason you are not using the ui-table node for this? You can specify the alignment for each column in that node.

3

Looking at the Vuetify website regarding the data table align

If you look at the Script tab it has an example

 headers: [
        { title: 'Plant', align: 'start', sortable: false, key: 'name' },
        { title: 'Light', align: 'end', key: 'light' },
        { title: 'Height', align: 'end', key: 'height' },
        { title: 'Pet Friendly', align: 'end', key: 'petFriendly' },
        { title: 'Price ($)', align: 'end', key: 'price' },
      ],

So try align: 'start' or align: 'end' instead of left, right

4

I have tried this too (start, end) but without effect.

5

I'm using dashboard 2.0 and there is another table component with a different styling available.

6

Sorry, I don't understand what you mean. The dashboard 2 table node supports column alignment.

7

Correct. But I want to style other properties like color of values and therefore I use a template node instead of the table node. Perhaps this is not a good approach. I'm open for recommendations.

8

OK, that makes sense.

9

I use v-virtual-scroll as container for v-list-items
It does give enough slots for prepend and append elements if needed so defenetely enough for two column text content. No need for all fancy bells and whistles the table component brings in.

And easy enough to write some css to manage layout and colors or whatever needed.

image
image1359Ă—629 37.3 KB

image
image512Ă—400 19.7 KB

1 Like
10

In addition to the Vuetify table or the dashboard's built-in table node, another option for you is to use @omrid01/node-red-dashboard-2-table-tabulator, which gives you full control of formatting (incl. conditional formatting),

image
image657Ă—142 6.68 KB

11

I also tried the example from the Vuetify docs in Dashboard 2 ui-template and for me the table column alignment works fine.

Test Flow :

[{"id":"918909f9b7d815c0","type":"ui-template","z":"54efb553244c241f","group":"920b4bf313db45d0","page":"","ui":"","name":"","order":1,"width":0,"height":0,"head":"","format":"<template>\n    <v-data-table :headers=\"headers\" :items=\"plants\" density=\"compact\" item-key=\"name\"></v-data-table>\n</template>\n\n<script>\nexport default {\n    data() {\n      \n    return {\n      headers: [\n        { title: 'Plant', align: 'start', sortable: false, key: 'name' },\n        { title: 'Light', align: 'start', key: 'light' },\n        { title: 'Height', align: 'end', key: 'height' },\n        { title: 'Pet Friendly', align: 'end', key: 'petFriendly' },\n        { title: 'Price ($)', align: 'end', key: 'price' },\n      ],\n      plants: [\n        {\n          name: 'Fern',\n          light: 'Low',\n          height: '20cm',\n          petFriendly: 'Yes',\n          price: 20,\n        },\n        {\n          name: 'Snake Plant',\n          light: 'Low',\n          height: '50cm',\n          petFriendly: 'No',\n          price: 35,\n        },\n        {\n          name: 'Monstera',\n          light: 'Medium',\n          height: '60cm',\n          petFriendly: 'No',\n          price: 50,\n        },\n        {\n          name: 'Pothos',\n          light: 'Low to medium',\n          height: '40cm',\n          petFriendly: 'Yes',\n          price: 25,\n        },\n        {\n          name: 'ZZ Plant',\n          light: 'Low to medium',\n          height: '90cm',\n          petFriendly: 'Yes',\n          price: 30,\n        },\n        {\n          name: 'Spider Plant',\n          light: 'Bright, indirect',\n          height: '30cm',\n          petFriendly: 'Yes',\n          price: 15,\n        },\n        {\n          name: 'Air Plant',\n          light: 'Bright, indirect',\n          height: '15cm',\n          petFriendly: 'Yes',\n          price: 10,\n        },\n        {\n          name: 'Peperomia',\n          light: 'Bright, indirect',\n          height: '25cm',\n          petFriendly: 'Yes',\n          price: 20,\n        },\n        {\n          name: 'Aloe Vera',\n          light: 'Bright, direct',\n          height: '30cm',\n          petFriendly: 'Yes',\n          price: 15,\n        },\n        {\n          name: 'Jade Plant',\n          light: 'Bright, direct',\n          height: '40cm',\n          petFriendly: 'Yes',\n          price: 25,\n        },\n      ],\n   \n  \n    }\n        },\n        watch: {\n            // watch for any changes of \"msg\"\n            msg: function () {\n             \n            }\n        },\n        \n       \n       \n    }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":420,"y":3880,"wires":[[]]},{"id":"920b4bf313db45d0","type":"ui-group","name":"Group 1","page":"4491a49c6b49a6b3","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":true,"disabled":false,"groupType":"default"},{"id":"4491a49c6b49a6b3","type":"ui-page","name":"Page 1","ui":"dca6aa0ee8b1020c","path":"/page1","icon":"home","layout":"grid","theme":"2ce3f65dd0354f9c","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":"dca6aa0ee8b1020c","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":"2ce3f65dd0354f9c","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"}}]

Can you share your flow with some sample data to see if there are any differences ?

12

Thank you very much!
I've installed the node and it looks promising for my purpose.
I still have some problems to define the data structure in the node. It's an array of objects (key-value pairs) in msg.payload. I want to use the table only to display formatted data.
Regards Juergen

13

I still don't know how to send or format the incoming data. This input does not work:

 "data": [{"speicher":"msg.payload.speicher[]","wert":"msg.payload.wert[]"}]

The incoming data are

[{"speicher":"Ladestand (%)","wert":54},{"speicher":"Ladung Speicher (W)","wert":248},{"speicher":"Lieferung Netz (W)","wert":-215},{"speicher":"PV-Erzeugung Haus (W)","wert":495},{"speicher":"PV-Erzeugung Carport (W)","wert":266},{"speicher":"PV-Erzeugung gesamt (W)","wert":761},{"speicher":"Verbrauch (W)","wert":718}]

14

Can you send a sample flow?