Access data from other field on callback

WolfDan commented 8 years ago

Hi!

I'm getting the rows of the database in vue table, but I need to get the data from other row here an example:

{
                name: 'Breed',
                title: Vue.t('message.class'),
                callback: 'class',
                dataClass: 'text-center',
                titleClass: 'text-center',
}, {
                name: 'Sex',
                title: Vue.t('message.sex'),
                callback: 'sex',
                dataClass: 'text-center',
                titleClass: 'text-center',
}

This the code I have:

class: function(data) {
            return '<img src="/template/img/ladder/heads/' + data + '_1.png" width="30">'
        },

I need to do this:

class: function(data) {
            return '<img src="/template/img/ladder/heads/' + data + '_'+ Sex + '.png" width="30">'
        },

Thanks.

(Sorry I'm not native english speaker)

ratiw commented 8 years ago

@WolfDan First of all, I think you cannot use 'class' as the callback name in your code becuase class is the reserved keyword.

For your case, there is no way that you can access other column value in vuetable. This is by design and the only way (if you want to do that) is to fork vuetable and modify the callCallback function, but I wouldn't recommend it because you're breaking its usage scope.

The way you do is not really the appropriate way (as you are trying to go out of the scope of its usage) and usually this means there is an underlying problem in your design. I use to be in that situation before and in the long run you usually will have to come back and fix it later. But it wouldn't just stop there as it usually related to other parts of your application, so you will finally end up having a lot of headache.

What you are trying to do seem to be using various columns to determine the avatar or image of the given record. Based on my experience, it is better to have a dedicated column for that and use some kind of uniquely auto-generated ID or UUID as the image name and you store that image name as another column in your table.

Or, if you still want to do it that way, you could return an additional calculated column in your result for usage on the client side. If you're using Laravel as the backend framework, you can define it as Accessor (see here).

WolfDan commented 8 years ago

Thanks, you're right, the accessor make this really easy, and thanks for correcting my bad practice of programming!

mozami commented 8 years ago

Just chiming in here - Im also using laravel, and needed to display multiple items per table cell, so I just ended up grouping the response data in a nested json structure which can then be parsed and formatted as needed on the client side to display in Vuetable. See screenshot: https://goo.gl/zEyrgd

@ratiw - what do you think of this approach? It works fine for me, though probably wont scale well if one has too many rows on the table.

ratiw commented 8 years ago

@WolfDan It's ok. There's actually nothing right or wrong here. But there are so many ways of doing things that we can explore.

ratiw commented 8 years ago

@mozami That looks really nice. I think your use case is pretty advance for vuetable in terms of trying to achieve what you've done here. :) Maybe you could share what you've done so that others can also learn from it.

I wouldn't worry much about scalability though as we use pagination to limit the number of records to return to the client side and the callbacks on the client side can handle the formatting. The Transformer on the server side should be able to handle tenth or hundredth of records with ease. But I'll be keeping an eye on N+1 query problem on thousandth of records though.

mozami commented 8 years ago

@ratiw Thanks for the feedback. I can share how it was done, though it was mostly based on having simple the callback functions from vuetable to format the output of content in the cells. I did this a couple of weeks ago and while its still work in progress, I can share how to create similar layout sometime later this week. Maybe we can put it as part of the vuetable demo?

By default, my table only displays 5 records at a time (and 25 max), so the pagination certainly helps!

ratiw commented 8 years ago

@mozami Of course, you can offer your sharing at the time you're free and as much as you see fit that does not affect your work. It's very interesting to see how others have come up with the way to utilize vuetable for there works. And if you do have you own blog, I can link to that for a proper credit for you contributions. :)