[v-data-table] How to add an 'add field' button under each independent v-data-table

Hey guys, I am working with data tables and I need to add a button below the last row, that has one purpose - to add a new row to the parent table. How can I achieve that?

What I currently have is this:

                    <v-data-table
                            :headers="headers"
                            :items="fields"
                            hide-default-footer
                    >
                        <template v-slot:item.actions="{ item }">
                            <v-icon
                                    small
                                    @click="deleteItem(item)"
                            >
                                mdi-delete
                            </v-icon>
                        </template>
                        <template slot="no-data">
                            No custom fields found
                        </template>
                    </v-data-table>

Thank you!

You have bound your items to the fields array. All you need to do is push the new value to the array and it will add the row. Vuetify has good documentation, they have a CRUD example that does this. They have the new item/row button at the top of the table, but you can put it anywhere on the page.

1 Like

Hey @deweechi, thanks for the answer. I took advantage of that and added it to the footer of the data-table.