Table sorted date not correct

Question

Expected: I'll get a datetime string from an API returned. This value "2019-08-15T15:58:14.597Z" should be displayed in a table as `DD-MM-YYYY HH:MM. Vuetify comes with a data table component, that can sort the data ascending and descending. I also want to use this functionality for the date, to make it sort ascending and descending.

Short question: The date from the API should be saved and displayed in another "style" in the table, but the sort-functionality uses the real date object.

My current code:

<template>
    <v-content class="mt-12 ml-12">
        <h1 class="font-weight-black display-3">Servers</h1>

        <v-data-table
            class="elevation-1"
            :headers="headers"
            :items="columns"
            :items-per-page="15"
        >
        </v-data-table>

        <ul id="example-1">
            <li v-for="(data, index) in columns.data" :key="index">
                {{ data.attributes }}
            </li>
        </ul>
    </v-content>
</template>

<script>
import instances from '../services/instances';

export default {
  data() {
    return {
      columns: [],
      headers: [
        { text: 'Server Name', value: 'attributes.name' },
        { text: 'Spieler', value: 'attributes.playerCount' },
        { text: 'Avg. FPS', value: 'attributes.details.rust_fps_avg' },
        { text: 'Wiped', value: 'attributes.details.rust_last_wipe' },
      ],
    };
  },
  async created() {
    const { data } = await instances.createInstance();
    this.columns = data.data;
    this.columns.forEach((entry) => {
      const { players, maxPlayers } = entry.attributes;
      entry.attributes.playerCount = `${players} / ${maxPlayers}`;
      const { rust_last_wipe } = entry.attributes.details;
      const mmmm = new Date(entry.attributes.details.rust_last_wipe);
      entry.attributes.details.rust_last_wipe = `${mmmm.getDate()}.${mmmm.getMonth() + 1}.${mmmm.getFullYear()}`;
    });
    console.log(this.columns);
  },
};
</script>

Answer 1

In this documentation there is a way to customize the columns content

Based on it we can do:

<template>
  <v-content class="mt-12 ml-12">
    <h1 class="font-weight-black display-3">Servers</h1>

    <v-data-table
      class="elevation-1"
      :headers="headers"
      :items="columns"
      :items-per-page="15"
    >
      <template v-slot:item.attributes.details.rust_last_wipe="{ item }">
        <span>{{ item.attributes.details.rust_last_wipe_formatted }}</span>
      </template>
    </v-data-table>

    <ul id="example-1">
      <li v-for="(data, index) in columns.data" :key="index">
        {{ data.attributes }}
      </li>
    </ul>
  </v-content>
</template>

<script>
import instances from '../services/instances'

export default {
  data() {
    return {
      columns: [],
      headers: [
        { text: 'Server Name', value: 'attributes.name' },
        { text: 'Spieler', value: 'attributes.playerCount' },
        { text: 'Avg. FPS', value: 'attributes.details.rust_fps_avg' },
        { text: 'Wiped', value: 'attributes.details.rust_last_wipe' }
      ]
    }
  },
  async created() {
    const { data } = await instances.createInstance()
    this.columns = data.data
    this.columns.forEach(entry => {
      const { players, maxPlayers } = entry.attributes
      entry.attributes.playerCount = `${players} / ${maxPlayers}`
      const { rust_last_wipe } = entry.attributes.details
      const mmmm = new Date(entry.attributes.details.rust_last_wipe)
      entry.attributes.details.rust_last_wipe_formatted = `${mmmm.getDate()}.${mmmm.getMonth() + 1}.${mmmm.getFullYear()}`
    })
    console.log(this.columns)
  }
}
</script>