Vuetify: How to set v-data-table row height manually? - vuetify.js

Question

How to set <v-data-table> row height manually ?
Setting the table to dense is some small enough for my needs.
By default, $data-table-dense-row-height is set to 32px !default;

Answer 1

Check this codesandbox I made: https://codesandbox.io/s/stack-70697036-bo4yx?file=/src/components/TableExample.vue
If you don't want to mess with SASS variables, or modify the value globally you can use the item-class prop of the v-data-table like this:
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
:item-class="setRowStyle"
>
</v-data-table>
You need to define a function to be able to apply css to the hole item row.
methods: {
setRowStyle(item) {
/* Here you can also do some validation
in case you want to apply different css
classes depending on item attributes
values */
return 'style-1'
}
}
And then you simply defined the css you want to be apply to your data-table rows:
<style>
.style-1 td {
height: 100px !important;
}
</style>
If you want to use a scoped css style block, you'll need to defined your css using deep selector to properly apply the height to td tags.
<style scoped>
>>>.style-1 td {
height: 100px !important;
}
</style>
If you also want to modify the row headers height, you can use the class attribute in your headers array.