Sometimes, we want to format a Vuetify data table date column.

In this article, we’ll look at how to format a Vuetify data table date column.

How to format a Vuetify data table date column?

To format a Vuetify data table date column, we can populate the slot with the column that we want to format.

For instance, we write

<template>
  <v-data-table :headers="headers" :items="logs">
    <template v-slot:item.createdOn="{ item }">
      <span>{{ new Date(item.createdOn).toLocaleString() }}</span>
    </template>
  </v-data-table>
</template>

to add a v-data-tablewith theitem.createdOn` slot populated with custom content.

In it, we format the item.createdOn value into a human readable date string with toLocaleString after converting it into a Date instance with the Date constructor.

Conclusion

To format a Vuetify data table date column, we can populate the slot with the column that we want to format.