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>
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.
in this example of vuetify documentation for data-tables as described
here, to customize the calories column we’re using the item.calories slot:
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:item.calories="{ item }">
<v-chip
:color="getColor(item.calories)"
dark
>
{{ item.calories }}
</v-chip>
</template>
</v-data-table>
</v-app>
</div>
but i need v-for to customize all the columns, so that it can be something like:
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<v-for :list="headers">
<template v-slot:item.header="{ item }">
<v-chip
:color="getColor(item.header)"
dark
>
{{ item.calories }}
</v-chip>
</template>
</v-for>
</v-data-table>
</v-app>
</div>
Unfortunately, this is not working.
Does anybody know how can I deal with this issue?
Thanks in advance!
You can acheive that by using the 'slot' prop instead of the v-slot directive as the following example:
<v-chip
v-for="header in headers"
:key="header.value"
:slot="`item.${header.value}`"
slot-scope="{item}"
>
{{ item[header.value] }}
</v-chip>
note that you should replace teh value key that I'm using with the identifier key of each column object in your code.
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>
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>
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.