Revision history [back]

1. Set the fixed-layout property to true:

<v-data-table
  :headers="headers"
  :items="items"
  fixed-layout
>
</v-data-table>

1. Set the hide-default-header or hide-default-footer property, if applicable:

<v-data-table
  :headers="headers"
  :items="items"
  fixed-layout
  hide-default-header
>
</v-data-table>

1. Specify the width of the table or columns:

<v-data-table
  :headers="headers"
  :items="items"
  fixed-layout
  hide-default-header
  :width="500"
>
  <template v-slot:[`header-cell`]="{ item }">
    <v-tooltip bottom>
      <span>{{ item.text }}</span>
      <span slot="activator">
        <v-icon small>mdi-sort</v-icon>
      </span>
    </v-tooltip>
  </template>
  <template v-slot:[`item.action`]="{ item }">
    <v-icon small @click="deleteItem(item.id)">mdi-delete</v-icon>
  </template>
  <template #no-data>
    <v-alert :value="true" color="error" icon="mdi-alert-circle-outline">
      Sorry, nothing here.
    </v-alert>
  </template>
</v-data-table>