[Vuejs]-Cannot remove pagination and add sorting indicators in v-data-table in vue

1👍

Removing the pagination

As shown in the "External Pagination" example in the Vuetify 3 docs, you can change the pagination of a data table by overriding the content of the "bottom" slot. By overriding the slot but not providing any content, you can effectively remove the pagination.

Keeping the default sorting mechanism

Based on your example code, you’re already overriding the headers slot for each column, which would be why the default sorting controls are not appearing [docs]. If you still want to keep the default sorting controls, you’ll need to what the docs state and re-implement that sorting functionality. There’s an example of how to do this in the docs as well, although it on re-implements the "click" part of the functionality, not the "hover" part.

Putting it all together

You can see an example that implements that using the <v-hover> component and some inline styling here: [Vuetify playground link]. The first, second, and third headers in the example have been overridden, and the fourth and fifth headers have been left with the default.

This approach would probably benefit from a custom component to abstract away the logic for the sort icon, otherwise that template will get verbose quickly.

Leave a comment