Table columns with unequal widths

Dashboard
1

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

image
image750Ă—266 9.12 KB

(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?

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

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

3

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

4

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

Nevertheless, specifying column width inside a template?

5

According to vuetify docs 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

1 Like