I'm trying to add the default functionality for sorting information inside a Data table from Vuetify, but I couldn't make it appear.
Code Sandbox with some comments : https://codesandbox.io/s/vuetify-2-forked-wfhe9?file=/src/App.vue
<template>
<v-app>
<div>
<v-data-table
:headers="headers"
:items="data"
class="elevation-1 mt-4"
:items-per-page="5"
hide-default-header
>
<template v-slot:header="{ header }">
<thead>
<tr>
<th
v-for="(h, index) in headers"
class="text-subtitle-2"
style="border-bottom: 2px solid #bdc6d8"
:key="index"
>
<v-tooltip bottom :key="h.value">
<template v-slot:activator="{ sort }">
<span v-on="sort">{{ h.text }}</span>
</template>
</v-tooltip>
</th>
</tr>
</thead>
</template>
<template #item="{ item }">
<tr>
<td style="border: 0; height: 70px">
{{ item.name }}
</td>
<td style="border: 0; height: 70px">
{{ item.date }}
</td>
<td style="border: 0; height: 70px">
{{ item.quantity }}
</td>
<td style="border: 0; height: 70px">
{{ item.expirationDate }}
</td>
</tr>
</template>
</v-data-table>
</div>
</v-app>
</template>
<script>
export default {
data() {
return {
headers: [
{
text: "Name",
align: "start",
value: "name",
},
{
text: "Date",
align: "start",
value: "date",
},
{
text: "Quantity",
align: "start",
value: "quantity",
},
{
text: "Expiration",
align: "start",
value: "expirationDate",
},
],
currentProds: [
{
name: "Proc 1",
date: "01/01/01",
quantity: 123,
expirationDate: "01/02/02",
},
{
name: "Proc 1",
date: "01/01/01",
quantity: 123,
expirationDate: "01/02/02",
},
{
name: "Proc 1",
date: "01/01/01",
quantity: 123,
expirationDate: "01/02/02",
},
{
name: "Proc 1",
date: "01/01/01",
quantity: 123,
expirationDate: "01/02/02",
},
{
name: "Proc 1",
date: "01/01/01",
quantity: 123,
expirationDate: "01/02/02",
},
],
};
},
};
</script>
<style>
</style>
Searching google I found code that apparently works but only in previous versions (i'm using the last one)
Why i'm doing the header again? Designer asked for a different border bottom so trying to do this I made the thead again using the slot.
I dont want to add a custom sort, just the default one.
Is there a way to do this in 2.4.3 verison of Vuetify?
I like this example from docs, also pay attention to dataSort function, for correct sorting implementation:
const dataSort = ((a, b) => a.split('/').reverse().join('/') <= b.split('/').reverse().join('/') ? -1: 1)
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
currentProds: [
{
name: "Proc 1",
date: "07/01/01",
quantity: 3,
expirationDate: "07/02/02",
},
{
name: "Proc 2",
date: "02/01/01",
quantity: 2,
expirationDate: "02/02/03",
},
{
name: "Proc 3",
date: "01/01/01",
quantity: 1,
expirationDate: "01/02/01",
},
{
name: "Proc 4",
date: "01/01/01",
quantity: 5,
expirationDate: "01/02/02",
},
{
name: "Proc 5",
date: "01/01/01",
quantity: 4,
expirationDate: "01/02/02",
},
],
}
},
computed: {
headers () {
return [
{
text: 'Name',
align: 'start',
value: 'name',
},
{
text: 'Date',
value: 'date',
sort: dataSort // <----- important!
},
{
text: 'Quantity',
value: 'quantity',
},
{
text: 'Expiration Date',
value: 'expirationDate',
sort: dataSort, // <----- important!
},
]
},
},
})<head>
<meta charset="UTF-8">
<title>CodePen - Vuetify Calendar Event Drag'n'Drop</title>
<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js'></script>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Material+Icons'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css'>
<style>
.theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:not(:last-child)>td:last-child,
.theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:not(:last-child)>td:not(.v-data-table__mobile-row),
.theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:not(:last-child)>th:last-child,
.theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:not(:last-child)>th:not(.v-data-table__mobile-row),
.theme--light.v-data-table>.v-data-table__wrapper>table>thead>tr:last-child>th
{
border-bottom: 0
}
.theme--light.v-data-table>.v-data-table__wrapper>table>thead>tr:last-child>th {
border-bottom: 2px solid #bdc6d8;
}
</style>
</head>
<body>
<div id="app">
<v-app id="inspire">
<div>
<v-data-table
:headers="headers"
:items="currentProds"
item-key="name"
>
</v-data-table>
</div>
</v-app>
</div>
</body>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句