CODEWITHSUNDEEP
cssvue.jsvue-componentvuetify.js
Saroj
Saroj

Reputation: 1571

Vuetify datatable how fit the table vertically along with pagination footer stick to the bottom

I am having a hard time making the vuetify datatable fit to the screen along with pagination footer sticking to the bottom of the screen regardless of number of rows in the data table.

I tried to set the footer to use following css to always stick to the bottom but it doesn't work as expected

  #table .v-data-footer {
  position: absolute;
  bottom: 0;
}

#table .v-data-table__wrapper {
  height: 400px;
  margin-bottom: 100px;
  overflow: auto scroll;
}

When the data table has more number of rows, it simply pushes the pagination control to the bottom and it is not visible until I scroll it down to the very bottom.One thing I also tried to do is to set a fixed height for the data table but this is not ideal because of the device sizes, for larger screen size it behaves really weird.

I have a codepen with a simple data table, when we increase the number of rows from pagination control, it loads more number of rows and the footer simply hidden because of height. I expect the data table to have a height for the content so that user can scroll through the rows and the pagination control should always stick to the bottom no matter what the device size is.

I would really appreciate if anyone can help or give me any pointers on this.

Upvotes: 2

Views: 6712

Answers (2)

sleepymouse
sleepymouse

Reputation: 1

your just code 1.code v-data-table in v-container1 2.put ||style="height: xxxx"|| class="elevation-1 overflow-y-auto" || in v-data-table 3.code v-pagination in v-container2 try it!!!!!

<template>
<div>
      <v-container>
        <v-data-table
          :headers="headers"
          :items="items"
          :page.sync="page"
          :items-per-page="5"
          class="elevation-1 overflow-y-auto"
          :search="search"
          hide-default-footer
          @page-count="pageCount = $event"
          style="height: 300px"
        >
        </v-data-table>
      </v-container>
      
      <v-container>
        <div class="text-center pt-2">
          <v-pagination
            v-model="page"
            :length="pageCount"
          ></v-pagination>
        </div>
      </v-container>
</div>

</template>

Upvotes: 0

Hans Felix Ramos
Hans Felix Ramos

Reputation: 4424

If you want the v-data-table fit screen. you can use position: fixed to the footer, and set a margin to wrapper (same as footer height):

#table .v-data-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
}

#table .v-data-table__wrapper {
  margin-bottom: 60px;
}

https://codepen.io/hans-felix/pen/MWaMENQ

Upvotes: 1

Related Questions