Adding class to <td> and <tr> in Vuetify data-table？

Question

 <v-data-table
      class="elevation-1 user-table"
      :headers="table.headers"
      :items="usersList"
      :items-per-page="table.options.itemsPerPage"
      :no-data-text="table.options.noDataText"
      :footer-props="table.options.footerProps"
    >
    <template slot="items" slot-scope="props">
        <td class="text-xs-right pa-4">{{ props.item.id }}</td>
        <td class="text-xs-right pa-0">{{ props.item.username }}</td>
        <td class="text-xs-right pa-0">{{ props.item.createdAt }}</td>
      </template> 
  
</v-data-table>

i try to use the slot="items" to change the class of td in vuetify table ,but it doesnt work?

i use this version of vuetify

"vuetify": "^2.3.17",

Sina Sina · Accepted Answer · 2020-12-10T07:52:54

refactor item slot to this

<v-data-table
  class="elevation-1 user-table"
  :headers="table.headers"
  :items="usersList"
  :items-per-page="table.options.itemsPerPage"
  :no-data-text="table.options.noDataText"
  :footer-props="table.options.footerProps"
>
  <template v-slot:item="{ item }">
    <tr>
      <td class="text-xs-right pa-4"> {{ item.id }} </td>
      <td class="text-xs-right pa-0"> {{ item.username }} </td>
      <td class="text-xs-right pa-0"> {{ item.createdAt }} </td>
    </tr>
  </template>
</v-data-table>

whats wrong with your code:

you used items instead of item => <template slot="item" slot-scope="props">
you missed tr element

Adding class to <td> and <tr> in Vuetify data-table？

1 Answers