CODEWITHSUNDEEP
vue.jsvuetify.js
Snookums
Snookums

Reputation: 1340

In Vuetify, how to add a button into each row in <v-data-table>?

The screenshot belwo is an example in https://vuetifyjs.com/en/components/data-tables/ enter image description here And its code is:

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

I am wondering how to add a <v-btn> into each row to navigate to another component?
Like, adding a column which contains buttons called "view" in each row, and clicking on them will navigate to the page containing the details of the corresponding dessert.

Thanks!

Upvotes: 0

Views: 7166

Answers (1)

Pierre Said
Pierre Said

Reputation: 3820

You can add a header called action.

  { text: "", value: "action" }

And then specify the rendering of this header with a slot.

<v-data-table :headers="headers" :items="desserts">
  <template v-slot:item.action="{ item }">
    <v-btn>OPEN</v-btn>
  </template>
</v-data-table>

https://vuetifyjs.com/en/components/data-tables/#simple-checkbox

Upvotes: 6

Related Questions