How to format Vuetify data table date column?

Question

I have a simple data table using Vuetify data table. One of the column is a createdOn (date time), I want to format it. How can I do it ?

This is what i get now:

<template>
   <v-layout>
      <v-data-table :headers="headers" :items="logs">
      </v-data-table>
   <v-layout>
</template>
<script>
      headers: [
        { text: "Time", value: "createdOn", dataType: "Date" },
        { text: "Event Source", value: "eventSourceName" },
        { text: "Event Details", value: "eventDetails" },
        { text: "User", value: "user" }
      ],
      items: [],
</script>

Solution 1

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>

Solution 2

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()

Comments

[Vox]

You may have a typo, I needed to use singular item.createdOn as the v-slot attribute, plural items.createdOn did not work.

[Mathias F]

For me there is an issue: If I pass '2020-07-01' it gets rendered as "1.7.2020, 02:00:00", which is most often not what you want. Javascript takes the given value as UTC and displays it with the offset of the user.

[Boussadjra Brahim]

@MathiasF i think the problem is with your locale, i answered the question with the given input 2019-09-14T17... i recommend to ask a new question with more details

[Richard Strickland]

Yes - great work @SneakyLenny! Saved me like 2 hrs. Got this to work for a more generic "customize every column" approach: ` <template v-for="header in headers" v-slot:[item.${header.value}]="{ header, value }" > {{ formatCell(value) }} </template> `

[Beder Acosta Borges]

This answer could be updated to avoid the "'v-slot' directive doesn't support any modifier" error by changing <template v-slot:item.createdOn="{ item }"> to <template v-slot:[`item.createdOn`]="{ item }">. See 'v-slot' directive doesn't support any modifier.

[Boussadjra Brahim]

thank you for your comment, it could be updated to what?

[Beder Acosta Borges]

To <template v-slot:[`item.createdOn`]="{ item }">.

[Boussadjra Brahim]

That called a dynamic slot, for example you could do v-slot:[someprop]="{}" knowing that someprop is a property defined in script or template that represent a string of a valid slot

[Boussadjra Brahim]

for some reason you want a dynamic timestamp based on a condition returned from a computed property myTimestamp(){return this.updated?'updatedOn':'createdOn'} then in template you could do v-slot:[myTimestamp]="{item}"

[niko]

can use still sort/filter on date columns irrespective of chosen format after that? i.e. does the table use the underlying Dates or the newly formatted strings for its internal sorting/filtering algorithm after that?

[SneakyLenny]

@niko Sorting is based on the data given, otherwise you could have formatted the data beforehand. Example: if the data would be 4 - 2 - 1 - 3 and a formatter would add random letters to the format the display is sorted as y1 - x2 - u3 - a4. If that makes sense.