Comments (12)
I think this might be caused by the spaces in the other column names. Try using an underscore or camel casing instead.
from vue-tables.
@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?
from vue-tables.
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.
from vue-tables.
Alternatively, you can iterate over the returned data and replace the keys on the client side before assigning the data to the table.
from vue-tables.
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?
from vue-tables.
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.
from vue-tables.
@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?
from vue-tables.
You can ask here
from vue-tables.
'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)
from vue-tables.
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.
from vue-tables.
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'],
from vue-tables.
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.
from vue-tables.
Related Issues (20)
- How to disable pagination component HOT 1
- Is there a way to freeze columns and make other columns scrollable? HOT 1
- Is there a way to center specific columns HOT 1
- click event on rows
- server side implementation HOT 1
- Q: Custom columns should not be show if not defined in columns attribute? HOT 1
- Laravel Implementation HOT 1
- Feature request - Column grouping
- Q : "pagination-info-template" no has data๏ผ HOT 1
- Use if-else to prevent data.json error
- Date format from server HOT 2
- Pagination from server HOT 1
- Unknown custom element: <v-server-table> - did you register the component correctly? HOT 4
- dateformate and server table HOT 1
- [Question] How to display a row index/running number column?
- V-Server-Table (vuetables2) HOT 1
- Display json filte HOT 1
- How to implemen server-side in Lumen? HOT 2
- DateRangepicker not showing HOT 1
- Missing ref owner context HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-tables.