Sometimes, we want to change the default width of a Vuetify data table cell.

In this article, we’ll look at how to change the default width of a Vuetify data table cell.

How to change the default width of a Vuetify data table cell?

To change the default width of a Vuetify data table cell, we can set the headers prop to an array with the column widths.

For instance, we write

<template>
  <div>
    <v-data-table :headers="headers" :items="desserts"> </v-data-table>
  </div>
</template>

<script>
export default {
  //...
  data() {
    return {
      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" },
      ],
    };
  },
  //...
};
</script>

to add the v-data-table component with the headers prop to set the table headers data.

We set the headers prop to the headers array.

In the headers entries, we set the width property to set the width of each column.

Conclusion

To change the default width of a Vuetify data table cell, we can set the headers prop to an array with the column widths.