CODEWITHSUNDEEP
vuetify.js
DevonDahon
DevonDahon

Reputation: 8350

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

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;

Upvotes: 1

Views: 2548

Answers (1)

cmfc31
cmfc31

Reputation: 1508

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.

Upvotes: 1

Related Questions