CODEWITHSUNDEEP
vue.jsvuesaxvue-data-tables
moin205
moin205

Reputation: 19

Cannot sort date column in Vuesax data table

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.

Upvotes: 0

Views: 257

Answers (1)

Mika Steyer
Mika Steyer

Reputation: 26

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")

Upvotes: 0

Related Questions