Change the default width of a VuetifyJS DataTable cell

Question

I'm using the VuetifyJS Data Table and I need to move the entries of each header cell as close as possible to each other. I tried to add a width to each header but that didn't work - it seems there is a predefined width one can't go below.

Update: This is how it should look like - the margin between each row should be fixed at 10px:

Here is a CodePen example.

 <div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <template slot="headerCell" slot-scope="props">
        <v-tooltip bottom>
          <span slot="activator">
            {{ props.header.text }}
          </span>
          <span>
            {{ props.header.text }}
          </span>
        </v-tooltip>
      </template>
      <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
    </v-data-table>
  </v-app>
</div>

How to get them close together?

Answer 1

You can add another empty header and set width of every column to min value(1%), except empty to make it fill all free space. Also you need to add empty td to table body template to make grey row dividers visible.

See codepen: https://codepen.io/anon/pen/WKXwOR

Answer 2

You can set width with header like below

headers: [
  { text: 'Dessert (100g serving)', value: 'name', width: '20%'},
  { text: 'Calories', value: 'calories', width: '50%' },
  { text: 'Fat (g)', value: 'fat' },
  { text: 'Carbs (g)', value: 'carbs', width: '200px' },
],

Answer 3

Just add (width,align) in your header

 <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
 </v-data-table>

header looks like

 header:[ {
        text: 'Dessert ',
          align: 'center',<------------to align left/center/right/
          value: 'name',
          width: "1%"//<-------------------asign width/
        },
   ]

Vuetify header options:

{
  text: string
  value: string
  align: 'left' | 'center' | 'right'
  sortable: boolean
  class: string[] | string
  width: string
}