title: Vuetify 2.x: v-data-table expand row on click
body: <p>I am using Vuetify.js and I am creating a a <code>v-data-table</code></p>
  
  <p>I cannot figure out how to expand a row by clicking anywhere on it, it seems that the only possibility is by using the <code>show-expand</code> property and clicking the icon</p>
  
  <p><strong>Final solution</strong></p>
  
  <p>As suggested <a href="https://stackoverflow.com/a/57695947/4551168">here</a>, the <code>v-data-table</code> can link an array to its <code>expanded</code> property, so if you push any item from the table, to this array, it will expand the corresponding row. Intuitive and smart</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-data-table
      :headers="headers"
      :items="items"
      :expanded="expanded"
      item-key="id"
      @click:row="expandRow"
    /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    data () {
      return {
        expanded: [],
      }
    },
  
    expandRow (item) {
      // would be
      // this.expanded = [item]
      // but if you click an expanded row, you want it to collapse
      this.expanded = item === this.expanded[0] ? [] : [item]
    },
  &lt;/script&gt;
  </code></pre>