I want to add a button in the v-data-table footer similar to this image.
The issue is I can normally add a button if the table contains data, however, if there's no data, the button doesn't render.
Here's the code:
<v-data-table
class="elevation-1"
:headers="headers"
:items="configs"
item-key="id"
:items-per-page="10">
<template v-slot:footer.page-text>
<v-btn
color="primary"
dark
class="ma-2"
#click="buttonCallback">
Button
</v-btn>
</template>
</v-data-table>
This is what I want to achieve:
Here have you a data table example with the button:
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="configs"
:items-per-page="5"
class="elevation-1"
>
<template v-slot:footer.page-text>
<v-btn
color="primary"
dark
class="ma-2"
#click="buttonCallback">
Button
</v-btn>
</template>
</v-data-table>
</v-app>
</div>
https://codepen.io/jairoerazo/pen/wvzYBVW
You can delete the configs array items and the button is rendered.
Related
v-data-table keyboard navigation doesn't work, but I found this workaround. Is there any way to make checkboxes checked when they get focus after pressing tab key?
Not working table:
<template>
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
single-select
item-key="name"
show-select
class="elevation-1"
>
<template v-slot:item.data-table-select="{ item, isSelected }">
<v-checkbox
:value="isSelected"
hide-details
class="mt-0"
#change="onItemSelect({ item, value: !isSelected })"
></v-checkbox>
</template>
</v-data-table>
</template>
NOTE: headers and items took from Vuetify original example.
How can I put a button in the marked place?
There is the image
Check this codesandbox I made: https://codesandbox.io/s/stack-71162907-92xs69?file=/src/components/AppendButton.vue
You can use the item slot and customize it to your needs.
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
class="elevation-1"
>
<template #item.calories="{item}">
{{ item.calories }} <v-btn v-if="item.name=='Frozen Yogurt'" class="ml-1" small outlined>B</v-btn>
</template>
</v-data-table>
I am using the Vuetify Tooltip component. I want to display the tooltip icon right after the label. I am not sure how can I do that. Please help me figure that out. Right now the icon appears as in image 1
I want it right after the information text.
<v-container fluid>
<v-layout row wrap>
<v-flex xs11 md6 class="add-col-padding-right">
<v-text-field
label='Information'
v-model='dummy.info'
>
</v-text-field>
</v-flex>
<v-flex xs1 md6 class="add-col-padding-left">
<v-tooltip attach>
<a href='javascript:void(0);' slot="activator">
<i class="material-icons icon-black">
info
</i>
</a>
<span>Please enter the user information correctly.</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-container>
Update
<v-text-field
label='Information'
v-model='dummy.info'
>
<template v-slot:append>
<v-tooltip bottom>
<template #activator="{on}">
<v-icon v-on="on">mdi-pencil</v-icon>
</template>
</v-tooltip>
</template>
</v-text-field>
Update 2
If I put v-tooltip inside then it doesn't work. I want the icon to after right after information.
<v-tooltip right>
<v-icon slot="activator" dark color="primary">info</v-icon>
<span>Please enter the user information correctly.</span>
</v-tooltip>
<v-text-field
label='Information'
v-model='dummy.info'
>
</v-text-field>
Use the append slot for the v-text-field component. Inside of the v-text-field component, this should work for you:
<template v-slot:append>
<v-tooltip bottom>
<template #activator="{on}">
<v-icon v-on="on">mdi-pencil</v-icon>
</template>
<v-tooltip>
</template>
Edit: You may not have material design icons configured with Vuetify like I do.
Try this, sorry about the confusion.
<v-text-field>
<template v-slot:append>
<v-tooltip bottom>
<template v-slot:activator="{on}">
<v-btn v-on="on">test</v-btn>
</template>
<span>Hello World</span>
</v-tooltip>
</template>
</v-text-field>
This should put a v-btn at the end of the text field with a tooltip that reads 'Hello World'
I have a parent component with 2 buttons that I want to use as filters. the child component is called inside a v-data-table.
ScanGrid(parent):
<template>
<v-card class="ma-5" v-else>
<v-flex row xs12 class="pa-3 ml-3">
<div class="mr-3 mt-2">
<h3>Regrouper par :</h3>
</div>
<div>
<v-btn-toggle color="success" v-model="groupBy">
<v-btn
text
value="barCode"
class="lowerCase"
v-ripple="{ class: 'success--text' }"
>
Code barre
</v-btn>
<v-btn
text
value="productDef"
class="lowerCase"
v-ripple="{ class: 'success--text' }"
>
Définition de produit
</v-btn>
</v-btn-toggle>
</div>
</v-flex>
<v-card-text>
<v-layout align-center>
<v-data-table
:headers="headers"
:items="items"
item-key="StorageName"
show-expand
single-expand
:expanded="expanded"
hide-default-footer
#click:row="clickedRow"
>
<template v-slot:expanded-item="{ item }">
<td :colspan="12">
<ScanGridCode :item="item"></ScanGridCode>
</td>
</template>
<template v-slot:expanded-item="{ item }">
<td :colspan="12">
<ScanGridDef :item="item"></ScanGridDef>
</td>
</template>
</v-data-table>
</v-layout>
</v-card-text>
</v-card>
</template>
The children components I want to switch using the buttons are called ScanGridCode and ScanGridDef inside templates in v-data-table. I tried to find examples of filtering buttons online but couldn't find anything like what I want to do.
I'm using Vue 2.6.10 with Vuetify 2.1.7
You're almost done already, since you already have the v-btn-toggle set up with v-model="groupBy". All you still need is to add v-if to each template, like:
<template v-if="groupBy=='barCode'" v-slot:expanded-item="{ item }">
I have a button that is the activator for a dialog in my template. But I also want to use a tooltiop with the button. (Said otherwise, when I hover over the button I'd like to see the v-tooltip and when I click the button I'd like to open the dialog.)
I've tried to use the "append" slot on the tooltip but no success. When I add the append slot, the button completely vanishes from the rendered page.
Is it even possible to use a v-tooltip with a v-dialog in veutify?
This is what I have that does not work.
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<v-app>
<v-dialog v-model="showAddPopup" persistent max-width="600px">
<v-tooltip slot="append" bottom>
<v-btn slot="activator" absolute fab dark left color="primary" #click="showPopup=true">
<v-icon dark>add</v-icon>
</v-btn>
<span>Tooltip</span>
</v-tooltip>
<app-add-new-evaluator-modal #closePopup="closePopup($event)" #submit="addNewEvaluator" />
</v-dialog>
</v-app>
The Vuetify docs explain how to do this, but you'll find it in the Menu Component:
https://vuetifyjs.com/en/components/menus#menu-with-activator-and-tooltip
Here's a simple example which opens a dialog with a button that has a tooltip:
<v-dialog>
<template #activator="{ on: dialog }">
<v-tooltip>
<template #activator="{ on: tooltip }">
<v-btn v-on="{ ...tooltip, ...dialog }">Button</v-btn>
</template>
<span>Tooltip text</span>
</v-tooltip>
</template>
<v-card>
Dialog content
</v-card>
</v-dialog>
Thanks #Traxo. All I had to do was add the slot="activator"to both components for it to work.
⚠️ ⚠️ problem with this solution, menu gets closed when you click anywhere on it ⚠️ ⚠️
Use this only if you can afford it to close anywhere you click:
<template>
<v-menu>
<template v-slot:activator="{ on: menu, attrs }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn v-bind="attrs" v-on="{ ...tooltip, ...menu }" fab>
<v-icon>mdi-account-multiple-plus</v-icon>
</v-btn>
</template>
<span>tooltip</span>
</v-tooltip>
</template>
<v-card>
<v-card-title class="headline grey lighten-2">
title
</v-card-title>
<v-card-text>
text
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text #click="dialog = false">
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-menu>
</template>