I am using vuetify data table
<v-data-table
:headers="fields"
:items="items"
:search="search"
:mobile-breakpoint="NaN"
fixed-header
:loading="isBusy"
>
<template v-slot:item="{item,headers}">
<tr>
<td
v-for="(header, index) in headers"
:key="index"
>{{ header.formatFn(item[header.value]) }}</td>
</tr>
</template>
<template v-slot:item.userid="{ item }">Abc{{item}}</template>
<v-alert
slot="no-results"
:value="true"
color="error"
icon="warning"
>Your search for "{{ search }}" found no results.</v-alert>
<template slot="no-data">No Data Exists!</template>
</v-data-table>
The below slot template v-slot:item.userid="{ item }">Abc{{item}}</template> doesn't work for any reason which I am unable to figure out
My fields array has a field 'userid' present.
Well, it worked as I found a way through to it
<tr>
<td v-for="(header, index) in headers" :key="index">
<span
v-if="header.value != 'userid'"
>{{ header.formatFn(item[header.value]) }}</span>
<span v-else-if="header.value == 'userid'">
// do your work
</span>
<span v-else>{{ header.formatFn(item[header.value]) }}</span>
</td>
</tr>
Related
with vuetify 2.x, I´d like to show my data grouped with option to collapse and expand on icon click.
My problem is if I use both 'group.header slot' and 'group slot', the first one doesn´t appear in the table.
If I hide 'group.header' slot I can put the group name into 'group slot', but I can´t use the icon click to collapse/expand the group.
<v-card-text>
<v-data-table
:headers="headers_parcelas"
:items="fitens_parcelas"
:items-per-page="5"
dense
hide-default-header
group-by="nome_conta"
show-group-by
class="elevation-1 marcarguias"
>
<template #[`group.header`]="{ group, isOpen, toggle }">
<th colspan="2">
<v-icon #click="toggle"
>{{ isOpen ? 'mdi-minus' : 'mdi-plus' }}
</v-icon>
{{ group }}
</th>
</template>
<template #group="props">
<!-- <span class="font-weight-bold">
{{ props.group }}
</span> -->
<v-data-table
:headers="props.headers"
:items="props.items"
dense
item-key="nome_conta"
hide-default-footer
>
<template #body="{ items }">
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.descricao }}</td>
<td>{{ item.nome_forma_recebimento }}</td>
<td>{{ item.nome_quem_lancou }}</td>
<td>
{{ formatCurrency(item.valor_recebido) }}
</td>
<td class="text-center">
<span>
<v-icon
small
title="Apagar Movimento"
color="error"
#click.stop="deleteParcelaCaixa(item)"
>
mdi-delete
</v-icon>
</span>
</td>
</tr>
<tr>
<td colspan="5" class="text-center">
<span class="ml-10 font-weight-black">
SubTotal: {{ formatCurrency(itemTotal(items)) }}
</span>
</td>
</tr>
</tbody>
</template>
</v-data-table>
</template>
<template #[`body.append`]="{ items }">
<v-col
cols="12"
sm="6"
class="text-center font-weight-black text-h6 primary mx-auto"
>
Total:{{ formatCurrency(getTotalCost(items)) }}
</v-col>
</template>
</v-data-table>
</v-card-text>```
I have a v-data-table in which I have the rows with checkboxes. I'm trying to implement a checkbox in the table header where selecting the checkbox would select the entire checkboxes in the table row.
This is my code:
<v-data-table
v-model="model"
styles="font-size:5px;"
:headers="headers"
:items="items"
single-select
:items-per-page="10"
class="elevation-1" hide-default footer
>
<template slot="headers" slot-scope="props">
<tr>
<th> <v-checkbox :input-value="props.all"> </v-checkbox>
</tr>
</template>
<template v-slot:item="row" :activator="{ on, attrs }">
<!-- <tr #click="highlightRow(item.item, item)"> -->
<tr>
<td>{{ row.item.DisplayValue }}</td>
<td>
<label class="form-checkbox">
<input type="checkbox" :value="row.item.DataValue" v-model="preselected1" >
<i class="form-icon"></i>
</label>
</td>
<td>
<label class="form-checkbox">
<input type="checkbox" :value="row.item.DataValue" v-model="preselected2">
<i class="form-icon"></i>
</label>
</td>
</tr>
</template>
</v-data-table>
I did try the solution from https://vuetifyjs.com/en/components/data-tables/#row-selection but what I'm trying to achieve is more like:
Need checkbox in highlighted places
Any pointers on achieving this would be appreciated.
According to Vuetify documentation, you can do something like this:
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:header.colWithCheckbox_1="{ header }">
{{ header.text }}
<v-checkbox v-model="headerCheckboxes.colWithCheckbox_1" />
</template>
</v-data-table>
I'm updating vuetify to the lastest version ( was 1.5 prior ) and I'm having trouble trying to adjust my table with the new props and slots. You can see my table right below, it has the possibility of selecting multiple lines and select all as well at the same time. I just need to purely replicate what I have, only to the new version and I don't know how to do it with the new slots.
<div class="col-12">
<v-data-table
v-model="selected"
:headers="headers"
:items="queriedData"
item-key="Id"
select-all
:pagination.sync="pagination"
:total-items="queriedData.lenght"
prev-icon="mdi-menu-left"
next-icon="mdi-menu-right"
sort-icon="mdi-menu-down"
>
<template v-slot:headers="props">
<tr>
<th v-if="canView">
<v-checkbox
:input-value="props.all"
:indeterminate="props.indeterminate"
primary
hide-details
color="white"
#click.stop="toggleAll"
class="table-checkbox-header"
></v-checkbox>
</th>
<th width="30px">
</th>
<th width="30px">
</th>
<th
v-for="header in props.headers"
:key="header.text"
:class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
#click="changeSort(header.value)"
>
{{ header.text }}
<v-icon small>arrow_upward</v-icon>
</th>
</tr>
</template>
<template v-slot:no-data>
<div class="text-center">
{{NoInformation}}
</div>
</template>
<template v-slot:items="props">
<td v-if="canView">
<v-checkbox
v-model="props.selected"
primary
color="primary"
hide-details
class="table-checkbox-body"
></v-checkbox>
</td>
<td style="display: inline-flex;" >
<v-tooltip top color="primary" v-if="CanEdit">
<template v-slot:activator="{ on }">
<a v-on="on" class="btn-table-icon" #click.prevent="doSomething(props.item.Id)">
<i class="mdi mdi-eye icons-tables-margins"></i>
</a>
</template>
<span>{{view}}</span>
</v-tooltip>
<v-tooltip top color="primary" v-if="CanEdit" >
<template v-slot:activator="{ on }">
<a v-on="on" class="btn-table-icon" #click.prevent="doSomething(props.item.Id)">
<i class="mdi mdi-square-edit-outline icons-tables-margins"></i>
</a>
</template>
<span>{{view}}</span>
</v-tooltip>
</td>
<td>
<div v-if="props.item.Id!=0">
<span>Hello</span>
</div>
<div v-else>
<i class="mdi mdi-folder-lock-open"></i>
</div>
</td>
<td>{{ props.item.Name}}</td>
<td>{{ props.item.Name2}}</td>
<td>{{ props.item.Name3}}</td>
<td>{{ props.item.Name4}}</td>
<td :style="'color:' + props.item.ColorName" >{{ props.item.Name5}}</td>
</template>
</v-data-table>
</div>
Thank you.
Using slots seems not very different with the new version.
The only difference I can see is the props:
Before :
<template v-slot:headers="props">
Now :
<template v-slot:headers="{props}">
And for the checkboxes, you can just use the prop 'show-select' instead of using slots
How to add class with condition to td ?
<template slot="items" slot-scope="props">
<td>
{{ props.item.id }}
</td>
<td :class="{'users-table__item--delete': props.item.login === 'admin'}">
{{ props.item.login }}
</td>
<td :class="{'users-table__item--delete': props.item.login === 'admin'}">
{{ props.item.type }}
</td>
</template>
It does not work.
Upd.
My version: "vuetify": "^2.1.15",
<template>
<v-card>
<v-card-text class="pa-0">
<template v-if="usersList.length">
<v-data-table
>
<template slot="items" slot-scope="props">
<td>
{{ props.item.id }}
</td>
<td>
{{ props.item.login }}
</td>
</template>
<template slot="item.action" slot-scope="props">
<div class="d-flex">
<v-btn
#click="changeUser(props.item.id)"
>Edit</v-btn>
</div>
</template>
</v-data-table>
</template>
<p v-else>No users</p>
</v-card-text>
</v-card>
</template>
I have item.action slot for show buttons. May be this affects on it ?
It seems you forgot to add tr tag.
This code works:
<template v-slot:item="props">
<tr>
<td :class="{'green': props.item.id > 4 && props.item.id <= 5,'red': props.item.id > 10}">{{ props.item.id }}</td>
</tr>
</template>
Result:
Here is an example of datatable with rows grouped by category. I want to expand/collapse it by group header click. Tried to replace the default rendering of a row using v-slot:item but seems it's not working.
The second way is to replace the default rendering of grouped rows using v-slot:group, but I hope should be another way.
Here's the code:
<v-data-table
dense
:headers="headers"
:items="desserts"
item-key=name
group-by="category"
class="elevation-1"
>
<template v-slot:item="{ item }">
<template v-if="item.show">
Show row
</template>
<template v-else>
</template>
</template>
<template v-slot:group.header="{ items }">
<td #click="expandRows(items[0])"
class="text-xs-right"
>
<strong>{{ items[0].category }}</strong>
</td>
<td class="text-xs-right">22%</td>
<td class="text-xs-right">24%</td>
<td class="text-xs-right">25%</td>
</template>
</v-data-table>
Please suggest how can I solve that?
The solution is to replace the default rendering of group headers and grouped rows using v-slot:group.
<template v-slot:group="{ items, expand }">
<tr #click="toggle(items[0].category)">
<td class="text-xs-right"><strong>{{ items[0].category }}</strong></td>
<td class="text-xs-right">22%</td>
<td class="text-xs-right">24%</td>
<td class="text-xs-right">25%</td>
</tr>
<tr v-for="(item, index) in items" :key="item.id" v-show="!item.hide">
<td v-for="header in headers">
{{ item[header.value] }}
</td>
</tr>
</template>
Here is codepen