Vuetify Data table: how to have an automatic number of rows per page (depending on the vertical space filled by the component)?

Question

I am using Vuetify and its amazing datatable but I can't find a way for the datable to adjust automatically the number of rows per page (that is, when the pagination is enabled) depending on the vertical space filled by the component?

So that when resizing the browser, the datatable would automatically change the number of rows per page.

Is there a way or a workaround to achieve that?

I would probably attempt to have a computed property for :items-per-page where a check is made on the container height and dependant upon that value, based on a set of ranges of acceptable heights, set the row num (items-per-page) accordingly. — seantunwin

chans chans · Accepted Answer · 2019-10-31T12:33:03

Yes it is possible to set the number of rows per page automatically when we resize the page

Here is the working code: https://codepen.io/chansv/full/PooOpJz

Open developers console and try resizing the window size, Its just a prototype or an approach to make it work, you can add your own logic to how to behave on resize

https://codepen.io/chansv/pen/PooOpJz

<div id="app">
  <v-app id="inspire">
    <v-data-table
      id="dataTable"
      :headers="headers"
      :items="desserts"
      :items-per-page="itemsPerPage"
      :footer-props="footerProps"
      class="elevation-1"
    ></v-data-table>
  </v-app>
</div>



new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      itemsPerPage: 0,
      optionsLength: 6,
      footerProps: {'items-per-page-options': [5, 10,15, 30, 50, 100]},
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          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: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    }
  },
  methods: {
    updateTable() {
      var tableHeight = document.getElementById('dataTable').offsetHeight;
      this.itemsPerPage = parseInt(tableHeight/40);
      if (this.desserts.length < this.itemsPerPage) this.itemsPerPage = this.desserts.length;
      if (!this.footerProps['items-per-page-options'].includes(this.itemsPerPage)) {
        if (this.footerProps['items-per-page-options'].length == this.optionsLength) {
          this.footerProps['items-per-page-options'].unshift(this.itemsPerPage);
        } else {
          this.footerProps['items-per-page-options'].shift();
          this.footerProps['items-per-page-options'].unshift(this.itemsPerPage);
        }
      }
    },
  },
  created() {
    this.updateTable();

    var self = this;
    window.onresize = function(event) {
      self.updateTable();
    };
  },
})

Vuetify Data table: how to have an automatic number of rows per page (depending on the vertical space filled by the component)?

1 Answers