Vuetify-DataTable Change Header Height

Question

I am trying to change the height of the Table header unfortunate an not able to find any way to change table header height.

Could you please help me to reduce the table header height?

I have attached the screen shot.

Answer 1

You can do it only with CSS. Maybe in version 2 it will be done.

Today set style on selector table.v-table thead tr {}

Answer 2

For everyone who stumbles across this question: You can change the header height or basically every css attribute of the header via css. Just add this piece of code to your <style> tag

<style>
     >>> .v-data-table-header {
      height: 70px;
    }
</style>

Answer 3

'v-data-table' API option
your variables.scss input variable

v-data-table

$data-table-regular-header-height: 2rem;

v-data-table option dense

// all table height(v-data-table option dense)
$data-table-dense-header-height: 2rem;
only table header height, modify '$data-table-dense-row-height'

// basic value 
$data-table-dense-row-height: data-table-dense-header-height !default;

other sass option -> vutify site