I'm using the properties "fixed-header" and "height" for the data table component, they work fine. But for the cases where there a just a few items on the table it takes the height set anyways having bigger space than the one needed.
I think it would be really useful to have a "max-heigth" property, so the table can be smaller depending on the amount of items and grow up to certain height value showing the scroll if it is bigger.
It would be very helpful if this can receive a different value depending on the resolution (xs, lg, etc)
Indeed, it would be great. Thanks.
Alternative solution:
<div style="max-height:25vh; overflow:auto">
<v-data-table>...</v-data-table>
</div>
EDIT: Unfortunately it doesn't work properly with fixed-header, or with percentage
@nyszilard
What about "fixed-header"?
If we use your solution we will break "fixed-header" feature
Any updates?
This feature would be good, because I can only solve this problem with a hack right now: https://codepen.io/szili303/pen/vYGjOxb
This solution doesn't work if I set the fixed-header property. Although I think it can be solved based on this codepen.
Most helpful comment
@nyszilard
What about "fixed-header"?
If we use your solution we will break "fixed-header" feature