Scrollable Data Tables using Vuetify

13
votes

I want to create a vue page that has two data-tables that fill half the screen (vertically). Each data table should have a scroll bar if required.

I have tried the markup below, but this does not size the data-tables to the screen size. Here is a codepen example

<div id="app">
    <v-app id="inspire">
    <v-container fluid grid-list-md fill-height>
      <v-layout column>
        <v-flex md6>
          <v-data-table
            :headers="headers"
            :items="desserts"
            hide-actions
            class="elevation-1"
          >
            <template slot="items" slot-scope="props">
              <td>{{ props.item.name }}</td>
              <td class="text-xs-right">{{ props.item.calories }}</td>
              <td class="text-xs-right">{{ props.item.fat }}</td>
              <td class="text-xs-right">{{ props.item.carbs }}</td>
              <td class="text-xs-right">{{ props.item.protein }}</td>
              <td class="text-xs-right">{{ props.item.iron }}</td>
            </template>
          </v-data-table>
          </v-flex>
        <v-flex md6>
          <div>
          <v-data-table
            :headers="headers"
            :items="desserts"
            hide-actions
            class="elevation-1"
          >
            <template slot="items" slot-scope="props">
              <td>{{ props.item.name }}</td>
              <td class="text-xs-right">{{ props.item.calories }}</td>
              <td class="text-xs-right">{{ props.item.fat }}</td>
              <td class="text-xs-right">{{ props.item.carbs }}</td>
              <td class="text-xs-right">{{ props.item.protein }}</td>
              <td class="text-xs-right">{{ props.item.iron }}</td>
            </template>
          </v-data-table>
          </div>
        </v-flex>
      </v-layout>
    </v-container>
    </v-app>
</div>
3
vue.jsvuetify.js
I guess it will be results you expect if you remove fluid prop from v-container. – kuromoka
Is this what you need? codepen.io/Lawrence_Nara/pen/NLoBgL. I believe it is also possible to use a computed property with style and change the max-height per viewport – nara_l
Removing the fluid does not give the required result. @kuromoka – Douglas Woods
@nara_l, adding a max-height style does get close, but I want the flex to automatically calculate the height. I have set both tables to md6, so I expect them to each take half the available height – Douglas Woods
how will we fixed header of table when it is able to scorll – Rushikesh

3 Answers

10
votes

To acheive the result I needed to set the height to 100vh on the layout, and set overflow on each flex. I have updated the codepen in question

<div id="app">
<v-app id="inspire">
 <v-container>
  <v-layout column style="height: 90vh">       <--- added height
    <v-flex md6 style="overflow: auto">        <--- added overflow
      <v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
        </template>
      </v-data-table>
      </v-flex>
    <v-flex md6 style="overflow: auto">        <--- added overflow
      <v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
        </template>
      </v-data-table>
    </v-flex>
  </v-layout>
 </v-container>
</v-app>

6
votes

In Vuetify 2 it simply a matter of setting the height and fixed-header props. Not in the docs or examples, but found it over in the simple-table examples.

2
votes

Even though it has already been answered. I see that the answer above is not spelled correctly. Below is the correct example code for this.

<v-responsive
         class="overflow-y-auto"
          max-height="calc(90vh - 520px)">
</v-responsive

Or

</v-data-table
>
    <template v-slot:body>
         <v-responsive
               class="overflow-y-auto"
               max-height="calc(90vh - 520px)"
          >
                <tbody>
                      <tr>
                           <td>example</td>
                           <td><strong>test example</strong></td>
                      </tr>
                </tbody>
         </v-responsive>
  </template>
</v-data-table>