Make datetime column sortable in Vue Tables 2

Question

I have a custom component that is using the v-client-table method from the Vue Tables 2. The table has two columns, one of which is a datetime column (format: MM/DD/YYYY h:mm A). I have it as sortable, but it doesn't sort accurately based on the time. The output of that appears like this:

As you can see, it goes from 12:09 PM to 12:30 AM. Unfortunately, this date/time format is required.

Question: is there a way to incorporate momentjs into the configuration to make this properly sort (without using a filter as it shows in the client-side-sorting documentation)?

Below is the data and options:

export const content = {
    state: {
        columns: ['callDateTime', 'explanation'],
        tableData: [
            { callDateTime: '10/13/2017 10:09 AM', explanation: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." },
            { callDateTime: '10/13/2017 12:30 AM', explanation: "Lorem ipsum dolor" },
            { callDateTime: '10/13/2017 12:09 PM', explanation: "Lorem ipsum dolor sit amet },
            { callDateTime: '10/13/2017 1:15 PM', explanation: "Ut a fringilla mauris" },
            { callDateTime: '10/13/2017 1:30 PM', explanation: "Lorem ipsum dolor" }
        ],
        options: {
            headings: {
                'callDateTime': 'Call Date/Time',
                'explanation': 'Interaction Notes',
            },
            filterable: 'false',
            sortable: 'callDateTime',                           
            orderBy: { column: 'callDateTime' },
            pagination: {
                edge: false,
                dropdown: false,
                chunk: 1
            },
            sortIcon: {
                down: 'arrow arrow-down',
                up: 'arrow arrow-up'
            },
            perPage: '10',
            texts: {
                count: ''                                       
            }
        }
    }
}

cfnerd · Accepted Answer · 2018-06-19 15:08:03Z

3

Use can use customSorting for this

customSorting: {
    callDateTime: function (ascending) {
        return function (a, b) {
            let dateA = new Date(a.callDateTime);
            let dateB = new Date(b.callDateTime);

            if (ascending)
                return dateA >= dateB ? 1 : -1;

            return dateA <= dateB ? 1 : -1;
        }
    }
}

edited Jun 19, 2018 at 15:08

cfnerd

3,79912 gold badges36 silver badges45 bronze badges

answered Jun 19, 2018 at 1:14

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cfnerd Over a year ago

You were close. The a, b variables are actually objects, so you have to pass in the correct field to the new Date() function. I made an edit to your answer. Once the edit goes through, I will award you the answer. Thanks again!

ittus Over a year ago

No problem. Happy coding!

Collectives™ on Stack Overflow

Make datetime column sortable in Vue Tables 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related