How to make a drop down table?

Question

Vue.js

Hello everyone, how to make a dropdown table in Vuetify? So that when you click on a line, it opens and there is another table in it?

Answer 1

Use the slot expanded-item:

<v-data-table
  :headers="mainTableHeaders"
  :items="mainTableItems"
  item-key="mainTableItemKey"
  show-expand
>
  <template #expanded-item="{ headers, item }">
    <td :colspan="headers.length">
      <v-data-table
        :headers="nestedTableHeaders"
        :items="item.nestedTableItems"
      ></v-data-table>
    </td>
  </template>
</v-data-table>

https://jsfiddle.net/krg8ac7s/UPD
. Somehow missed:

when clicking on a line

We remove show-expand, add a click handler, where the display of additional content will be switched manually:

methods: {
  onRowClick(item, row) {
    row.expand(!row.isExpanded);
  },
  ...

<v-data-table
  @click:row="onRowClick"
  ...

Answer 2

Hello, v-show or v-if help.
You create, for example, table: false, and in v-if for the opening itself you do v-if='table', and then add a method with an event handler for clicking what you need)