Dashboard 2 - v-data-table set column width for a given col

Dashboard
1

Sorry to ask I have table with 15 columns one of which I want shorten the width of.
I've tried setting the width of the given slot and below with a div but between google and docs I'm falling to understand something !

BTW placing the v-data-table in a v-card and setting it's width allows for horizontal scrolling.

   <v-card
    title="Device Data"
    flat
    width=1500
  >
    <!-- Provide an input text box to search the content -->
    <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="outlined" width="50px" hide-details ></v-text-field>
    <v-data-table v-model:search="search" :items="msg?.payload" >
        <template v-slot:header.current>
            <div class="text-center">Center-Aligned</div>
        </template>
        <template v-slot:item.appKey="{ item }">
            <div style="width: 150px;"> {{item.appKey}} </div>
        </template>
    </v-data-table>
  </v-card>

csv-postgres
csv-postgres1618Ă—756 36.9 KB

Thanks

2

This'll be a Vuetify feature... looking into it, it seems though there is an option on the header properties to define a width: https://vuetifyjs.com/en/api/v-data-table/#props-headers

My interpretation is that you'd need to pass a whole headers object in, and then set the width of the relevant column using the headers prop available on v-data-table: Data table component — Vuetify

3

@joepavitt thanks I was heading the header direction.
Have to say Dashboard 2 has made my OT data entry and processing project a joy.

My work flow is, upload CSV save to Postgres then three lots of jsonata processing.
Then about 6 API calls and two file uploads all to configure an edge device and then test the edge device
Can only do this with Node-RED nothing else comes close.

Cheers..

1 Like
4

That's so nice to hear, thanks for the feedback