[Vuejs]-Vue vuetify datatable dynamic cell loading

by

0👍

I’ve worked today on a similar problem, making a very Dynamic table that renders different for each model but that has some columns, aka, v-slot:item.<name> in common.

I have a common headers json object that has all the properties the table should render for each model, it looks something like this:

"headers": [
    { "text" : "Data / Hora" ,       "value" : "date" ,             "filterable" : true ,   "sortable" : true ,     "type" : "text-date" , "align" : "left" , "format" : "AAAA-MM-DD HH:MM" },
    { "text" : "Tipus pujada" ,      "value" : "upload_type" ,      "filterable" : true ,   "sortable" : false ,    "type" : "text"      , "align" : "center"    },
    { "text" : "Elements" ,          "value" : "elements" ,         "filterable" : true ,   "sortable" : false ,    "type" : "text"  },
    { "text" : "Rebut i validat" ,   "value" : "status" ,           "filterable" : true ,   "sortable" : false ,    "type" : "chip" ,   "style": [ { "color" : "red", "value" : "ERROR" } , { "color" : "green" , "value" : "OK" } ] },
    { "text" : "Log" ,               "value" : "log" ,              "filterable" : false ,  "sortable" : false ,    "type" : "icon" ,   "icon": "mdi-magnify" , "event" : "click" , "action" : "openDialog" },
    { "text" : "Fitxer pujat" ,      "value" : "uploaded_file" ,    "filterable" : false ,  "sortable" : false ,    "type" : "icon" ,   "icon": "mdi-file" , "event" : "click" , "action" : "downloadJSONFileFromJSONData", "url" : "xxxxxxxx", "filename" : "AAAA-MM-DD-filename.json" }
]

So I can render all the columns that have the same header type like icon or text, chip whatever as if they where the same.

To solve make it work without naming specifically for each header I’ve used computed properties that can filter the header slots by its types:

computed: {
  computedHeaders: function () {
    //Filters the headers of type Icon
    return this.headers.filter(header => header.type==='icon');
  }
}

so I can render all the slots that have something in common but different naming:

<template v-for="(head,i) in computedHeaders" v-slot:[`item.${head.value}`]="{ item }">
 <v-icon
    :key="i"
    v-text="head.icon"
  >
  </v-icon>
</template>

Leave a comment