Sorting works only for one column / Date about vue-tables

[matfish2]

I think this might be caused by the spaces in the other column names. Try using an underscore or camel casing instead.

[lukpep]

@matfish2 - it could be true. But right know my web API serves data in that way - with spaces in json params names. Is it possible to somehow workaround it without touching the backend?

[matfish2]

Well, I'm using vue's native orderBy filter, simply passing the variable, so I'm not sure if there is a workaround I can implement.
On your end, maybe you can pass some sort of flag that alerts the API to return "normalized" keys for this type of request.

[matfish2]

Alternatively, you can iterate over the returned data and replace the keys on the client side before assigning the data to the table.

[lukpep]

from http://stackoverflow.com/questions/33855393/javascript-object-keys-with-spaces

http://stackoverflow.com/a/33860675/4402261 <- maybe this small change in vue-tables can help?

[matfish2]

I tried replacing the dot notation with brackets as suggested, but my tests are failing.
You are welcome to experiment yourself and send a pull request if you worked it out.
relveant code: v-client-table.js line 17.

[lukpep]

@matfish2 it's my first ever approach to java script, to vue.js and to anything related to html / web aps - so I propably pass on that - not my level yet ;)
I've rebuilded my database - all fields now have underscores instead of spaces and it works fine.
Thank You :)

PS. I have some question about templates - should I ask it here or start new issue?

[matfish2]

You can ask here

[lukpep]

'Data': function(row) { var date = new Date(row['Data'].$date); return GetDateString(date); },

works fine. But when I try:
'Data':"{Data,$date}" a just get string {Data,$date} instead of time object (epoch style long digit)

[matfish2]

A. When a template is passed as a string, the curly brackets should contain one of the properties in the dataset. If no match is found the string returns as it is. Clearly {Data, $date} doesn't match any property. Anyway, since your column is an object, {Data.$date} won't work either, so a function is the way to go.

B. Dates should ideally be passed as moment objects, not strings. The toMomentFormat option allows you to pass a format matching the one in your dataset (say 'YYYY-MM-DD'), and converts any dates included in the dateColumns array to moment objects.

However, since it seems your date column is not a string, but rather an object, you should probably stick to the template function solution. Bear in mind though, that this column won't sort correctly.
The right way to do it is to pass moment objects (manually or using toMomentFormat), and specify the desired format for presentation using the dateFormat option.

[lukpep]

I added:
toMomentFormat: true, dateColumns: ['Data'], dateFormat: 'YYYY-MM-DD',

and i get:
build.js:59713 Uncaught ReferenceError: $ is not defined(anonymous function) @ build.js:59713module.exports @ build.js:59712(anonymous function) @ build.js:8420client.ready @ build.js:59203Vue._callHook @ build.js:16303ready @ build.js:17531on @ build.js:17328Vue.$emit @ build.js:17409Vue._callHook @ build.js:16306attach @ build.js:12032Fragment.callHook @ build.js:11911multiBefore @ build.js:11963insert @ build.js:12736update @ build.js:12719_update @ build.js:16405Watcher.run @ build.js:11483runBatcherQueue @ build.js:11211flushBatcherQueue @ build.js:11187nextTickHandler @ build.js:8642 backend.js:1 [vue-devtools] Ready. Detected Vue v1.0.21

• problematic line is: dateColumns: ['Data'],

[matfish2]

Date columns have a unique range filter using daterangepicker, which itself depends on jquery ($) and moment. If you wish to use this filter you need to import the dependencies.
Also toMomentFormat accepts a string - moment format - NOT a boolean.
dateFormat accepts the format you want to use to present the moment object.

If you don't want the unique filter you can omit the toMomentFormat and dateColumns options, and manually create the moment objects, iterating over the response (which is exactly what toMomentFormat does behind the scenes). Don't forget to import moment globally.