Cannot sort date column in Vuesax data table

Question

I need to apply a toggle sort on a datetime column in Vuesax data table I'm using. The toggle sort works on all other columns, except for the datetime column. My code is as follows (I've only written code relevant to the question, please assume the users data is loaded correctly):

<template>
    <div>
        <vs-table search :data="users">
            <template slot="thead">
                <vs-th sort-key="name">
                    Full Name
                </vs-th>
                <vs-th sort-key="email">
                    Email
                </vs-th>
                <vs-th sort-key="last_login">
                    Last Logged-in
                </vs-th>
            </template>

            <template slot-scope="{data}">
                <vs-tr 
                    :key='index'
                    v-for='(user, index) in data'
                >
                    <vs-td :data="user.name">
                        {{user.name}}
                    </vs-td>
                    <vs-td :data="user.email">
                        {{user.email}}
                    </vs-td>
                    <vs-td :data="formattedDateTime(user.last_login)">
                        {{formattedDateTime(user.last_login)}}
                    </vs-td>
                </vs-tr>
            </template>
        </vs-table>
    </div>
</template>

<script>
import moment from 'moment'
        
export default {
    methods: {
        formattedDateTime(dateTime) {
            return dateTime ? moment(String(dateTime)).format('DD/MM/YYYY hh:mm A') : "N/A";
        }
    }
}
</script>

I welcome all suggestions, but my guess is Vuesax is not being able to detect the column data type; if there was a way in which I could enforce the data type for the datetime column, that might fix the issue.

score 0 · Answer 1 · answered Jun 24 '22 at 18:13

Vuesax has some problems with that.

But you can fix it, when add a computed prop, that gives Vuesax the exact Array you need

computed: {
   usersTable() {
     return this.users.map(user => ({
       name: user.name,
       email: user.email,
       last_login: this.formattedDateTime(user.last_login)
     }))
   }
}

Your vs-table will have

:data="usersTable"

And your vs-td for the date will be simply:

<vs-td :data="user.last_login">
  {{user.last_login}}
</vs-td>

PS: You sould give moment js for the reading of the date a format like

moment(String(dateTime), "YYYY-MM/DD hh:mm")

moment.js should not be used anymore, see : https://momentjs.com/docs/#/-project-status/ — Lk77, Jun 29 '22 at 14:20

Cannot sort date column in Vuesax data table

1 Answers1