Dynamic v-data-table with v-chip for each column

I am attempting to implement a v-chip to my data-table, very similar to:
Vuetify data-table Customizing default rows

However, I want to add a chip to each column. My table is created dynamically, with the column headers as a weekly date. So, I’m trying to implement a v-for, for each column that’s in my header. Ideally I’d like to be able to limit it to only certain columns, as the first two columns are not dates.

This is the code on vuetify example:

<template v-slot:item.calories="{ item }">
      <v-chip :color="getColor(item.calories)" dark>{{ item.calories }}</v-chip>

This is my attempt:

<v-data-table :headers="rotationPlanHeaders" :items="rotationGridData" class="elevation-1">
              <template v-for="column in rotationPlanHeaders" v-slot:item.column="{ item }">
                <v-chip color="red" dark>{{ item.column }}</v-chip>

Got something to work with the help of a friend. Pasting here for posterity…

<template v-slot:item="{item}">
              <td v-for="(col, columnIndex) in rotationPlanHeaders">
                <div v-if="columnIndex > 1">
                  <v-chip :color="getChipColor(item[col.value])">{{ item[col.value] }}</v-chip>
                <div v-else-if="columnIndex == 0 || columnIndex == 1">
                  <p>{{ item[col.value] }}</p>
1 Like

Thanks mate!

I have a generic styled component that encapsulate my v-data-table because I have a lot of tables in my app.
It helped me to not break the generic and style a specific column for a specific table.

Could share your solution ?

Hello, have you managed to pass from a parent component to a child (which has a data table and a slot for a column)?
I explain:
Parent.vue has Child.vue inside and the latter has a datatable in its template.
What I want is from Parent.vue to pass to Child.vue a slot to put it in a column of the datatable?
I want to pass this from Parent.vue to a data-table that is in Child.vue

template v-slot: item.habilitated = “{item}”
v-icon class = “center”: color = “item.enabled? ‘primary’: ‘undefined’”
{{item.enabled? ‘mdi-checkbox-marked-outline’: ‘mdi-checkbox-blank-outline’}}