Scrollable table in Vuetify 3

Question

Playing around with Vuetify 3 and the Tabulator javascript library to generate tables. I probably have a simple request, I would like to include a scrollable table inside a component that takes up the space of the visible browser screen. I am now only getting a subsection of the rows without the ability to scroll down:

[![table-that-does-not-scroll][1]][1]

I checked the Tabulator height option but that doesn't give me a scrollable list. This is the Table component:

<div id="example-table"></div>
</template>

<script>

import { TabulatorFull as Tabulator } from 'tabulator-tables'; // import Tabulator library

export default {

  name: 'TabulatorView',

  data() {
    return {
      tabulator: null, // variable to hold your table
      tabledata: [],
    };
  },
  mounted() {
    this.tabledata = [];

    for (let i = 0; i < 55; i += 1) {
      this.tabledata.push({
        id: i,
        name: i,
        age: i,
        gender: 'male',
        rating: 50,
        col: 'red',
      });
    }

    this.tabulator = new Tabulator('#example-table', {
      data: this.tabledata,
      columns: [
        { title: 'Name', field: 'name' },
        { title: 'Gender', field: 'gender' },
        { title: 'Rating', field: 'rating' },
        { title: 'Favourite Color', field: 'col' },
      ],
      layout: 'fitColumns',
      // autoColumns: true,
      // layout: 'fitData',
      // pagination: true,
      // height: '411px',
      // width: '50%',
      // paginationSize: 50,
      // paginationSizeSelector: [10, 25, 50, 100],
    });
  },

};

</script>

and this is the App.vue component. I am playing around with v-sheets and v-card, but that's probably not the best way to handle it.

    <v-card
    class="d-flex row justify-center pa-2"
    outlined
    stretch
    tile  >
    <div>

    <v-sheet
      elevation="5"
      height="1050"
      width="1250"
    >

    <v-card-header>
      <div>
        <div class="text-overline mb-1">
          OVERLINE
        </div>
        <div class="text-h6 mb-1">
          Headline
        </div>
        <div class="text-caption">Greyhound divisely hello coldly fonwderfully</div>
      </div>
    </v-card-header>

    <Tabulator />
     <v-card-actions>
      <v-btn
        variant="outlined"
        rounded
        text
      >
        Button
      </v-btn>
    </v-card-actions>

    </v-sheet>

    </div>
  </v-card>

     <Miserables />

  </v-main>

  <v-footer app>
    <!-- -->
  </v-footer>
</v-app>

</template>




  [1]: https://i.stack.imgur.com/d66pO.png

Answer 1

You can use height prop to make table scrollable. Here is the working example.

<template>
    <div id="app">
        <v-app id="inspire">
          <v-data-table
          :headers="headers"
          :items="desserts"
          :fixed-header="true"
           height="calc(100vh - 200px)" 
        >
        </v-data-table>
      </v-app>
    </div>
</template>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 200,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 200,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 300,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
      ],
    }
  },
})