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:

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>

hi @Boussadjra Brahim I get "2019-09-14T17:03:24.3949548" format now. I want to make it "2019-09-14 3:24 AM". Is there a way to do it like pipes in angular? — Kavin404, Sep 15 '19 at 14:22

score 81 · Accepted Answer · edited Dec 23 '20 at 17:19

81

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>

edited Dec 23 '20 at 17:19

Kael Watts-Deuchar

4,213
1
26
50

answered Sep 15 '19 at 14:24

Boussadjra Brahim

82,684
19
144
164

4

You may have a typo, I needed to use singular item.createdOn as the v-slot attribute, plural items.createdOn did not work. – Vox Dec 11 '19 at 18:10
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. – Mathias F Aug 14 '20 at 09:35
@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 – Boussadjra Brahim Aug 14 '20 at 10:48
1

This answer could be updated to avoid the "'v-slot' directive doesn't support any modifier" error by changing ` – Beder Acosta Borges Aug 08 '21 at 08:44
thank you for your comment, it could be updated to what? – Boussadjra Brahim Aug 08 '21 at 08:46
To ` – Beder Acosta Borges Aug 08 '21 at 08:49
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 Aug 08 '21 at 08:53
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}"` – Boussadjra Brahim Aug 08 '21 at 08:56

SneakyLenny · Answer 2 · 2022-12-01T14:15:28.220

20

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).toFixed(2);
}

Here's a sandbox to see it in action: https://codesandbox.io/s/vuetify-datatable-value-formatter-jdtxj?file=/src/App.vue

EDIT:

In this specific case you could use momentjs or javascript's Date(). I've added a momentjs example to the codesandbox.

edited Dec 01 '22 at 14:15

answered Jan 26 '21 at 15:27

SneakyLenny

428
4
12

1

Yes - great work @SneakyLenny! Saved me like 2 hrs. Got this to work for a more generic "customize every column" approach: ` ` – Richard Strickland May 13 '21 at 10:17
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? – niko Aug 25 '21 at 10:13
@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. – SneakyLenny Aug 25 '21 at 13:26
This is also useful to create – specimen Apr 13 '23 at 08:57

score 0 · Answer 3 · answered May 27 '21 at 22:18

0

I have also used global filter with v-slot:

<v-data-table :headers="headers" :items="logs">
  <template v-slot:item.createdOn="{ item }">
    <span>{{ item.createdOn | myGlobalDateFilter }}</span>
  </template>
</v-data-table>

answered May 27 '21 at 22:18

jcons

1

Okan Sari · Answer 4 · 2021-06-30T20:46:20.127

In datatable component Datatable.vue

<template v-for="slot in slots" v-slot:[`item.${slot.slotName}`]="{ item }">
  <slot :name="slot.slotName" :variable="item"></slot>
</template>

export default {
props:
slots:{
  type:Array,
  default:null
},

and parent component

<Datatable
 :headers="headers"
  :items="stokhareketleri"
  :title="title"
  :slots="slots">
<template v-slot:column_name="{ variable }">
  <v-chip
        color="green"
        dark
      >
      {{variable.column_name}}
      </v-chip>
</template>
  </Datatable>


data () {
      return {
        slots:[{ 
          Id: 1, slotName: 'column_name'
          }],

score 0 · Answer 5 · answered Oct 19 '21 at 07:37

If you want an even simpler solution or at least one where you can format other columns as well:

<v-data-table :headers="headers" :items="logs">
  <template v-slot:body="{ items }">
    <tbody>
      <tr v-for="item in items" :key="logs.id">
        <td> {{ new Date(item.createdOn).toLocaleString() }} </td>
        ...
      </tr>
    </tbody>
  </template>
</v-data-table>

The trick is using the body slot of v-data-table. More information here.

How to format Vuetify data table date column?

5 Answers5

EDIT:

Linked