Vuetify nested datatable columns width problem

Question

You can see the example on CodePen.

I have a vuetify data table and nested data tables in it.
You can open the nested table by click on the row item id.

If you select some row by check checkbox - the additional input field will appear.

The problem is that the outer table columns width and inner table columns width are different, but I need the data in the inner table right below the data of the outer table.

I tried:
1. To setup the width of the same columns for headers.
2. To use just one header data for both tables.

If I show header and checkboxes in the inner table it looks better,
but I don't need them in the inner table.

This piece of code is just for passing StackOverflow validation. The whole example is on CodePen.

 <v-app id="inspire">
    <v-layout>
        <v-data-table>
            <v-model>
                <template slot="items" slot-scope="props">

Can you explain this a bit clearer The problem is that the outer table columns width and inner table columns width are different, but I need the data in the inner table right below the data of the outer table. — skribe
I mean, columns same width. It should be just like one table with nested rows. i.shotnes.com/u/2778/0703/screenshot_16329.png — Sergiy Shilingov
I mean, I don't know how to align inner data: i.shotnes.com/u/2778/0703/screenshot_20319.png — Sergiy Shilingov

Sergiy Shilingov Sergiy Shilingov · Accepted Answer · 2019-07-03T10:50:10

Сolleague helped me with this question. The solution is to use additional with additional logic instead of adding an additional table. It works perfectly in v-data-table.

Vuetify nested datatable columns width problem

1 Answers