Access data from other field on callback about vue-table HOT 16 CLOSED

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.

from vue-table.

@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).

from vue-table.

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

from vue-table.

@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.

from vue-table.

@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.

from vue-table.

@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!

from vue-table.

@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. :)

from vue-table.

@mozami I'd love to be able to see a working example of how you ended up putting multiple data values in a single cell like 'Mr Fikile Banda' and 'Snyman Ltd' in the same table cell in your linked screenshot.

from vue-table.

@mozami , I'm needing something similar in that I need to display multiple field values from the result set I'm binding to into the same table cell. for example, if i return a record set of "students", one field will be "primary contact" so I want to display the primary contact name along with that primary contact's relation to the student in the same table cell, probably styling the contact name different from the contact's relation to the student.

Based on the conversations above, it sounds like I cannot achieve this out of the box with @ratiw's vue-table. @mozami I'd certainly be appreciative if you could show how you accomplished this.

Thanks.

from vue-table.

@clemsontiger You can either use __component or __slot option to do just that.

from vue-table.

awesome. got it, thanks!

from vue-table.

I'm getting an "Attribute ":row-index" is ignored on component component:name_nickname because the component is a fragment instance:" message. can't see what i'm doing wrong with the component:

<vuetable v-ref:vuetable
                    api-url="http://vuetable.ratiw.net/api/users"
                    pagination-path=""
                    :pagination-component="paginationComponent"   
                    pagination-info-no-data-template="The requested query return no result"
                    :fields="fields"
                    :sort-order="sortOrder"
                    :multi-sort="multiSort"
                    :per-page="perPage"
                    :append-params="moreParams"
                    pagination-info-template="{from} - {to} of {total} records"
                    table-class="table table__col--margin-padding table--allow-row-hover font-smaller"
                    wrapper-class="vuetable-wrapper"
                    table-wrapper=".vuetable-wrapper"
                    loading-class="loading"
                    row-class-callback="rowClassCB"
                    ascending-icon="glyphicon glyphicon-chevron-up"
                    descending-icon="glyphicon glyphicon-chevron-down"
                    ></vuetable>

Vue.component('name_nickname', {
        template: [
           '<a @click="itemAction(\'view-item\', rowData)">{{rowData.name}}</a><span class="subtle font-smaller"><br>{{rowData.nickname}}</span>'       
        ].join(''),
        props: {
            rowData: {
                type: Object,
                required: true
            }
        },
        methods: {
            itemAction: function(action, data) {              
               sweetAlert('custom-action: ' + action, data.name);
            }      
        }
    });

from vue-table.

nevermind, didn't have it wrapped in an empty div... vuejs/vue#2747 (comment) solved the issue

from vue-table.

Hi @clemsontiger

Sorry for the delayed response (I had stopped using vue.js for the project, so took me a while to dig up the code).

This was done with vue 1.x, so not sure if it would work for you, but here is how i had set it up back then: Gist

from vue-table.

@mozami, no problem. thanks for this, always helpful to see how others are working with things. Out of curiosity, what did you use instead of the vue table for the project?

from vue-table.

@clemsontiger I did not use anything else - I was hoping to migrate an existing legacy jquery app to vue. The original app used jquery datatables. However, it was decided to keep the existing app as is for now since we had a lot of custom js code.
Vue.js and vue-table are both excellent, and I am hoping I can eventually do the migration when it is feasible.

from vue-table.