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.
Related
I'm having trouble trying to use the Vue.Draggable library. I would like to use a component inside my draggable while keeping the transition-group. It's working without the transition group but whenever Im adding the transition-group tag with the animation name its not working anymore. My components elements are not showing up and I'm having this error :
TypeError: Cannot set properties of null (setting '__draggable_context')
Here is my code :
<draggable :list="teams" item-key="idteam" tag="transition-group" :component-data="{name:'fade'}>
<template #item="{ element, index }">
<my-team :id="element.idteam" :name="element.teamName" :index="index">
</my-team
></template>
</draggable>
Any idea how could I make all work together ?
Thanks for your help
You need to add :animation="200"; only adding tag="transition-group" is not enough.
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.
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 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 have a react-bootstrap-table like that:
<div>
<BootstrapTable data={this.state.results} striped hover condensed options={this.options}>
<TableHeaderColumn dataField="VERSION" isKey={true} dataSort={true}>Version</TableHeaderColumn>
<TableHeaderColumn dataField="DATASTAMP">Data</TableHeaderColumn>
</BootstrapTable>
</div>
When I load data to my table and my rows get a long sentence or more info than row expected my table got horizontal scrollbar. I haven't problem with that, I will handle it later, but my headers are still the same size and do not fit to my table. Maybe you know solution for that?
Did you add react bootstrap table styles?
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css';