dynamic height of table (vuetify)

Update at Jan 7, 2021: Based on @Jack answer, I added trick 0. I guess, it should be more flexible than others.

Trick 0. You could create your own page template and combine it with v-resize directive.

Example page with Header, Title, Filter and Table blocks:

<template>
  <div v-resize="onResize">
    <slot name="header" />
    <slot name="toolbar" />
    <slot name="filter" />
    <div ref="resizableDiv">
      <slot name="table" :table-height="tableHeight" />
    </div>
  </div>
</template>

<script>
export default {
  name: "resizable-page",
  data() {
    return {
      tableHeight: 0,
    };
  },
  props: {
    footerHeight: {
      type: Number,
      default: 59, //default v-data-table footer height
    },
  },
  methods: {
    onResize() {
      this.tableHeight =
        window.innerHeight -
        this.$refs.resizableDiv.getBoundingClientRect().y -
        this.footerHeight;
    },
  },
};
</script>

There is a codesandbox with the example.

---

Old answer:

I recently encountered the same problem and haven't yet found a simple solution.

But there are 2 tricks that may be helpful to you.

Trick 1. Use v-data-table attribute height in vh. Example:

<v-data-table
  height="70vh"
  fixed-header
  :headers="headers"
  :items="desserts"
  :items-per-page="10"
  class="elevation-1"
  style="width: 100%"
></v-data-table>

Using this trick you can make the table shrink and grow in accordance with the height of the browser window.

Some advantages:

1. Fairly simple solution - you should only precalculate vh value
2. It looks ok in most cases

Some disadvantages:

1. You should set a specific vh to every table on every page. This is not an universal solution.
2. Starting from a certain browser window height you'll get 2 scroll bars in your browser - one in table and another one for the whole page. In order to avoid the appearance of the 2nd scroll bar as far as possible, you should specify the lowest possible vh value. So, on the large screens there will still be some space between table and footer.

Trick 2. Use v-resize directive and recalculate table's heigth.

Example for your template:

<v-layout fluid v-resize="onResize">
  <v-data-table
    :height="windowSize.y - 64 - 24 - 59 - 36"
    fixed-header
    :headers="headers"
    :items="desserts"
    :items-per-page="10"
    class="elevation-1"
    style="width: 100%"
  ></v-data-table>
</v-layout>
...
<script>
  export default {
    data () {
      return {
        ...
        windowSize: {
          x: 0,
          y: 0,
        },
      }
    },
    ...
    methods: {
      onResize () {
        this.windowSize = { x: window.innerWidth, y: window.innerHeight };
      },
    }
  };
</script>

Notes for constants in height prop: 64 is your header height, 24 - table padding (12 for top + 12 for bottom), 59 - table footer height, 36 - page footer height.

Some advantages:

1. If you precalculate your height correctly, second scroll bar will never appear and your table will fit in your page between header and footer.

Some disadvantages:

1. Not a universal solution
2. You should calculate this height for every page. It will be much harder than in trick 1. Also don't forget that some elements (by example, table filters) may change their height according to some sizes (like xs, sm, md, ...)

Also take a look that in both cases I use fixed-header attribute. This attribute was firstly introduced in Vuetify 2.0 and (according to docs) does not work in IE11.