HC200ok / vue3-easy-data-table

A customizable and easy-to-use data table component made with Vue.js 3.x
MIT License
536 stars 105 forks source link

Change default height of table #320

Open jarosjan opened 1 year ago

jarosjan commented 1 year ago

Hi I am trying to change default table height from this image to this image It can be only seen when there are only couple of rows inside a table.

I have managed that this property set min height of table to 180px image Can somebody help me out and help me override that? That property is somehow dynamically generated and it is never the same.

I have tried this but with no luck.

<EasyDataTable
        :headers="headers"
    :items="items"
    empty-message="No data"
    hide-footer
    @click-row="rowClick"
    table-class-name="tableClass"
>
</EasyDataTable>

<style>
.table-class {
       min-height: 50px;
}

Thank you in advance

KobyDamari commented 1 year ago

any news ?

JshGrn commented 12 months ago

I have done this by adding this to my global/main css file:

.vue3-easy-data-table div.vue3-easy-data-table__main {
    min-height: auto;
}
jarosjan commented 12 months ago

I have made custom class and changed it right in it like that:

.tableClass {
    --da0d4328: 50px !important;
}
clabnet commented 9 months ago

@jarosjan @KobyDamari
Unfortunately this not work. And not work also setting the properties table-height and/or table-min-height. Have you find the trick ?

warflash commented 5 months ago

fyi for future readers: Setting :table-min-height="0" or whatever you need as prop passed to the table instance does the trick