Vuetifyのdatatableのカラム数を動的に変更する

headersをcomputedにして、filterの条件でカラム数を制御する。

環境

• Vuetify 2.1.0

サンプル

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

<script>
export default {
  computed: {
    headers() {
      return [
        {
          text: 'Important',
          align: 'center',
          sortable: true,
          value: 'important',
        },
        {
          text: 'Unimportant',
          align: 'center',
          sortable: true,
          value: 'unimportant',
        },
    ].filter(item => this.$vuetify.breakpoint.mdAndUp || item.value === 'important')
  }
}
</script>