Is templated Column sortable ?

[segrea]

Hi,

First of all, thanks for your great effort to give us an easy to use vue.js featured enought grid.
I have a problem using templated column bound to a Date property.
It seems that the sort option does not works.

Here's the sample of html code :
<datatable id="data-table-main" :source="quartzJobs.rows" :striped="quartzJobs.striped" :editable="quartzJobs.editable" :line-numbers="quartzJobs.lineNumbers"> <datatable-column id="sel" label="sel" width="3.25em" class="checkable-column" :sortable="false" :groupable="false" data-intro="Use custom cell tamplates to put your own content in cells" :data-step="9"> <checkbox id="sel-all" v-model="selectAll"></checkbox> </datatable-column> <datatable-column id="Name" label="Name" width="" :sortable="true" :groupable="true"></datatable-column> <datatable-column id="Description" label="Description" width="50em" :sortable="true" :groupable="true"></datatable-column> <datatable-column id="Category" label="Category" width="" :sortable="true" :groupable="true"></datatable-column> <datatable-column id="HostName" label="HostName" width="" :sortable="true" :groupable="true"></datatable-column> <datatable-column id="NextRunDate" label="Next Run Date" width="9em" :sortable="true" :groupable="true"></datatable-column> <datatable-column id="jobDuration" label="Duration" width="7em" :sortable="true" :groupable="false" data-intro="Use custom cell tamplates to put your own content in cells"></datatable-column> <template slot="NextRunDate" scope="cell"> {{cell.row.NextRunDateString}} </template> <template slot="jobDuration" scope="cell"> {{getLastRunDurationString(cell.row.JobId)}} </template> <template slot="sel" scope="cell"> <div class="checkable-column"> <checkbox :id="cell.row.JobId.toString()" :value="cell.row" v-model="quartzJobs.selected"></checkbox> </div> </template> </datatable>

And here's the Vue object declaration in my js file :
new Vue({ el: "#datatables", data: function () { return { quartzJobs: quartzJobs, currencies: currencies, aggregators: aggregators, dateFormats: [ "DD/MM/YYYY", "DD MMM YYYY", "D MMMM YYYY", "D/MM/YYYY h:mm a" ], formatters: [ { id: "C", name: "Currency" }, { id: "DT", name: "Date and Time" } ] }; }, computed: { selectAll: { get: function () { return quartzJobs.selected.length == customers.rows.length; }, set: function (value) { quartzJobs.selected = value ? customers.rows : []; } } }, methods: { getLastRunDurationString: function (jobId) { var qzJob = $linq(quartzJobs.rows).where("item => item.JobId == " + jobId + "").singleOrDefault(); if (qzJob.Triggers.length > 0) { var lastExecutedTriger = $linq(qzJob.Triggers).orderByDescending(function (trig) { return trig.PreviousRunTime }).first(); var lastRunBeginTime = moment(lastExecutedTriger.LastRunBeginTime); var lastRunEndTime = moment(lastExecutedTriger.LastRunEndTime); if (lastRunBeginTime < lastRunEndTime) { var duration = moment.duration(lastRunEndTime.diff(lastRunBeginTime)); return duration.format("HH:mm:ss.S", { trim: false }); } else { return "N/A"; } } else { return "N/A"; } } }, filters: { // filter that allow to get a formatted string corresponding to the specified date formatDate: function (value) { if (typeof value !== 'undefined') { return value == "" ? "N/A" : formatters.datetime(value, "DD/MM/YYYY HH:mm"); //return moment(value).utc().format(); //return moment(String(value)).format('DD/MM/YYYY HH:mm');//'DD/MM/YYYY HH:mm' } } }, });

The sortable option does not work on the 2 templated column.

Am I doing something wrong ?

Thanks in advance.

Regards,
Antoine.