Vuetify intercept table component creation to customize inner items

hi all,

I’m working on this vuetify v-data-table component:

            loading-text="Caricamento lista utenti..."
            v-slot:item.actions="{ usertable }"


headers: [
        { text: 'Nome', value: 'nome' },
        { text: 'Cognome', value: 'cognome' },
        { text: 'Email', value: 'email' },
        { text: 'Ultimo accesso', value: 'last_access' },
        { text: 'Role', value: 'jd' }
        { text: 'PLATFORM_ROLE', value: 'PLATFORM_ROLE' } //<-- SEE THIS
      usertable: [
          id_user: '',
          nome: '',
          cognome: '',
          email: '',
          last_access: '',
          jd: '',
          usr_img: '',
          is_admin: ''  //<-- SEE THIS

and it’s working like a charm.
this creates a cool table with N colums.

I would like, though, to “intercept” the creation by using the information in PLATFORM_ROLE to add, let’s say a badge, an icon, or something custom I may decide later on, instead of visualizing as a column, if user “is_admin

any hint about?


Try making the headers as a computed property instead of hardcoded values and define your last column dynamically.

no clues on how to do that…

considering I would like to do something like adding a badge or icon close to the NOME / COGNOME column (name / last name)

Ah looks like I misunderstood you :slight_smile:

I think what you need is to use a custom slot for this colum:

        v-slot:item.PLATFORM_ROLE ="{ item }"
         <v-icon v-if="item.is_admin">
           ... badge or something else ...

See here: