Home > Software design >  In Vuetify, how can I use unique sparklines in a data table?
In Vuetify, how can I use unique sparklines in a data table?

Time:05-06

I want to create a Vuetify data table that has a column that contains a unique sparkline for each item in the data table. Is that possible?

There's this previous post and Sandbox example, but I'm struggling to modify it to have a unique sparkline per row. Any help or advice would be appreciated.

I have tried to add the sparkline 'value' array to the general data array in the linked example, like:

    {
      name: "Frozen Yogurt",
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: "1%",
      value: [0,1,2,3,4,5]
    },

But I don't know how to feed this value back into the sparkline which only takes one array, and doesn't seem to accept a list of data arrays (one per row?)

CodePudding user response:

Change: <template v-slot:item.chart> to <template v-slot:item.chart="{ item }">.
And change the sparkline :value to :value="item.value".

Then in your desserts array add a value to each item like in your question. Example here.

  • Related