Questions tagged [v-data-table]
87 questions
7
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
- 8,951
- 14
- 46
- 83
4
votes
2 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
- 398
- 4
- 14
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
Marcos De la Cruz
- 51
- 4
3
votes
0 answers
How to use vue-draggable (or Sortable JS) in a v-data-table with Vuetify 2 and Vue JS 2?
I'm trying to use vue-draggable with Vuetify v-data-table by following this article :
https://medium.com/vuetify/drag-n-drop-in-vuetify-part-ii-2b07b4b27684
It says : "The main goal was to set tbody of table as draggable component and it was not…
Léna Santamaria
- 31
- 3
3
votes
2 answers
Vuetify v-data-table align center only one column
i have:
{{item.id}}
How can I align the content of that column vertically…
farahm
- 1,042
- 3
- 17
- 55
2
votes
1 answer
Vue Data Table Headers All Appearing in One Column
I have a v-data-table and I am trying to print my headings, but with my code they are all appearing grouped into one column instead of across the entire table.
Vuetify
Dustin Cook
- 1,141
- 4
- 23
- 40
2
votes
3 answers
Vuetify data-table row does not expand
I'm building a vuetify with button icons on the right-most column. The button icons appear when a data row is hovered. I'd like the data row to expand when the row is clicked, but it's not working.
Current codepen implementation…
IdoTuchman
- 37
- 8
1
vote
1 answer
Vuetify data table v-model is not reactive to changes inside the table items
I have a Vuetify data table that is refreshed from the server every 5 seconds. It has selectable rows. If you select a row, then something in the data changes, the v-model array of selected items does not reflect the changes inside the row items. …
hobbes_child
- 107
- 1
- 10
1
vote
1 answer
Vuetify custom header
I am using Vuetify .
How to add button on table header ?
This code is what I have tried so far.
…
user1833620
- 549
- 5
- 19
1
vote
1 answer
Vuetify CRUD app with and action buttons
I'm currently learning VueJS for work and I'm trying to build a CRUD app that displays items from an API to a , and I want to edit, delete, and create new items using .
This is my main screen:
…
Arianna
- 23
- 4
1
vote
1 answer
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:…
1
vote
1 answer
How to watch directions of pagination in v-data-table vuetify
I need make different get requests to backend
depending on whether I move forward or backward on the table. What event I must use and how to make this?
Дмитрий Антипов
- 13
- 3
1
vote
1 answer
Vuetify Table with Switch or Checkbox
I want to use a v-data-table to toggle permissions on and off for end-users to receive a notification.
I have two separate issues, the second is in my codepen trying to recreate the issue which might highlight my misunderstanding of the issue. I've…
Woody_1983
- 151
- 2
- 14
1
vote
1 answer
What does that syntax mean?
i am working with vuetify and i need to make the serverside controlled data tables run.
now i saw this piece of code in the docs right here
and apart from that i am struggeling to understand how this is working i am confiused on this very piece of…
Deniz
- 73
- 1
- 8
1
vote
1 answer
How can select default a value in v-data-table with multiple filters
What I want is to be able to select an option in the v-select component by default. Here
Jorge Gatica
- 29
- 5
I am using Vuetify .
How to add button on table header ?
This code is what I have tried so far.
…
Vuetify CRUD app with
user1833620
- 549
- 5
- 19
1
vote
1 answer
Vuetify CRUD app with and action buttons
I'm currently learning VueJS for work and I'm trying to build a CRUD app that displays items from an API to a , and I want to edit, delete, and create new items using .
This is my main screen:
…
Arianna
- 23
- 4
1
vote
1 answer
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:…
1
vote
1 answer
How to watch directions of pagination in v-data-table vuetify
I need make different get requests to backend
depending on whether I move forward or backward on the table. What event I must use and how to make this?
Дмитрий Антипов
- 13
- 3
1
vote
1 answer
Vuetify Table with Switch or Checkbox
I want to use a v-data-table to toggle permissions on and off for end-users to receive a notification.
I have two separate issues, the second is in my codepen trying to recreate the issue which might highlight my misunderstanding of the issue. I've…
Woody_1983
- 151
- 2
- 14
1
vote
1 answer
What does that syntax mean?
i am working with vuetify and i need to make the serverside controlled data tables run.
now i saw this piece of code in the docs right here
and apart from that i am struggeling to understand how this is working i am confiused on this very piece of…
Deniz
- 73
- 1
- 8
1
vote
1 answer
How can select default a value in v-data-table with multiple filters
What I want is to be able to select an option in the v-select component by default. Here
Jorge Gatica
- 29
- 5