Vuetify intercept table component creation to customize inner items

hi all,

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

          <v-data-table
            :headers="headers"
            :items="usertable"
            :sort-desc="[false]"
            :items-per-page="15"
            :search="search"
            class="elevation-1"
            :loading='loading'
            loading-text="Caricamento lista utenti..."
            v-slot:item.actions="{ usertable }"
            @click="editItem(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?

tyvm!

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)
:frowning:

Ah looks like I misunderstood you :slight_smile:

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

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

See here: https://vuetifyjs.com/en/components/data-tables/#slots