<v-data-table> keyboard navigation workaround - vuejs2

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.

Related

v-data-table parent item data in expanded-item slot

I've a v-data-table inside the expanded-item slot for another data table. I want to access the ID of the parent item within the child. I've tested with a inside the expanded-item slot, in that paragraph, I am able to show the id. However, inside the child data-table, I don't know how to use this value.
<v-data-table
:headers="headers"
:items="financialDocuments"
:single-expand="singleExpand"
item-key="finDocId"
show-expand
>
<template v-slot:expanded-item="{ item }">
<td :colspan="attachmentHeaders.length">
<p>{{item.finDocId}}</p>
<v-data-table
:headers="attachmentHeaders"
:items="item.attachmentPlainDtos"
>
<template v-slot:[`item.attachmentActions`]="{ item }">
<v-icon large #click="removeAttachment(parentItem.Id, item.attachmentId)">
mdi-delete
</v-icon>
</template>
</v-data-table>
</td>
</template>
</v-data-table>
The parent item was already available, just had to rename the reference to it to prevent two "item"s, one is the parent, one is child and refer to the correct one.
<v-data-table
:headers="headers"
:items="financialDocuments"
:single-expand="singleExpand"
item-key="finDocId"
show-expand
>
<template v-slot:expanded-item="{ item: finDoc }">
<td :colspan="attachmentHeaders.length">
<v-data-table
:headers="attachmentHeaders"
:items="finDoc.attachmentPlainDtos"
>
<template v-slot:[`item.attachmentActions`]="{ item }">
<v-icon large #click="removeAttachment(finDoc.Id, item.attachmentId)">
mdi-delete
</v-icon>
</template>
</v-data-table>
</td>
</template>
</v-data-table>

Vuetify adding button next to datatable data

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>

How to remove the select all option from a v-data-table?

I need to hide the select all option from a v-data-table, the vuetify component. According to the documentation including the header-prop, single-select as true should do it but is not working.
<v-data-table
v-model="selected
:headers="headers"
:items="items"
show-select
:header-props="{singleSelect:true}"
></v-data-table>
If you want to be able to only select one item at a time you can add single-select directly to v-data-table:
<v-data-table
v-model="selected"
:headers="headers"
:items="items"
show-select
single-select
></v-data-table>
If you want to be able to select multiple items you can override the select all checkbox with the header.data-table-select slot:
<v-data-table
v-model="selected"
:headers="headers"
:items="items"
show-select
>
<template #header.data-table-select></template>
</v-data-table>
I use slot to overwrite the select-all.
<v-data-table
v-model="selected"
:headers="headers"
:items="items"
show-select
>
<template v-slot:[`header.data-table-select`]></template>
</v-data-table>
and if you could put a title for sue, like this:
<v-data-table
v-model="selected"
:headers="headers"
:items="items"
show-select
>
<template v-slot:[`header.data-table-select`]>Selected</template>
</v-data-table>

Vuetify V-Data-Table footer Add Button

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.

Switching child components inside v-data-table using buttons(filters)

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 }">