Vuetify - Layout problem for v-data-table

Question

I have a Vuetify v-data-table on a v-card and I cannot get the layout right.

So it's a configurable 2x2 layout (and it's supposed to use pagination, no scrolling).

<template>
  <v-layout column>
    <v-layout row>
      <DashboardItem :item="itemTypes[0]" class="xs6" />
      <DashboardItem :item="itemTypes[1]" class="xs6" />
    </v-layout>
    <v-layout row>
      <DashboardItem :item="itemTypes[2]" class="xs6" />
      <DashboardItem :item="itemTypes[3]" class="xs6" />
    </v-layout>
  </v-layout>
</template>

The user can configure items into a 2x2 layout. This is a 2x2 layout, so it's expected to be 4 items in total, with all 4 items of the same size.

This is what a DashboardItem looks like:

<template>
  <v-flex>
    <v-card height="100%">
      <Statistics v-if="item==='Statistics'" />
      <Alarms v-if="item==='Alerts'" />
      <Devices v-if="item==='Devices'" />
      <Heartbeat v-if="item==='Heartbeat'" />
    </v-card>
  </v-flex>
</template>

So, depending on the item type we show a component for that type. Now it gets interesting (at least for me). Here is the Alarms component. It's a title + a table that shows the data.

<template>
  <v-layout column child-flex>
    <v-card-title>{{ $t('biz.general.items.alarms') }}</v-card-title>
    <v-layout ref="tableDiv" style="height:90%;" column v-resize="onResize">
      <v-data-table :headers='headers' :items='alarms' :pagination.sync='pagination' hide-actions>
        <template slot="items" slot-scope="props">
          <td>{{ props.item.fridgeDisplayName }}</td>
          <td>{{ props.item.alarmTime | formatDateTime }}</td>
          <td>{{ props.item.state }}</td>
          <td>{{ props.item.task }}</td>
        </template>
      </v-data-table>
    </v-layout>
    <div class="text-xs-center pt-2">
      <v-pagination circle v-model="pagination.page" :length="pages"></v-pagination>
    </div>
  </v-layout>
</template>

This kind of works. But there are problems:

• The height of the Alarms component is too large. It is supposed to be a 2x2 layout with all cards of the same size. But the Alarms component pushes the envelope. It's rendered much higher than 50% of the overall height and the row that contains the Alarms component is much higher than the other row. It's no longer a 2x2 layout with all items of the same height.
• Based on the size of the component, I need to change and recalculate the paging of the v-data-table. So when the user resizes the window, I change the pagination of the table. But I cannot, due to the size issue above, the table's v-card is just not sized properly.

How do I force a 2x2 layout, without the v-data-table pushing the height of its v-card?

Here is a CodePen with the expected layout: https://codepen.io/saschaausulm/pen/xQwawJ

This shows the problem: https://codepen.io/saschaausulm/pen/KrdBZd

Update You can resize the table.

Small: Small

Large: After resize

The base issue is that the v-card doesn't keep its height.

Thanks,

Sascha

Answer

The answer is a bit weirder than expected but Steven Spungin's answer helped a bit.

It's the v-data-table that pushes. So setting the height of the table helps. And the weird part: I am setting

style="height:5px;"

on the v-data-table.

Then, the v-data-table stays in the v-card. And resizes/paginates through the v-resize as expected when the user changes the size of the window.

Answer 1

Updated Answer:

The data table has a fixed height, and is not flexible.

To work around that issue, add some explicit flex to your code in these 2 containers:

<v-app id="inspire">
    <v-container fill-height>
      <v-layout column fill-height>
        <v-layout row style='flex: 1 1 50%; overflow: hidden'>
...
        <v-layout row style='flex: 1 1 50%; overflow: hidden'>

Then allow the data table's parent card to scroll.

<v-card height="100%" style='overflow:auto'>

Here is a codepen. https://codepen.io/Flamenco/pen/jQbgpG

Per my previous answer, you can also set the size of the the v-data-table by using style/height, style/max-height, or by setting the max displayed rows on the component.