How to Format Vuetify Data Table Date Column

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>

Change format of date in vuetify's data-table

You can custom row template

<template>
  <v-data-table
    :headers="headers"
    :items="results"
    class="elevation-1"
  >
    <template v-slot:item.STRT_D="{ item }">
      {{ formatDate(item.STRT_D) }}
    </template>
  </v-data-table>
</template>

Here I format date with a methods, you can create a Vue filter instead

methods: {
  formatDate(value) {
      return moment(value).format("MMMM DD YYYY")
  }
}

Change Vuetify format date in td to spesific format

you can use https://momentjs.com/

moment(form.registration_date).format('DD/MM/YYYY h:mm:ss')

To use the moment.js

npm install moment --save

after installing import it to the vue file that want to integrate.

like this:
import moment from 'moment'

vuetify datatable format column with dynamic item-slot

The key you are trying to use to get the current loop value doesn't exist in the new created object. That's why you would be getting the error. You should try evaluating if that key exist in that object before using the .join(', ') method.

Try replacing line codesandbox DataTable.vue line 50:

  <span :key="itm" class="red--text">{{ item[itm] }}</span>

with:

  <span :key="itm" class="red--text">{{ itm in item ? item[itm].join(", ") : ""}}</span>

How to use Vuetify's data tables with custom date sort without breaking the grouping

I now solved it with a workaround by setting the sort property of the table header to be sorted. It was rather tricky to find this, so in case anyone else runs into this issue, check out the table header example of the v-data-table API.

I used that to specify a separate sort function just for this table header like this:

customSort (a, b) {
  return moment(a, this.tableDateFormat).toDate() - moment(b, this.tableDateFormat).toDate()
},

Will work with plain JavaScript dates aswell, but we are using moment for the rest of our project, too.

How to change text and color of a column value inside a v-data-table based on a condition with Vue.js 2.6.11 and Viutify 2.2.11

Using the item.state slot you can achieve this:

<template v-slot:item.state="{ item }">
{{item.state? ... : ...}}
</template>

---

Related Topics