# trame: specify item specific slots

**URL:** https://discourse.paraview.org/t/trame-specify-item-specific-slots/12685
**Category:** Web Support
**Created:** [August 11, 2023, 2:26pm UTC](https://discourse.paraview.org/t/trame-specify-item-specific-slots/12685 "2023-08-11T14:26:54Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![utkarsh.ayachit](https://discourse.paraview.org/user_avatar/discourse.paraview.org/utkarsh.ayachit/32/39_2.png) [@utkarsh.ayachit](https://discourse.paraview.org/u/utkarsh.ayachit)
#### Post date: [August 11, 2023, 2:26pm UTC](https://discourse.paraview.org/t/trame-specify-item-specific-slots/12685/1 "2023-08-11T14:26:54Z")

</div>

How do I add item-specific dynamic slots for `VDataTable`? e.g I want to model this Vuetify example in trame, how can I do it?

```auto
<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template v-slot:item.calories="{ item }">
      <v-chip
        :color="getColor(item.calories)"
        dark
      >
        {{ item.calories }}
      </v-chip>
    </template>
  </v-data-table>
</template>

```

ref: [Vuetify — A Material Design Framework for Vue.js](https://v2.vuetifyjs.com/en/components/data-tables/#item)

---

<div class="post-metadata">

### Author: ![jourdain](https://discourse.paraview.org/user_avatar/discourse.paraview.org/jourdain/32/11_2.png) [@jourdain](https://discourse.paraview.org/u/jourdain)
#### Post date: [August 11, 2023, 2:34pm UTC](https://discourse.paraview.org/t/trame-specify-item-specific-slots/12685/2 "2023-08-11T14:34:35Z")

</div>

```python
with vuetify.VDataTable(
  headers=("headers", [...]),
  items=("desserts", [...]),
  classes="elevation-1",
):
  with vuetify.Template(
    calories="{ item }",
    __properties=[
      ("calories", "v-slot:item.calories"),
    ],
  ):
    vuetify.VChip(
      "{{ item.calories }}"
      color=("item.color",), 
      dark=True,
    )

```

---

<div class="post-metadata">

### Author: ![utkarsh.ayachit](https://discourse.paraview.org/user_avatar/discourse.paraview.org/utkarsh.ayachit/32/39_2.png) [@utkarsh.ayachit](https://discourse.paraview.org/u/utkarsh.ayachit)
#### Post date: [August 11, 2023, 2:39pm UTC](https://discourse.paraview.org/t/trame-specify-item-specific-slots/12685/3 "2023-08-11T14:39:59Z")

</div>

That did the trick. Thanks!

---

<div class="post-metadata">

### Author: ![jourdain](https://discourse.paraview.org/user_avatar/discourse.paraview.org/jourdain/32/11_2.png) [@jourdain](https://discourse.paraview.org/u/jourdain)
#### Post date: [August 11, 2023, 3:09pm UTC](https://discourse.paraview.org/t/trame-specify-item-specific-slots/12685/4 "2023-08-11T15:09:06Z")

</div>

While we can automate most of the static properties. For that use case, we don’t know the shape of the data and therefore, we need to tell the Widget to convert a specific keyword argument into a specific JS property. That API is captured on the [Abstract class](https://trame.readthedocs.io/en/latest/core.widget.html) which let you do custom mapping on properties and events.