I use v-data-table with grouped rows: https://codepen.io/jangaraj/pen/zYqOwBj?editors=1010
I would like to show also item count for each category, e.g. category: Candy (3 items in the group).
Is there any slot for this kind of customization?
You can customize the group.header slot...
<template v-slot:group.header="{ group, items, isOpen, toggle, remove }">
<td colspan="2">
<v-btn icon #click="toggle">
<v-icon v-if="isOpen">
mdi-minus
</v-icon>
<v-icon v-else>
mdi-plus
</v-icon>
</v-btn>
Category: {{ group }} {{ items.length }}
<v-btn icon #click="remove">
<v-icon>
mdi-close
</v-btn>
</td>
</template>
Codeply
Related
I have a v-data-table that's supposed to display 42 elements.
I made it so it can display 10 elements minimum or 42 depending on the user's wishes.
<v-card-text>
<v-data-table
dark
:footer-props="{ 'items-per-page-options': [10, 25, -1] }"
dense
calculate-widths
fixed-header
height="498"
:headers="headers"
:items="res"
sort-by="publicationDate"
:sortDesc="sortVal"
class="elevation-1"
>
<template #item.video="{ item }">
<a
target="_blank"
v-if="item.video != ''"
class="links1 video-icon"
:href="item.video"
>
<v-btn dark icon>
<v-icon class="ic1">mdi-movie</v-icon>
</v-btn>
</a>
</template>
<template #item.title2="{ item }">
<!-- NEWS column -->
<a
target="_blank"
v-if="item.file != ''"
class="links1"
:href="item.file"
>
<span style="color:white"> {{ item.title }} </span>
</a>
</template>
</v-data-table>
</v-card-text>
</v-card>
When 10 items are displayed, I'd like my table to not be scrollable, that all 10 items are displayed and I'd like it to be scrollable when mre than 10 items are displayed.
Does anyone know how to do that ?
As you can see in the picture my expandable panels do not use the maximum available width.
I want the expandable panels to use the maximum width available in the data table and make the columns fit exactly the width of the header columns. In addition to that it would be great to hide the expand Button (and also make the panel not clickable) if there is not enough data to display. I know that there is a hide-actions prop for that but I do not know how to use that.
My code:
<template>
<div class="table table--fixed-layout d-flex flex-grow-1 overflow-hidden fill-height">
<div v-if="loading" class="d-flex ma-auto">
<v-progress-circular indeterminate color="primary" :width="3" />
</div>
<v-data-table
v-else
item-key="id"
hide-default-footer
fixed-header
disable-sort
:headers="headers"
:items="filteredItems"
:items-per-page="-1"
>
<template #[`header.ticketNumber`]="{ header }">
<data-table-filter :name="header.text" #change="ticketNumberFilter = $event" />
</template>
<template #[`header.title`]="{ header }">
<data-table-filter :name="header.text" #change="titleFilter = $event" />
</template>
<template #[`header.status`]="{ header }">
<data-table-filter
:name="header.text"
:default-values="filterableTicketServiceStatuses"
#change="statusFilter = $event"
>
<template #default="{ value }">{{ getTicketServiceStatusLabel(value) }}</template>
</data-table-filter>
</template>
<template #[`header.hostNames`]="{ header }">
<data-table-filter :name="header.text" #change="hostNameFilter = $event" />
</template>
<template #[`header.creator`]="{ header }">
<data-table-filter :name="header.text" #change="creatorFilter = $event" />
</template>
<template v-slot:body="{ items }">
<v-container fluid>
<tbody v-for="item in items" :key="item.id">
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-header>
<template v-slot:default="{ open }">
<v-col>
<ticket-number :ticket-number="item.ticketNumber" />
</v-col>
<v-col>
<td class="pl-4">{{ item.title }}</td>
</v-col>
<v-col>
<li v-for="hostName in getFirstFourTicketHostNames(item)" :key="hostName">
<div class="pt-md-2">{{ hostName }}</div>
</li>
<div v-if="item.hosts.length > 4">
<v-fade-transition leave-absolute>
<span v-if="open">
<li v-for="hostName in getRestOfTicketHostNames(item)" :key="hostName">
<div class="pt-md-2">{{ hostName }}</div>
</li>
</span>
</v-fade-transition>
</div>
</v-col>
<v-col>
{{ getTicketServiceStatusLabel(item.status) }}
</v-col>
<v-col>
{{ item.creator }}
</v-col>
<td class="table__date">{{ formatDateTime(item.creationDate) }}</td>
<v-col></v-col>
<v-col>
<td class="table__date">{{ formatDateTime(item.finishedDate) }}</td>
</v-col>
<v-col>
<td class="pl-4">
<v-icon v-if="item.notifyCustomer">{{ icons.mdiCheck }}</v-icon>
</td>
</v-col>
</template>
</v-expansion-panel-header>
</v-expansion-panel>
</v-expansion-panels>
</tbody>
</v-container>
</template>
</v-data-table>
</div>
</template>
How can I achieve that?
Any one know how to use text-truncate with v-button. My current attempts are this:
<v-menu
offset-y>
<template v-slot:activator="{on, attrs}">
<v-btn
text
v-bind="attrs"
v-on="on"
:max-width="150"
class="text-truncate"
><span class="text-truncate;max-width:150px">{{ userEmail }}</span></v-btn>
</template>
<v-list>
<v-list-item-group>
<v-list-item
v-for="(item, index) in personalMenuItems"
:key="index"
#click="item.action">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
</v-menu>
Make sure your properly setting the max-width style...
<v-btn text v-bind="attrs"
v-on="on"
:max-width="150">
<span class="text-truncate" style="max-width:150px">{{ userEmail }}</span>
</v-btn>
Demo
When adding "hide-default-header" to the v-data-table, I've noticed the sort function for all columns are removed. I'd like to keep that functionality, is there a simple way to re-include sort?
It's tricky because I'm also attempting to add an additional icon with search features next to it, hence the need for a custom th template in the header.
In the code below, the 1st column is attempting to use the sort function to no avail. Any help would be appreciated in getting it working.
<v-data-table
#click:row="rowClick"
:headers="headers"
:items="arrangedList"
:search="search"
:items-per-page="10"
class="outlined elevation-0"
hide-default-header
>
<template>
<thead>
<tr>
<th :class="[
'column sortable',
pagination.descending ? 'desc' : 'asc',
headers[0].value === pagination.sortBy
? 'active'
: '',
]">
<!-- Foo1 -->
{{ headers[0].text }}
<template>
<v-btn :ripple="false" x-small icon>
<v-icon #click="changeSort(headers[0].value)" color="grey darken-1">fa-arrow-up</v-icon>
</v-btn>
</template>
<v-menu attach="#menuAnchor" :close-on-content-click="false" :nudge-height="200" offset-y content-class="gridfilter-dd" style="display: inline-block">
<template v-slot:activator="{ on }" id="menuAnchor">
<v-btn :ripple="false" x-small icon v-on="on">
<v-icon color="grey darken-1">mdi-filter-outline</v-icon>
</v-btn>
</template>
<v-card class="gridfilter-card">
<v-list-item class="gridfilter-list-item">
<v-list-item-content class="gridfilter-list-item-content">
<v-text-field v-model="filterCandyValue" label="Enter Candy #" :clearable="true"></v-text-field>
</v-list-item-content>
</v-list-item>
<v-card-actions class="gridfilter-card__actions">
<v-spacer></v-spacer>
<button type="button" class="btn btn-primary" #click="onCandyFilterApply()">
<i class="fa fa-floppy-o"></i>
Apply
</button>
</v-card-actions>
</v-card>
</v-menu>
</th>
<!-- Foo2 -->
<th>
<v-menu :close-on-content-click="false" :nudge-height="200" offset-y content-class="gridfilter-dd" style="display: inline-block">
<template v-slot:activator="{ on }" id="menuAnchor1">
<span v-on="on">{{ headers[1].text }}</span>
<v-btn :ripple="false" x-small icon v-on="on">
<v-icon color="grey darken-1">mdi-filter-outline</v-icon>
</v-btn>
</template>
<v-card class="gridfilter-card">
<v-list-item class="gridfilter-list-item">
<v-list-item-content class="gridfilter-list-item-content">
<v-text-field label="Enter Foo2 #" :clearable="true"></v-text-field>
</v-list-item-content>
</v-list-item>
<v-card-actions class="gridfilter-card__actions">
<v-spacer></v-spacer>
<button type="button" class="btn btn-primary" #click="onFilterApply()">
<i class="fa fa-floppy-o"></i>
Apply
</button>
</v-card-actions>
</v-card>
</v-menu>
</th>
</tr>
<template slot="items" slot-scope="props">
<tr :active="props.selected" #click="props.selected = !props.selected">
<td class="text-xs-right">{{ props.item.Foo1 }}</td>
<td class="text-xs-right">{{ props.item.Foo2 }}</td>
</tr>
</template>
</thead>
</template>
</v-data-table>
P.S. I was using this page as a starting point in getting the table set up: https://codepen.io/mikecole/pen/zLNKbG
Looks like you want to remove the header row, however you still want keep the sort.
So without adding hide-default-header option and keeping the header text value as empty string, you can keep the sort functionality.
HTML
<v-data-table
#click:row="rowClick"
:headers="headers"
:items="arrangedList"
:search="search"
:items-per-page="10"
class="outlined elevation-0"
>
JS
headers: [
{
text: '',align: 'left', value: 'name'
},
{ text: '', value: 'calories' },
.
.
],
I use Vuetify and the "secondary" color doesn't show, as the "github" icon.
Here is my code:
<div class="text-center">
<v-bottom-sheet v-model="aPropos" inset>
<template v-slot:activator="{ on: sheet }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn
class="mx-2"
fab
dark
small
v-on="{ ...tooltip, ...sheet }"
color="secondary">
<v-icon dark>mdi-help-circle-outline</v-icon>
</v-btn>
</template>
<span>À propos</span>
</v-tooltip>
</template>
<v-sheet class="text-center">
<div class="my-3">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="https://www.facebook.com/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
<v-icon>mdi-facebook</v-icon>
</v-btn>
</template>
<span>Facebook</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="https://twitter.com/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
<v-icon>mdi-twitter</v-icon>
</v-btn>
</template>
<span>Twitter</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="https://www.linkedin.com/in/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
<v-icon>mdi-linkedin</v-icon>
</v-btn>
</template>
<span>LinkedIn</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="mailto:xxx" class="mx-2" color="secondary" fab x-small dark v-on="on">
<v-icon>mdi-email</v-icon>
</v-btn>
</template>
<span>Courriel</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="http://xxx" target="_blank" class="mx-2" color="orange" fab x-small dark v-on="on">
<v-icon>mdi-firefox</v-icon>
</v-btn>
</template>
<span>Site internet</span>
</v-tooltip>
</div>
<div class="my-3">Licence</div>
<div class="my-3">
<v-btn href="https://github.com/xxx" target="_blank" class="ma-2" tile outlined color="primary">
<v-icon left>mdi-github</v-icon> Page GitHub du projet
</v-btn>
</div>
<v-btn
class="mt-6"
text
color="error"
#click="aPropos = !aPropos"
>Fermer</v-btn>
</v-sheet>
</v-bottom-sheet>
</div>
And here is the result:
The "email" button should be light blue and the logo next to "Page GitHub" should be the GitHub logo, not a striked telephone.
I precise, because I already searched for similar questions, that I use "v-app" at the top of my app, to wrap it all (all the other features display correctly).
I use the last version of VueJS and Vuetify (everytime I build I fetch the last version).
If anybody has a clue why I have this result, it would be great. Thanks in advance.
Actually running npm install #mdi/font --save-dev solves the "GitHub" icon problem.
The color problem wasn't a problem, surprisingly it's the color they've chosen to be secondary.