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

**URL:** <https://discourse.nodered.org/t/dashboard-2-v-data-table-set-column-width-for-a-given-col/87416>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [22 April 2024 14:30 UTC](https://discourse.nodered.org/t/dashboard-2-v-data-table-set-column-width-for-a-given-col/87416 "2024-04-22T14:30:22Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![iiLaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iilaw/32/14782_2.png) [@iiLaw](https://discourse.nodered.org/u/iiLaw)\
**Post date:** [22 April 2024 14:30 UTC](https://discourse.nodered.org/t/dashboard-2-v-data-table-set-column-width-for-a-given-col/87416/1 "2024-04-22T14:30:22Z")

</div>

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.

```auto
   <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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/e/6ef887a73f9845228177a0f77dd4b49b9dbce004.png)

Thanks

---

<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:** [24 April 2024 08:47 UTC](https://discourse.nodered.org/t/dashboard-2-v-data-table-set-column-width-for-a-given-col/87416/2 "2024-04-24T08:47:18Z")

</div>

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](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](https://vuetifyjs.com/en/components/data-tables/basics/#headers)

---

<div class="post-metadata">

**Author:** ![iiLaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iilaw/32/14782_2.png) [@iiLaw](https://discourse.nodered.org/u/iiLaw)\
**Post date:** [24 April 2024 18:03 UTC](https://discourse.nodered.org/t/dashboard-2-v-data-table-set-column-width-for-a-given-col/87416/3 "2024-04-24T18:03:21Z")

</div>

@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..

---

<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:** [24 April 2024 19:26 UTC](https://discourse.nodered.org/t/dashboard-2-v-data-table-set-column-width-for-a-given-col/87416/4 "2024-04-24T19:26:50Z")

</div>

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

---

<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 May 2024 19:27 UTC](https://discourse.nodered.org/t/dashboard-2-v-data-table-set-column-width-for-a-given-col/87416/5 "2024-05-24T19:27:48Z")

</div>

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