Hello I'm using vuetify to implement pagination by using <v-data-table> and <v-pagination>
I wonder why :server-items-length prop is used when requesting data from the backend.
Previously, I implemented it by using #page-count in v-data-table and pageCount as prop in v-pagination.
I am curious about the difference between the two methods and the advantages of using server-items-length.
before
<v-data-table
:headers="headers"
:items="items"
:search="search"
:items-per-page="itemsPerPage"
#page-count="pageCount = $event"></v-data-table>
<v-pagination v-model="page"
:length="pageCount"
:total-visible="totalVisible">
after
<v-data-table
:headers="headers"
:items="items"
:server-items-length="postLenth">
<v-pagination v-model="page" :length="pageCount" :total-visible="10"
When pagination is done locally in the client by Vuetify, Vuetify already has all the items and can count the total length of the items and divide it into pages, using items-per-page prop.
But, when pagination is done on the server-side, Vuetify might only have items for the one page and needs information about the total length of the items in DB, to be able to display the total amount of pages.
Passing server-items-length prop will tell Vuetify how many items there are in total.
Related
Hello and thank you for reading my question.
I have an array of objects looking like this :
[{
id=1,
products= [a,b,c]
},
{
id=2,
products= [d,e,f]
}]
I want to display data in a v-data-table with two columns (id and products) and products items in a nested v-data-table.
So far I found that i should use template and v-slot but I don't find the right way to do it.
<v-data-table
item-key="id"
items={products}
>
<template v-slot="">
<v-data-table> ... </v-data-table>
</template>
</v-data-table>
Instead of the nested table I get
[object Object],[object Object]
How to use template v-slot in tsx files ?
And more generally, how to 'translate' vuetify js to tsx (documentation) ?
Thanks again
you have made a slot which is correct, but you need to tell vuetify which slot you want to access. To access the default <td> slot of all rows you can simply use v-slot:body="{ items }" and pass it the items, so you can create a view per column. (Available slots are listed here Vuetify doc, if you scroll down. Each component has them)
I have made a codepen that you can check out Codepen. As of translating it to tsx, I can't help you, since I haven't worked with it, but if you grasp the concept of how to do it on the vuetify part, you should be good!
I am trying to add perfect-scrollbar to vuetify's data tables. So I have to wrap the data table inside the perfect-scrollbar component like this -
<perfect-scrollbar>
<v-data-table :headers="headers" :items="data" />
</perfect-scrollbar>
The problem is that its also wrapping the data-table footer. I want to wrap only the data of table within perfect-scrollbar component. So that only data is scrollable and footer remains there.
Now it looks like this -
Actually no need to use perfect-scrollbar here.
You just set the height to v-data-table. Then the component automatically sets the scroll bar.
As the example,
<v-data-table :headers="headers" :items="data" height="200px"/>
Try with it.
I would like to know if there is a way to do what I'm trying to describe below:
Let's suppose we have a component with a slot, and a fallback content has been defined.
When using this component elsewhere, I would like to have the following behavior:
<TheComponent>
<template v-slot:name="{ data }">
<fallback v-if="condition(data)"/>
</template>
</TheComponent>
I suppose the fallback tag (or similar) does not exists (at least, I didn't find it...). So I suppose I'm thinking the wrong way, but I can't find a solution to my problem.
The thing is that I can't alter the TheComponent as it is provided by an external library, and I don't want to re-create the content.
If it can help, in fact, I'm trying to hide the expand button to prevent to expand a row in a Vuetify data-table, depending on if the row has something to show or not in it's expanded part. So I would like to write something that behave like:
<v-data-table :items="items" show-expand ...>
<template v-slot:item.data-table-expand="{ item }">
<!-- Here I want the default behavior only if my item respects some condition -->
<fallback v-if="condition(item)"/>
<!-- Otherwise, I don't want to display the button that expands the row -->
</template>
</v-data-table>
Thank you in advance for your help.
After quite a lot of "googling" I don't think its possible. IMHO your best bet is to replicate the default slot content Vuetify generates and put it under your own condition (v-if="item.description" in my example):
<v-data-table :headers="headers" :items="people" show-expand>
<template v-slot:expanded-item="{ item, headers }">
<td :colspan="headers.length">{{ item.description }}</td>
</template>
<template v-slot:item.data-table-expand="{ item, isExpanded, expand }">
<v-icon
v-if="item.description"
:class="['v-data-table__expand-icon', { 'v-data-table__expand-icon--active': isExpanded }]"
#click.stop="expand(!isExpanded)"
>$expand</v-icon>
</template>
</v-data-table>
I understand this solution is brittle and can break anytime Vuetify change something but i don't think there is better solution now...
Example
I am using v-for for and then showing the components. is rendering fine but inner element is missing. I am unable to understand. You can see two columns are empty but in the console three are 5 components rendered but showing only 3 components. Tell what may be the problem. any help will be appreciated
<div v-for="(counterDate, index) in fulldate_array" >
<template v-if="shift[officer.oid]">
<shiftlayout v-for="(data,shiftKey) in shift[officer.oid][fulldate_array[index]]" :shift_data="data" :shiftKey="shiftKey" :date="singledate_array[index]" :fulldate="fulldate_array[index]" :width="shiftWidth"/>
</template>
</div>
How would one go about applying a VueJS filter (i.e. {{ price | currency }}) to data displayed using vue-tables-2?
I tried playing around with slots with one of the demo tables to no avail: https://jsfiddle.net/jfa5t4sm/11/
This is a bit annoying, as 'custom filters' mean different things in different context, so searching the docs is not bearing fruit.
Anyone have ideas?
Since it's a scoped slot you have to access the value through the props object and give it the correct slot name.
<template slot="price" scope="props">
<div>
<p>{{ props.row.price | currency }}</p>
</div>
</template>
Working JsFiddle