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.
Related
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"
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>
Table:
<v-card :dark="true">
<v-card-title>
<v-btn color="indigo" dark #click="initialize"><v-icon dark>refresh</v-icon></v-btn>
<v-spacer></v-spacer>
<v-text-field append-icon="search" label="Search" single-line hide-details></v-text-field>
</v-card-title>
<v-data-table :dark="true" :headers="headers" :items="expenses" hide-actions class="elevation-1">
<template slot="headers" slot-scope="props">
<tr>
<th v-for="header in props.headers">{{header.text}}</th>
</tr>
</template>
<template slot="items" slot-scope="props">
<tr v-bind:class="getClass(props.item)">
<td class="text-xs-center">{{ props.item.year }}</td>
<td class="text-xs-center">{{ props.item.month }}</td>
<td class="text-xs-center">{{ props.item.day }}</td>
<td class="text-xs-center">{{ props.item.description }}</td>
<td class="text-xs-center">{{ props.item.value }}</td>
<td class="text-xs-center">{{ props.item.category }}</td>
<td class="text-xs-center">{{ props.item.details }}</td>
<td class="justify-center layout px-0">
<v-btn icon class="mx-0" #click="deleteItem(props.item)">
<v-icon color="pink">delete</v-icon>
</v-btn>
</td>
</tr>
</template>
<template slot="no-data">
<v-btn color="primary" #click="initialize">Reset</v-btn>
</template>
</v-data-table>
</v-card>
Css before page reload, after the code is edited in Webstorm and automatically compiled:
And after the reload:
And if I just remove the first row, the same happens no matter which one is first.
I had the same problem.
They problem here is that You override the items slot including <tr> tag. Without that everything will work fine. But for me, that was not a solution so if You want to override the <tr> tag also, add :key to it, like this: <tr :key="props.index">.
Take a look at source of v-data-table here.
To be honest, i don't know why it make that big difference but in my case that resolved the problem (i suspect that it is connected with vue list rendering).
Hope it helps!
I have a layout similar to this:
My parent component is this:
<!-- Parent -->
<table>
<thead>
<tr>
<th>ID</th>
<th>Some</th>
<th>Column</th>
<th>Names</th>
</tr>
</thead>
<tbody>
<tr v-for="thing in things">
<td>{{ thing.id }}</td>
<my-child-component :thing="thing"></my-child-component>
</tr>
</tbody>
</table>
And my child component is like this:
<!-- Child Component -->
<template>
<td>{{ thing.foo }}</td>
<td>{{ thing.bar }}</td>
<td>{{ thing.baz }}</td>
</template>
I know you're required to have a single top level element in Vue (2.0), but I wondered if there's an "invisible" element that I can use. I know you can use v-for in a <template> tag but that won't work in my case.
Or, is there some wrapper that isn't going to break everything. I tried div/span etc but it was horrible and non-semantic.
Basically what I want is for the table header columns to line up with the tbody contents (I have been down the road of having a td with colspan set on it and putting a table inside that, but the columns don't always line up.
PS The real thing is much more complex than the example above, and I am presenting tabular data so don't want to hack about with css to reproduce a table.
Since you say that "the real thing is more complex", it's hard to tell if this will work in your case, but one way to do it could be something like this:
<tbody>
<my-child-component :things="things"></my-child-component>
</tbody>
And then in the child component:
<tr v-for="thing in things">
<td>{{ thing.id }}</td>
<td>{{ thing.foo }}</td>
<td>{{ thing.bar }}</td>
<td>{{ thing.baz }}</td>
</tr>
Not sure if this would work in your scenario?