title: Vuetify data table, display expanded row without columns
body: <p>I am trying to construct a data table with expanded rows, where I want the expanded part to take up the full width of the parent row. Unfortunatley the expanded row is automatically divided into columns, so if I add only one <code>&lt;div&gt;</code> in the <code>&lt;template&gt;</code>, that will be displayed under the first item of the parent row. How do I make the expanded-item take up the full width of the table?</p>
  
  <p>I found a source achieving this, but the syntax is from what I understand not compatible with the version of Vuetify I am using: <a href="https://codepen.io/francobao/pen/mqxMKP" rel="nofollow noreferrer">https://codepen.io/francobao/pen/mqxMKP</a></p>
  
  <p>This is my component that contains the <code>&lt;v-data-table&gt;</code>:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-12"&gt;
        &lt;v-data-table
          :headers="headers"
          hide-default-footer
          item-key="name"
          :items="getServiceProviders"
          show-expand &gt;
          &lt;template v-slot:expanded-item="{ headers, item }" &gt;
              &lt;ServiceProviderDetails :isEditMode="true" :serviceProvider="item" /&gt;
          &lt;/template&gt;
        &lt;/v-data-table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapGetters } from 'vuex';
  import ServiceProviderDetails from './ServiceProviderDetails';
  
  export default {
    name: 'ServiceProviderTable',
    components: {
      ServiceProviderDetails
    },
    computed: {
      ...mapGetters(['getServiceProviders'])
    },
    data () {
      return {
        headers: [
          {
            text: 'Name',
            value: 'name'
          },
          {
            text: 'Service Provider ID',
            value: 'serviceProviderId'
          }
        ]
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the component to show in the expanded-row:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="row sp-details"&gt;
      &lt;div class="col-4 text-right"&gt;&lt;span&gt;Name:&lt;/span&gt;&lt;/div&gt;
      &lt;div class="col-4"&gt;&lt;input class="details-input" type="text" v-model="details.name" /&gt;&lt;/div&gt;
      &lt;div class="col-4"&gt;&lt;/div&gt;
      &lt;div class="col-4 text-right"&gt;&lt;span&gt;PortalUrl:&lt;/span&gt;&lt;/div&gt;
      &lt;div class="col-4"&gt;&lt;input class="details-input" type="text" v-model="details.portalUrl" /&gt;&lt;/div&gt;
      &lt;div class="col-4"&gt;&lt;/div&gt;
      &lt;div class="col-4 text-right"&gt;&lt;span&gt;SupplierId:&lt;/span&gt;&lt;/div&gt;
      &lt;div class="col-4"&gt;&lt;input class="details-input" type="text"  v-model="details.supplierId" /&gt;&lt;/div&gt;
      &lt;div class="col-4"&gt;&lt;/div&gt;
      &lt;div class="col-4 text-right"&gt;&lt;p&gt;Integration Enabled:&lt;/p&gt;&lt;/div&gt;
      &lt;div class="col-4 text-left"&gt;
        &lt;span class="integration-switch" v-on:click="toggleIntegration(true)" &gt;&lt;input :checked="details.integrationEnabled" type="radio" /&gt;Yes&lt;/span&gt;
        &lt;span class="integration-switch" v-on:click="toggleIntegration(false)" &gt;&lt;input :checked="!details.integrationEnabled" type="radio" /&gt;No&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="col-4"&gt;&lt;/div&gt;
      &lt;div class="col-8 offset-4 text-left"&gt;
        &lt;v-btn class="mr-2" color="secondary" :checked="details.integrationEnabled" v-on:click="$emit('cancel')"&gt;Cancel&lt;/v-btn&gt;
        &lt;v-btn color="primary" v-on:click="$emit('save', details)"&gt;Save&lt;/v-btn&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'ServiceProviderDetails',
    props: \[ 'isEditMode', 'serviceProvider' \],
    data () {
      return {
        details: {
          name: '',
          portalUrl: '',
          supplierId: '',
          integrationEnabled: false
        }
      }
    },
    mounted() {
      if(this.isEditMode){
        this.details = this.serviceProvider;
      }
    },
    methods: {
      toggleIntegration(isEnabled) {
        this.details.integrationEnabled = isEnabled;
      }
    },
    watch: {
      serviceProvider: function() {
        console.log('in serviceprovider')
        if(this.isEditMode){
          console.log(this.serviceProvider)
          this.details = this.serviceProvider;
        }
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is what the table header, first row and expanded row looks like:
  <a href="https://i.stack.imgur.com/9Cs3g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Cs3g.png" alt="enter image description here"></a></p>