Stack Overflow
Stack Overflow

Questions tagged [v-data-table]

157 questions
10
votes
5 answers

Vuetify change text Rows per page text in v-data-table's footer

I'm working with v-data-tables of Vuetify and.... I want to change this text: I have added this code but it isn't working: Thanks!
Nacho
  • 628
  • 1
  • 12
  • 19
8
votes
2 answers

Vuetify: Show pagination controls at the top of my v-data-table as well as in the footer

The v-data-table has a top slot, with a pagination prop whose structure matches that of the footer slot. Is it possible to assign the top slot to reference the same (presumably a v-pagination) control that the footer is using? My goal here is to…
Scott Baker
  • 10,013
  • 17
  • 56
  • 102
6
votes
2 answers

when will vuetify 3.0 beta support v-data-table

When is vuetify 3 going to support v-data-table in vue3? i have tried to us vuetify 3.0 beta and apparently it doesn't support v-data-table with vue 3. Is there a schedule for this? I'm stuck with the migrations as my apps uses this table as a main…
Yochai Tamir
  • 61
  • 1
  • 3
6
votes
1 answer

How to ad export csv, excel button on vuetify data table?

I am new for vuetify and faced problem with exporting my v-data-table to excel, csv format. How can i do it. Any suggestion or reccomondation. Thank you so much.
Lkhagvasuren
  • 85
  • 1
  • 7
6
votes
2 answers

Vuetify v-data-table align center only one column

i have: How can I align the content of that column vertically…
farahm
  • 1,326
  • 6
  • 32
  • 70
4
votes
2 answers

How do I search a Vuetify v-data-table column that is not in headers?

My Header: headers: [ { text: "Product Name", value: "name" }, { text: "Quantity", value: "quantity" }, { text: "Price", value: "price" }, { text: "Orders", value: "itemsSold" }, { text: "Revenue", value: "revenue" }, { text: "Status", value:…
Anjo Bautista Liwanag
  • 129
  • 10
3
votes
1 answer

Can't remove Footer/Pagination from V-Data-Table in Vue 3.2

So, I'm using VueJs 3.2, Vite 3.2.4, Vuetify 3.2.2... I'm aware of how should I declare the options on DataTable, so the footer and pagination be removed, like this:
Emmanuel
  • 109
  • 1
  • 9
3
votes
3 answers

Save the current page in v-data-table

I am using VueJS and Vuetify. In v-data-table UI Component of vuetify, I want to save the current page that the current user is. For example, if the user is on the page 3 of 10, and he reloads the page, it will automatically go back to page 3 of 10.…
Kiko
  • 31
  • 6
3
votes
1 answer

How to trigger only one button with vuedraggable?

I am implementing table draggable with vue. However, what I want is to trigger only the column button on the v-icon, but when all the rows are pressed, all triggers. How can I limit the draggable to only certain columns?
김정수
  • 611
  • 4
  • 9
  • 22
3
votes
2 answers

Can Vue.Draggable be used with Vuetify v-data-table and allow utilisation of table v-slot:item.?

Vuetify v-data-table supports several types of slots: v-slot:body, v-slot:item and v-slot:item.. We have been using v-slot:item. extensively, as these provides a flexible way to style and process content in individual columns AND allow…
Dazed
  • 1,069
  • 9
  • 34
3
votes
1 answer

Vuetify 2.2 DataTable multiple filters

I'm new in vue.js, please help. I need filters in my table. Each column must have multiple select filter by values. When we click on column header - dropdown multi select opens, and we can select filtered values. For example like this Vuetify Data…
Vitalii Feduniak
  • 113
  • 1
  • 2
  • 8
3
votes
1 answer

Custom vuetify data table dividers

When v-data-table is on mobile view, the divider between items is not clear. How can I custom this divider, for example linewidth and color? What I want to do: Custom divider on mobile view Code sample from vuetify doc