CODEWITHSUNDEEP
vue.jsvue-componentvuetify.js
Steven Colocho
Steven Colocho

Reputation: 381

How can I iterate a dataTable into vutify?

I want to iterate my arrangement on a vuetify board but I haven't found the logic yet since I'm starting with vue, if someone could give me an example of how to iterate a vutify board would be perfect

example :

 <article class="artkccle-item" v-for="person in persons" :key="person.id">
  <v-data-table :headers="headers"  :items-per-page="5" class="elevation-1">
    <v-item>{{person.id}}</v-item>

  </v-data-table>
</article>

persons is my array

Upvotes: 0

Views: 1864

Answers (1)

jtouzy
jtouzy

Reputation: 1639

Like the doc says, you have to provide the table headers description, and the table content.

Header's description must be objects like this:

headers: [
  {
    text: 'Dessert (100g serving)',
    align: 'left',
    sortable: false,
    value: 'name',
  },
  ...
]

The value key is the most important because it's the key that will be picked in each row item for display.

After providing the headers, provide your data :

{
   name: 'Frozen Yogurt',
   calories: 159,
   fat: 6.0,
   carbs: 24,
   protein: 4.0,
   iron: '1%',
}

With the headers provided above, the table will have one column only, and one row only with the data "Frozen Yogurt" (picked from "name" key of the object).

For information, you can see the code details on each vuetify-doc examples by using the "<>" icon, you will see a complete example.

https://vuetifyjs.com/en/components/data-tables

Upvotes: 1

Related Questions