Lock the Height of a Paginated DataTable?

[adlaws]

Howdy!

Is there any way to lock the height of a paginated DataTable such that if the page of items being displayed has less than the `rows` property items, the `DataTable` doesn't jump around in size?

The demo of the paginated table in the documentation works fine, because the number of items in the example is (conveniently) evenly divisible by 10, 20 and 50 (the options for the number of rows), so no matter which page you view it is always fully populated (see https://www.primefaces.org/primevue/sho ... /paginator).

However if the number of items is such that they are not evenly divisble by the number of rows per page, the last page doesn't have "enough" rows to fill the page.

For example, if you have 13 items, and you display 10 rows per page, the first page has 10 rows displayed, but the second/last page only has 3 rows of data to display.

This means that the table suddenly shrinks, and the pagination controls (and anything else further down in that layout context) will jump "upwards" on the page which is (to me, at least) quite annoying. The jump can be very dramatic, especially if the final page only contains a single item.

My current solution is to manually style the `<div class="p-datatable-wrapper">` DOM element of the `DataTable` component when it is mounted so that the height is "locked", based on the number of rows displayed.

I think we can all agree that the following is fairly evil (mainly the `mounted()` hook):

Code: Select all

<template>
    <DataTable
        ref="theTable"
        :paginator="true"
        :rows="tableRows"
    />
</template>

<script>
export default {
    data()
    {
        return {
                tableRows: 5,
        };
    },
    mounted()
    {
        // NOTE: For a DataTable with the `p-datatable-sm` class applied, each row is 45px high per
        // item plus 1px for the row 'line', so 46px per row
        const theTable = this.$refs.theTable;
        theTable.$el.querySelector('.p-datatable-wrapper').style.minHeight = (this.tableRows* 46) + 'px';
    },
</script>

This is (sort of) nice in that I can also put a watcher on the `tableRows` and re-style if the row count changes, but...

Is there a better way to achieve this?

Thanks!