'Vuetify v-data-table with fixed header & footer and scrollable body

want to create a table with vuetify v-data-table and want its header and footer be fixed. also its body must have a defined height and be scrollable. I can create a scrollable table with fixed header by these options, but the scroll will be put on the whole table (will be shown on header too) ; I want the scroll be only on body part. also how can I make the footer fixed at bottom?? (lets assume that the table is in a div with defined height e.g. 90vh)

<template>
    <v-data-table
    :headers="tableHeader"
    :items="items"
    item-key="id"
    disable-pagination
    hide-default-footer
    fixed-header
    height="400"
    >
    </v-data-table>
</template>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source