Vuetify: [Bug Report] V-Data-Table disable-pagination does not prevent changing items per page or page number.

[jamesdruhan]

Environment

Vuetify Version: 2.2.13
Vue Version: 2.6.11
Browsers: Chrome 79.0.3945.117
OS: Windows 10

Steps to reproduce

Set disable-pagination prop to true.

Expected Behavior

• Prevent pagination
• Prevent change of rows per page (should be disabled state)
• Prevent change of displayed items (should be disabled state)

Actual Behavior

On the surface it appears as if it prevents pagination because the data does not change. However, clicking next/previous still works and adjusts the items per page as if pagination was working. Also, changing rows per page doesn't actually do anything while in this state.

Reproduction Link

https://codepen.io/jamesdruhan/pen/KKpMeoo?editable=true&editors=101

[MajesticPotatoe]

disable-pagination only disables the functionality, to disable to footer functionality you need to apply it on footer-props like so :footer-props="{ disablePagination: true }"

Will update documentation for more clarity.

[jamesdruhan]

That works! Footer props aren't easy to find on the data table doc page. I would add both examples:

:footer-props="{ disablePagination : true, disableItemsPerPage : true }"

Tested and works great excluding that it seems when using :disable-pagination="true" it ignores items-per-page prob:

https://codepen.io/jamesdruhan/pen/KKpMeoo?editable=true&editors=101

This might be an actual bug. The example above loads all 10 items even though its set to 5.

[MajesticPotatoe]

The way I had interpreted it, when using disable-pagination it disables all pagination functionality (so something like item-per-page which tells it how many items to display inherently is disabled). Thoughts @nekosaur ?

[jamesdruhan]

I see.. This may be a feature change request in that case. My use case for disabling the pagination/footer functionality is based on the app performing a load or 'working' action. For example, a user deletes a row, using an action button. Then, while the delete is processing, the table loader prop is enabled and pagination is disabled. This fundamentally disables the entire table so the deletion process can complete without additional table actions. (Note that my table is configured with server side pagination/filtering/sorting/actions so the action of deletion is a REST request).

If my table has 100 items with a items-per-page set to 10, I definitely wouldn't want the table to visibly change so drastically that it temporarily shows 100 items while the deletion process is taking place.

Maybe what we need instead is a :disabled prop on the v-data-table.

As a work around for now we can just use :footer-props="{ disablePagination : true, disableItemsPerPage : true }" without setting :disable-pagination="true"

[nekosaur]

I wouldn't call it a workaround. It's the proper solution. disable-pagination disables the pagination _functionality_. If you only want to disable the inputs, use the disable props on footer-props

[Gaabooo]

What If I don't want to see the pagination at all? :/ Should I hide it with css?
(I know you can use hide-default-footer but shouldn't the :disable-pagination="true" disable the entire pagination functionality even hiding that part of the footer?)

[webcoderkz]

<v-data-table
  :headers="headers"
  :items="items"
  :disable-pagination="true"
  :footer-props="{ disablePagination: true, disableItemsPerPage : true }"
  :disable-sort="true"
/>

Both, disable-pagination and footer-props doesn't disable pagination, is it bug? Or documentation needs an update?

[userquin]

works fine on v2.3.10

@nekosaur if disabling pagination must be on footer-props, then why disable-sort can be done on v-data-table and not using header props?, I mean when setting disable-sort, why sort icons dissapear and cannot sort columns? If the behavior must be configured on target options, configuration must be consistent...