I want remove pagination on v-data-table,use hide-default-footer but it doesn't work.
try to use hide-dafault-footer
<v-data-table
:headers="headers"
:items="desserts"
hide-default-header
hide-default-footer
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.index }}</td>
<td>{{ props.item.name }}</td>
<td>{{ getProject(props.item.project_uuid) }}</td>
<td>{{ props.item.deadline }}</td>
<td>{{ getUser(props.item.executor) }}</td>
<td>{{ getUser(props.item.creator) }}</td>
<td>{{ props.item.description }}</td>
</template>
</v-data-table>
want to remove pagination
It should be :hide-default-footer="true"
<v-data-table
:headers="headers"
:items="desserts"
:hide-default-header="true"
:hide-default-footer="true"
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.index }}</td>
<td>{{ props.item.name }}</td>
<td>{{ getProject(props.item.project_uuid) }}</td>
<td>{{ props.item.deadline }}</td>
<td>{{ getUser(props.item.executor) }}</td>
<td>{{ getUser(props.item.creator) }}</td>
<td>{{ props.item.description }}</td>
</template>
</v-data-table>
Demo on codepen
adding
:hide-default-header="true"
:hide-default-footer="true"
will only remove the default footer and header,
to completely disable pagination you need to add
disable-pagination to your <v-data-table>
The correct answer for this is adding the attribute disable-pagination as it's stated on Vuetify documentation:
https://vuetifyjs.com/en/components/data-tables/
Vuetify documentation
This is true for Vuetify 2.x version, if you're using Vuetify 1.5 use the hide-actionsattribute instead.
https://v15.vuetifyjs.com/en/components/data-tables
I just add these two props to v-data-table
<v-data-table
hide-default-footer
disable-pagination
/>
No need to assign true to the props .i.e hide-default-footer="true"
That's what I usually do.
to disable pagination on v-data-table use disable-pagination prop
The answer from ittus almost works, but the attributes should not be bound (unless you have a data property called "true" that is set to a boolean of true.
Instead,
:hide-default-header="true"
:hide-default-footer="true"
should be
hide-default-header="true"
hide-default-footer="true"
Related
I want to call the editItem function when the table row is clicked. Current what happens is I click on the table row and it doesn't display the details page. Yet when I put this click event on a particular table data the editItem function gets called. How can I make this same function to be called on the table row itself?
Here in my code I have tried using the the v-data-table template and slot and included the click event on the row but it is not working either
<template slot="items" slot-scope="props">
<tr #click="editItem(item), selected = item.id">
<td>{{ props.item.member }}</td>
<td>{{ props.item[1] }}</td>
<td>{{ props.item[2] }}</td>
<td>{{ props.item[3] }}</td>
<td>{{ props.item[4] }}</td>
<td>{{ props.item[5] }}</td>
<td>{{ props.item[6] }}</td>
<td>{{ props.item[7] }}</td>
<td>{{ props.item[8] }}</td>
<td>{{ props.item[9] }}</td>
<td>{{ props.item[10] }}</td>
<td>{{ props.item[11] }}</td>
<td>{{ props.item[12] }}</td>
<td>{{ props.item[13] }}</td>
</tr>
</template>
I expect that when the row is clicked, the editItem function is called
I found a way around it using #click:row
<v-data-table :headers="headers" :items="desserts" :items-per-page="5"
class="elevation-1" #click:row="handleClick">
</v-data-table>
The handleClick function returns a value of the clicked item so I call the method I want to act upon the value within the handleClick method. I also manually highlighted the clicked row since I didn't find a Vuetify way of doing so.
An example of the handleClick method is here:
handleClick(value) {
this.highlightClickedRow(value);
this.viewDetails(value);
},
You can also access the clicked row using event.target. Example is here
highlightClickedRow(value) {
const tr = value.target.parentNode;
tr.classList.add('highlight');
},
I got another solution with highlighting.
Because Anjayluh's idea was not working for me.
in Vuetify 2.0.0
template
<v-data-table
:headers="headers"
:items="desserts"
:class="[item.selected && 'selected']"
#click:row="handleClick"
/>
...
</v-data-table>
and the script method
handleClick(row) {
// set active row and deselect others
this.desserts.map((item, index) => {
item.selected = item === row
this.$set(this.desserts, index, item)
})
// or just do something with your current clicked row item data
console.log(row.sugar)
},
and a style
.selected {
background-color: red
}
This solutions is the best for, maybe help you, it's work with vuetify 2.x.
{
// inside Vue Component
methods: {
openLink(link) {
console.log(`opened link ${link}`)
}
}
}
<v-data-table
:options="{ openLink }"
>
<template v-slot:body="{ items, options }">
<tbody>
<tr
v-for="item in items"
:key="item.id"
>
<td>
<button #click="() => options.openLink(item)" />
</td>
</tr>
</tbody>
</template>
</v-data-table>
Look: Data Table Api - slots.body it is for me, the best approachable to solve this problem.
I need to set 'active' for row where is item with property selected: true.
Before i did it with :active="props.item.selected", but now, in new verison of Vuetify it doesnt work.
<v-data-table
hide-default-footer
:items="views.BusinessOperationView.valueList"
:items-per-page="-1"
:headers="views.BusinessOperationView.headers">
<template v-slot:item="props">
<tr
#click="uiBusinessOperationSelectionChange(props.item.businessOperationId)"
:isSelected="props.item.selected"
style="cursor: pointer"
:active = "props.item.selected">
<td><v-card class="pa-2 ma-2 body-1 text-md-center">{{ props.item.loadText }}</v-card></td>
<td>{{ props.item.businessOperationName }}</td>
</tr>
</template>
</v-data-table>
<template v-slot:item="{ item }">
<tr :class="{active: group && item.id == group.id}">
<td>{{ item.name }}</td>
<td>{{ item.grade }}</td>
</tr>
</template>
This is how I do it for data tables with vuetify. The 'active' class could be customized to have a different background color than the default one.
Good day. i am trying to edit my v-data-table to suit my personal needs of rows and language. I managed to edit a few fields but i can't find a way to edit the "of" from "1-50 of 300".
I am reading the documentation but i got no idea on how to change that.
v-data-table
Here my current v-data-table documentation:
<v-data-table
:headers="headers"
:items="myItems"
:search="search"
no-results-text='LMAO NO DATA'
rows-per-page-text='Data'
:rows-per-page-items="[5, 50, 100, {text:'EVERYTHING', value: -1}] "
class="elevation-3"
>
EDIT: Sejir Ben Ali's answer is right but if you are having eslint errors showing up try using this:
<template v-slot:[`footer.page-text`]="props">
itens {{ props.pageStart }} - {{ props.pageStop }} of {{ props.itemsLength }}
</template>
From the docs (Slot: pageText - https://vuetifyjs.com/en/components/data-tables#slot-pagetext):
You can customize the page text displaying the range and total items by using the pageText slot.
<template>
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
<template v-slot:pageText="props">
ITEMS {{ props.pageStart }} - {{ props.pageStop }} OF {{ props.itemsLength }} // Edit this
// ^this is what you need
</template>
</v-data-table>
</template>
Support the functionality for a user to create/remove dynamic datatables which will be persisted in the backend.
// statically typed data table
<v-data-table
:pagination.sync="pagination"
:headers="headers"
:items="items"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.column1 }}</td>
<td class="text-xs-right">{{ props.item.column2 }}</td>
<td class="text-xs-right">{{ props.item.column3 }}</td>
<td class="text-xs-right">{{ props.item.column4 }}</td>
</td>
</template>
</v-data-table>
However my case is:
<template v-for="table in tables">
//where table will be a new <v-data-table> component with arbitrary rows
</template>
In addition those datatables will have real-time updates thus I have to somehow link each datatable state with vuex to enhance reactivity.
Here is a link to fist step for you, just combine v-for and v-data-table.
https://codepen.io/anon/pen/QRXyBg?editors=1010
And iterate over tables property. You can share headers.
If you need dynamic/reactive data, just update tables property from methods or some other places.
I'm close to where I need to go but not close enough. This is my code
<td>
<a href="https://www.ncbi.nlm.nih.gov/pubmed/"
{{item.pmid}} target="_blank">{{ item.pmid }}</a>
</td>
<td>{{ item.year }}</td>
<td>{{ item.title }}</td>
<td>{{ item.authors }}</td>
<td>{{ item.article }}</td>
<td>{{ item.journal }}</td>
<td>{{ item.rcr }}</td>
<td class="text-xs-right">{{ item.percentile }}</td>
If I take out the href {{item.pmid}} it will go to the web page in a new window. However I need to add the item.pmid value to the end of the href string so it will go to an exact page. If I leave it the way it is now I get an error saying 'Element': '{{' is not a valid attribute name. Is there someway that I can get the value concatenated to the string?
OK-- I've found this:
How to put variable in a href on the vue js 2?
But still not sure about how to us v-bind
The best way to do this, if anyone is still wondering, is to use dynamic rows
They work like this:
<v-data-table
:headers="tableHeaders"
:items="tableItems"
>
<template v-slot:item.link="{ item }">
<a :href="item.link">Link</a>
</template>
</v-data-table>
got it--
<td>
<a
:href="'https://www.ncbi.nlm.nih.gov/pubmed/' + item.pmid"
target="_blank"
>{{ item.pmid }}</a>
</td>