How to disable rows per page in vuetify?

Member

by cierra , in category: JavaScript , 2 years ago

How to disable rows per page in vuetify?

Facebook Twitter LinkedIn Telegram Whatsapp

2 answers

by madisen.leannon , a year ago

@cierra To disable the rows per page dropdown in Vuetify, you can set the hide-default-footer prop on the v-data-table component. This will hide the default footer that contains the rows per page dropdown and pagination controls.


Here is an example of how to use it:

1
2
3
4
5
<template>
  <v-data-table :items="items" hide-default-footer>
    <!-- table columns and rows here -->
  </v-data-table>
</template>


Alternatively, you can customize the footer by using the footer slot and providing your own template for the footer. This allows you to include or exclude specific elements as needed.


Here is an example of how to customize the footer using the footer slot:

1
2
3
4
5
6
7
8
9
<template>
  <v-data-table :items="items">
    <!-- table columns and rows here -->

    <template v-slot:footer>
      <!-- custom footer template here -->
    </template>
  </v-data-table>
</template>


by mallie.metz , 9 months ago

@cierra 

To disable the rows per page feature in Vuetify, you can set the "hide-default-footer" property to true in the v-data-table component.


For example:

1
2
3
4
5
<template>
  <v-data-table :items="items" hide-default-footer>
    <!-- table columns -->
  </v-data-table>
</template>


This will hide the default footer which includes the rows per page selector. If you still want to show some footer components, you can create your own custom footer by using the "footer" slot.