2

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.

Saroj
  • 1,551
  • 2
  • 14
  • 30
  • 1
    That should help `#table .v-data-footer { position: fixed; bottom: 0; width: 100%; justify-content: center; }` – Grzegorz T. May 28 '20 at 17:28
  • This should make the footer stick to the bottom but the main content won't be not scrollable. It needs a height to be set so that the content can be scrollable. – Saroj May 29 '20 at 07:11

2 Answers2

1

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

Hans Felix Ramos
  • 4,264
  • 3
  • 16
  • 40
  • Thanks for answer! Really appreciate it but I want the headers to be fixed and the wrapper area to be scrollable along with fixed footer! – Saroj May 29 '20 at 03:45
  • you can make the top section fixed as the same footer way – Hans Felix Ramos May 29 '20 at 03:57
  • what if there are more element before the table, I want to make the header fixed but the content shhould be scrollable. for example this one https://codepen.io/sarojsasmal/pen/PoPrdrV?editors=1100 . But the problem is that If I provide a fixed height, it won't scale across the devices. for large devices there are empty space inside the table content. Please try to zoom out the codepen to see the issue. – Saroj May 29 '20 at 06:19
  • See for this [example](https://stackoverflow.com/a/57170489/10424385), the same can be done with footer. – Grzegorz T. May 29 '20 at 09:13
0

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>
sleepymouse
  • 1
  • 1
  • If I provide a static height then the data table height will always be 300px. Which is not ideal. – Saroj Jun 04 '20 at 11:08