How to format Vuetify data table date column?
You should use a custom row cell
:
<v-data-table :headers="headers" :items="logs">
<template v-slot:item.createdOn="{ item }">
<span>{{ new Date(item.createdOn).toLocaleString() }}</span>
</template>
</v-data-table>
I found out a way to format cell values using dynamic slot names and a function in the header object:
In the <v-data-table>
I did:
<template v-for="header in headers.filter((header) => header.hasOwnProperty('formatter'))" v-slot:[`item.${header.value}`]="{ header, value }">
{{ header.formatter(value) }}
</template>
and in the vue data
property I did:
headers: [
...
{ text: 'Value for example', value: '10000', formatter: formatCurrency },
...
]
And finally in the methods
prop I did:
formatCurrency (value) {
return '$' + value / 100
},
Here's a sandbox to see it in action: https://codesandbox.io/s/vuetify-datatable-value-formatter-jdtxj
EDIT:
In this specific case you could use momentjs
or javascript's Date()