How to edit the group-by headers of Vuetify <v-data-table> ?
I need to hide the cross and set a custom title.
<v-data-table
:headers="headers"
:items="items"
group-by="category"
></v-data-table>
You just need to override default group.header slot.
<v-data-table
:headers="headers"
:items="items"
group-by="category"
>
<template v-slot:group.header="{items, isOpen, toggle}">
<td :colspan="headers.length">
<v-icon #click="toggle">
{{ isOpen ? 'mdi-minus' : 'mdi-plus' }}
</v-icon>
<span>Your custom header w/o cross</span>
</td>
</template>
</v-data-table>
Check vuetify docs in Slots category to get full list of available props in this slot.
Related
There is an example: https://codepen.io/wildhart/pen/oroQpo
How can I make the icon change when expand/collapse node?
You can use a condition based on open prop:
<v-treeview :items="items" transition="true">
<template v-slot:prepend="{ item, open }">
<i v-if="item.children" aria-hidden="true" ...your classes & styles>
{{ open ? 'arrow_drop_up' : 'arrow_drop_down' }}
</i>
</template>
</v-treeview>
I'm trying to put a <v-menu> within the header slot of a <v-data-table>.
This menu would then show filter options (v-autocomplete) for that column.
When the menu is clicked, I can't click the autocomplete to show its items, because then the menu closes.
Is this not possible in Vuetify?
I've tried passing :close-on-click="false" and :close-on-content-click="false"
For example (CodePen):
<v-data-table :items="desserts" :headers="headers">
<template #[`header.calories`]>
<v-menu top>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on"><v-icon>filter</v-icon></v-btn>
</template>
<v-autocomplete class="black" :items="headers" />
</v-menu>
</template>
</v-data-table>
You can use Event.stopPropagation(), it will prevents further propagation of the current event
Eg:
<v-autocomplete #click="clickOnAutocomplete" class="black" :items="headers" />
...
methods: {
clickOnAutocomplete(e) {
e.stopPropagation();
},
}
....
From vuetify'e example, the icon shows up at right side of each row.
But when I making my own, the arrow showed up at the left side, I havent figured out how to control its position.
My code is like following
<v-data-table
:headers="headers"
:items="inputs"
item-key="id"
disable-pagination
dense
show-expand
single-expand
hide-default-footer
>
<template v-slot:[`item.value`]="{ item }">
<v-progress-linear
height="22"
></v-progress-linear
>
</template>
<template v-slot:expanded-item="{headers, item}">
<td :colspan="headers.length">
<InputDetails
:input="item"
/>
</td>
</template>
</v-data-table>
Added one more header into header list did the magic. { text: '', value: 'data-table-expand' },
this is a pen : https://codepen.io/wbuc/pen/eYNyXGa
I’m using the v-edit-dialog in the data table to edit a cell inline but when I start typing in the dialog that opens up, it closes directly after the first key press. What am I missing here?
thank you for help!
<v-data-table
v-model="selected"
:headers="headers"
:items="accounts"
:single-select="singleSelect"
item-key="email"
show-select
class="elevation-3"
>
<template v-slot:item.email="props">
<v-edit-dialog
:return-value.sync="props.item.email"
#save="save"
#cancel="cancel"
#open="open"
#close="close"
>
{{ props.item.email }}
<template v-slot:input>
<v-text-field v-model="props.item.email" label="Edit" single-line counter></v-text-field>
</template>
</v-edit-dialog>
</template>
</v-data-table>
i sloved this problem by myself
<v-data-table
.....
item-key="email" <!--Delete this or item-key="id"-->
we can't set a key ,and use it on the v-text-field
So, I upgraded from vuetify 1.5 to latest (2.1xx) and get stuck on a few places.
I have a data-table where I want a "select all" checkbox in the header.
I added it with the "show-select" property and what I can see is that as the checkbox, when checked, actually puts all the items in the "selected" v-model.
My problem is that I want to have a template for item-props to customize the appearance of the rows and the checkbox that I bind to "props.selected" does not seem to work. If I check any checkbox on any row the item is not added to my "selected" v-model.
It is only if I use no template at all that I get it to work with the auto-generated checkboxes but this does not suffice for my current demands. In vuetify 1.5 I got it to work but I don't understand how to make it work in the new version.
<template>
<div>
<v-data-table
hide-default-footer
v-model="selected"
:sort-desc.sync="sortDescending"
:sort-by.sync="sortBy"
:headers="headers"
:items="cases"
item-key="id"
show-select
:items-per-page="itemsPerPage"
class="elevation-0">
<template v-slot:item="props">
<tr>
<td>
<v-checkbox v-model="props.selected" color="nordnetBlue" hide-details ></v-checkbox>
</td>
<td class="navigation-link" #click="goToCase(props.item)">{{ concatText( props.item.subject, 20) }}</td>
<td>{{ props.item.createdOn }}</td>
<td>{{ props.item.source }}</td>
<td>{{ !props.item.isSameQueue ? props.item.queueName : '' }}</td>
</tr>
</template>
</v-data-table>
<pre class="green--text">{{selected}}</pre>
</div>
</template>
I could not solve this so I followed a vuetify documentation example of how to customize the slot for each particular column.
So in my case, as you can see. three of the columns I just display the text as is and for two of them I do some modifying. So, I used a template for the two ones I wanted to edit.
Example:
template v-slot:item.Name="{ item }">
{{ item.Name }}
<v-tooltip bottom>
<template v-slot:activator="{on}">
<v-icon #click="openCustomer(item.Id)" class="clickable" small color="nordnetBlue" v-on="on">launch</v-icon>
</template>
Open in new window
</v-tooltip>
</template>