Vuetify v-data-table within v-data-table: content in extended-item slot malfunction

Question

in a vuetify table i do not want to show some headers and their corresponding column. Instead, I want them to be displayed in a table in the extended-item slot. The items of the table are completely user editable. This all works fine too.

The problem is that in the extended-item slot not only the properties of the selected item are displayed, but the properties of all items.

In the vue-dev-tools it is displayed correctly. I think I'm missing something fundamentally simple here. Does anyone have any ideas?

Thanks in advance

Here is the link to the sandbox: v-data-table in expanded-item slot of v-data-table, user editable

Answer 1

You can do it changing :items="tabItems" by :items="[item]" (i put inside array because one item alone is not legible by :items v-data-table.

If you call tabItems you will iterate over all items again so its better to use filtered expanded-item item instead do hard work manually.

I tried in your sandbox, you can change line 54 with my suggestion and you could check that its working well.