Quasar mixin to automatically set QTable rowsPerPage to fit container height

QTableOptimizerMixin.js

/**
 * The host component/page must have a QTable with ref="table" and :pagination.sync="pagination"
 * The optimal row count is calculated in relation to the height of the element wrapping the <q-table>
 */

const getElementHeight = (el, selector) => {
   const target = selector ? el.querySelector(selector) : el;
   return target ? parseFloat(getComputedStyle(target).height) : 0;
};

export const QTableOptimizerMixin = {
   data() {
      return {
         tableHeights: null,
      };
   },
   methods: {
      getTableHeights() {
         if (!this.tableHeights) {
            const { table } = this.$refs;
            const el = table.$el;
            const offset = el.offsetTop;
            const top = getElementHeight(el, '.q-table__top');
            const bottom = getElementHeight(el, '.q-table__bottom');
            const header = getElementHeight(el, 'thead');
            const footer = getElementHeight(el, 'tfoot');
            const rowHeight = getElementHeight(el, 'tbody tr');
            const cellHeight = getElementHeight(el, 'tbody td');
            const row = Math.max(rowHeight, cellHeight);
            this.tableHeights = {
               offset,
               top,
               bottom,
               header,
               footer,
               row,
            };
         }
         return this.tableHeights;
      },
      setOptimalRows() {
         const { table } = this.$refs;
         if (!table || !this.pagination) {
            return;
         }
         const { filteredSortedRowsNumber: tableRows, $el: { parentElement } } = table;
         const {
            offset, top, bottom, header, footer, row,
         } = this.getTableHeights();
         const wrapperHeight = getElementHeight(parentElement);
         const availableSpace = wrapperHeight - offset - top - header - footer - bottom;
         let optimal = Math.floor(availableSpace / row);
         if (optimal > tableRows) {
            optimal = tableRows;
         }
         if (optimal < 1) {
            optimal = 1;
         }
         if (optimal !== this.pagination.rowsPerPage) {
            this.pagination.rowsPerPage = optimal;
         }
      },
   },
};

TableOptimizerExample.vue

<template>
   <q-page
      class="column"
      padding>
      <div class="col-grow full-width">
         <q-resize-observer
            debounce="200"
            @resize="setOptimalRows" />
         <q-table
            ref="table"
            title="Table title"
            :columns="cols"
            :data="data"
            :pagination.sync="pagination" />
      </div>
   </q-page>
</template>

<script>

import { QTableOptimizerMixin } from 'src/mixins/QTableOptimizerMixin';

const rows = [];
for (let i = 1; i <= 100; i++) {
   rows.push({ id: i, name: `Row ${i}` });
}

export default {
   name: 'TableOptimizerExample',
   mixins: [QTableOptimizerMixin],
   data() {
      return {
         cols: [
            { name: 'id', label: 'id', field: 'id' },
            { name: 'name', label: 'Name', field: 'name' },
         ],
         data: rows,
         pagination: {
            rowsPerPage: 3,
         },
      };
   },
};
</script>