Using a component inside of a Vuetify data table

0
votes

I have a Nuxt 2.9.0 app where I'm using @nuxtjs/vuetify 1.11.3.

I'm refactoring some HTML tables that we have in the app and replacing them with Vuetify's v-data-table components. Now, in our old tables we had these bar chart components that we would render inside the table cells, like this:

<th>
  {{ totalAvg }}
  <RatingBar :color="ratingColor(totalAvg)" />
</th>

That RatingBar component is basically just an empty div with a background color, as you can see below

enter image description here

What's the proper way in which I can keep this functionality when moving onto the Vuetify data tables?

I know that Vuetify implements some slots, for example the #header slot, but I'm not sure exactly how the slots work when it comes to table cells, since the #header slot, for example, seems to just append whatever <template> you write down for the slot, instead of actually replacing the header

1
vue.jsnuxt.jsvuetify.js

1 Answers

1
votes

Vuetify's v-data-table supports custom rendering for a specific column thru #item.<name>. Link to API doc.