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 ?
Related
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?
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
How to set v-data-table columns to fit its content width ?
<v-data-table
style="background: transparent"
dense
:headers="headers"
:items="items"
disable-pagination
hide-default-footer
no-data-text="No data available"
>
<!-- Titles -->
<template
v-slot:item.title="{ item }"
>
<div class="text-primary">
{{ item.title }}
</div>
</template>
</v-data-table>
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.
I am working on a dashboard project where I want to present several widgets on the dashboard. one of these is to show the admins a visualisation of their active/idle devices and since the whole project is vuetify based, I am trying to do this with v-progress-linear component. But for some reason it doesn't show the progress properly even if I am not changing the value for the bar. Below is my code and a screen shot of the result. I couldn't find any solution to this online so I assume I am missing something very basic about the component's usage or the grid layout that it is wrapped by.
Any help would be appreciated...
result
<template>
<v-container fluid class="grey lighten-5">
<v-card outlined flat class="mx-auto" align="center">
<v-icon large class="mt-5 mb-1">mdi-developer-board</v-icon>
<v-card-title class="justify-center pt-1 display-2 font-weight-black" > {{totalDevices}} </v-card-title>
<v-card-subtitle class="justify-center">Total no of Devices</v-card-subtitle>
<v-divider></v-divider>
<v-row >
<v-col>
<v-card flat>
<span class="caption" >Active: </span>
<span class="subtitle-2" >{{totalActive}}</span>
<v-progress-linear style="margin : 0 auto ;" class="mt-3" determinate color="#3cd1c2" :value="calcProgressValue('active')" ></v-progress-linear>
</v-card >
</v-col>
<v-divider vertical></v-divider>
<v-col class="d-flex justify-center">
<v-card flat>
<span class="caption">Idle: </span>
<span class="subtitle-2 align-right" >{{totalIdle}}</span>
<v-progress-linear style="margin : 0 auto ;" class="mt-3 text-xs-center" determinate color="#ffaa2c" :value="calcProgressValue('idle')" ></v-progress-linear>
</v-card>
</v-col>
</v-row>
</v-card>
</v-container>
</template>