# Different alignments of columns in v-data-table

**URL:** <https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510>\
**Category:** Dashboard\
**Created:** [19 February 2025 09:30 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510 "2025-02-19T09:30:06Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![xtrailrunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xtrailrunner/32/74959_2.png) [@xtrailrunner](https://discourse.nodered.org/u/xtrailrunner)\
**Post date:** [19 February 2025 09:30 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/1 "2025-02-19T09:30:06Z")

</div>

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:

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

```

The following styling aligns both columns

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

```

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

regards  
Juergen

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [19 February 2025 13:59 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/2 "2025-02-19T13:59:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [19 February 2025 15:38 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/3 "2025-02-19T15:38:27Z")

</div>

Looking at the Vuetify website regarding the data table `align`

> **[Data table component — Vuetify](https://vuetifyjs.com/en/components/data-tables/basics/#density)**
>
> The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes so...

If you look at the Script tab it has an example

```auto
 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

---

<div class="post-metadata">

**Author:** ![xtrailrunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xtrailrunner/32/74959_2.png) [@xtrailrunner](https://discourse.nodered.org/u/xtrailrunner)\
**Post date:** [19 February 2025 15:55 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/4 "2025-02-19T15:55:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![xtrailrunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xtrailrunner/32/74959_2.png) [@xtrailrunner](https://discourse.nodered.org/u/xtrailrunner)\
**Post date:** [19 February 2025 15:56 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/5 "2025-02-19T15:56:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [19 February 2025 16:06 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/6 "2025-02-19T16:06:09Z")

</div>

> [@xtrailrunner](#):
>
> there is another table component with a different styling available

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

---

<div class="post-metadata">

**Author:** ![xtrailrunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xtrailrunner/32/74959_2.png) [@xtrailrunner](https://discourse.nodered.org/u/xtrailrunner)\
**Post date:** [19 February 2025 16:28 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/7 "2025-02-19T16:28:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [19 February 2025 16:43 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/8 "2025-02-19T16:43:33Z")

</div>

> [@xtrailrunner](#):
>
> I want to style other properties like color of values

OK, that makes sense.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [19 February 2025 20:47 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/9 "2025-02-19T20:47:07Z")

</div>

I use `v-virtual-scroll` as container for `v-list-item`s  
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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cf32fe28f37310d7024a2101da4f08b08fdecb38.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3b1b880d9d6d1c73a5151cbcb130bcfe19c72092.png)

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [20 February 2025 09:56 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/10 "2025-02-20T09:56:55Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/9/a9b2b03e97e6922257ecadf43d19e596c33d5ad6.png)

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [20 February 2025 21:10 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/11 "2025-02-20T21:10:21Z")

</div>

> [@xtrailrunner](#):
>
> I have tried this too (start, end) but without effect.

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 :**

```auto
[{"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 ?

---

<div class="post-metadata">

**Author:** ![xtrailrunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xtrailrunner/32/74959_2.png) [@xtrailrunner](https://discourse.nodered.org/u/xtrailrunner)\
**Post date:** [22 February 2025 08:27 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/12 "2025-02-22T08:27:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![xtrailrunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xtrailrunner/32/74959_2.png) [@xtrailrunner](https://discourse.nodered.org/u/xtrailrunner)\
**Post date:** [26 February 2025 07:53 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/13 "2025-02-26T07:53:57Z")

</div>

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

```auto
 "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}]`

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [26 February 2025 18:08 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/14 "2025-02-26T18:08:44Z")

</div>

Can you send a sample flow?

---

<div class="post-metadata">

**Author:** ![xtrailrunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xtrailrunner/32/74959_2.png) [@xtrailrunner](https://discourse.nodered.org/u/xtrailrunner)\
**Post date:** [27 February 2025 14:57 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/16 "2025-02-27T14:57:23Z")

</div>

Thank you.  
Flow is attached.  
[flows.json](https://discourse.nodered.org/uploads/short-url/i9hyUddmEWGUVUJJNq65vYBeTNa.json) (3.9 KB)

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [1 March 2025 21:55 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/17 "2025-03-01T21:55:11Z")

</div>

Looking at your flow, I'm still puzzled why use template/v-data-table instead of using available dashboard table nodes, but anyway:

I always prefer to keep things simple, so instead of playing with mustache trickery I just take the incoming data, format it as needed and then update the table.

```auto
<template>
    <v-data-table 
      :items="items"
      :hide-default-footer="true"
      class="elevation-1"
    ></v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        items: []
      }
    },
//...

```

For example, in your flow, you mention you want to:

```auto
<!-- Add a custom suffix to the value for the "wert" column -- >

```

So in your script, just format the incoming msg data as needed:

```auto
const data = msg.payload;
for (let i = 0 ; i < data.length ; i++)
   data[i].wert += (":suffix"+i);
this.items = data;

```

Result:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/6/5679e96b7c1ccd0c17232708629d056024c520fc.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [15 March 2025 21:55 UTC](https://discourse.nodered.org/t/different-alignments-of-columns-in-v-data-table/95510/18 "2025-03-15T21:55:33Z")

</div>

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