# Table columns with unequal widths

**URL:** <https://discourse.nodered.org/t/table-columns-with-unequal-widths/98307>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [25 July 2025 08:13 UTC](https://discourse.nodered.org/t/table-columns-with-unequal-widths/98307 "2025-07-25T08:13:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [25 July 2025 08:13 UTC](https://discourse.nodered.org/t/table-columns-with-unequal-widths/98307/1 "2025-07-25T08:13:28Z")

</div>

Using the ui-table widget I can influence the width of a column by putting a value in the widget's column setup:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/3/e351b0da94f30cc336a562178882bb54e6444c83.png)  
(Oddly, this seems to make this field 339px wide, not 400px)

However, because the ui-table widget does not include a label, I need to embed the table in a template.  
How can I specify individual field widths in a table embedded in a template?

```auto
<template>
    <h3>Test Table</h3>
    <v-data-table :items="msg?.payload">
    </v-data-table>
</template>

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [25 July 2025 08:28 UTC](https://discourse.nodered.org/t/table-columns-with-unequal-widths/98307/2 "2025-07-25T08:28:00Z")

</div>

> [@jbudd](#):
>
> However, because the ui-table widget does not include a label, I need to embed the table in a template.

if you can open an issue, then I'll add one 😃 I'm working through a couple of Dashboard bits this morning

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [25 July 2025 08:30 UTC](https://discourse.nodered.org/t/table-columns-with-unequal-widths/98307/3 "2025-07-25T08:30:14Z")

</div>

Although, I just checked... it does have a label option already?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [25 July 2025 09:14 UTC](https://discourse.nodered.org/t/table-columns-with-unequal-widths/98307/4 "2025-07-25T09:14:19Z")

</div>

> [@joepavitt](#):
>
> it does have a label option already?

Hmm it's there now but I'm sure it wasn't yesterday!  
Sorry about that ☺

Nevertheless, specifying column width inside a template?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 July 2025 09:33 UTC](https://discourse.nodered.org/t/table-columns-with-unequal-widths/98307/5 "2025-07-25T09:33:50Z")

</div>

According to [vuetify docs](https://vuetifyjs.com/en/api/v-data-table/#props-headers) you should simply be able to add `width` as an property in the header item but I dont think it actually works.

Instead, you can workaround this by adding a `class` to the v-table and use your browser tools to copy a selector and use that to set the widths

---

<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:** [24 August 2025 09:33 UTC](https://discourse.nodered.org/t/table-columns-with-unequal-widths/98307/6 "2025-08-24T09:33:51Z")

</div>

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