Adding checkboxes to vuetable rows about vue-table HOT 16 CLOSED

@mozami Yes, it is possible. That's one of features, I will look into next together with row number. Both will be part of SpecialFields (begins with double underscore __).

Row number is pretty easy, but for the checkbox, it would require a taggle state for each row, which is not part of the requested data. This would introduce some complications but will certainly look into it.

from vue-table.

This would be really a great addition. One thing anyway about the buttons on the action column. How can I set extra details like title or data elements? I've tried adding extra elements to the buttons definition but didn't worked.

from vue-table.

@ratiw, Great! I was initially thinking of just having the checkbox implemented in a similar manner to the current __action buttons i.e:

<button class="{{ action.class }}" @click="callAction(action.name, item)">
    <i class="{{ action.icon }}"></i> {{ action.label }}
</button>

That way, the user can handle keeping track of the "checked" status array or what do do once checkbox is ticked in the event handler. It would be awesome if the component could track the checkbox states, making it easier for users to just access the variable without setting up event handlers etc.

Im curious, what is the "row number" special field for? Displaying the rows?

from vue-table.

@midium, I don't see a way to add additional attributes to the __action buttons as it stands. See the <template> layout for the button in my previous comment. This is what is currently available for each action button. Obviously, @ratiw would know more about this and able to confirm.

from vue-table.

@mozami if the button template is the one you shared then it seems there is no way to add extra details like for example the 'title' element in order to have some tooltip when moving over the button.
Maybe without having to add to many specific properties it should help having something like a "custom" or "extra" property where user can specify further attributes to the button for example like this:

{ name: 'delete-item', label: '', icon: 'icon-Bin', class: 'btn btn-xs', extras: 'data-toggle="tooltip" title="Example tooltip" ' }

and the template should change like this:

<button class="{{ action.class }}" @click="callAction(action.name, item)" {{ action.extras }} >
    <i class="{{ action.icon }}"></i> {{ action.label }}
</button>

This is just an idea but will allow user to add further customization to the actions elements.

from vue-table.

@mozami I see your point. But the {{ }} delimiter is not gonna work alone outside attribute like that.

But I'll see what I can do since the data attributes are still widely use in css frameworks.

from vue-table.

@ratiw Yeah, I was trying to play around myself on such solution but as you spotted the {{ }} not works alone as I've proposed.
Unfortunately I can't help that much since it is just a couple of weeks I've started using Vue and so I am still not an expert.
Hope you can find a solution.

from vue-table.

@mozami I've written a directive to generate those attributes successfully. Unfortunately, initial test has shown that it doesn't work well with Bootstrap. I've tested with Tooltip and it does not work as expected.
I think it is because the attributes are not present when its javascript has processed the DOM.
The only way that I can get it to work is to run the $('[data-toggle="tooltip"]').tooltip() in the console.

from vue-table.

Maybe bootstrap users should use the loaded event of the component to trigger the tooltip, what you think?

from vue-table.

@midium Done that, doesn't work. I actually had tried hooking into Vue life-cycle hook, still doesn't work. That's why I came to the earlier conclusion. But the normal behavior of title attribute still work though.

from vue-table.

I've tried it myself hard coding the attributes as an example and it seems that the loaded event is raised before the table is actually rendered, I've put a breakpoint in the dev tools of chrome when I was calling the bootstrap javascript command and at that moment the table is still not visible on the page.

Maybe it would worth (if it is possible) to add another event "table rendered" raised when the table is actually rendered and try to see if calling the command at that moment make the trick.

from vue-table.

@midium Nope. Already tried that! I'm quite sure that the reactivity of Vue is one of the reason. I'm also don't know enough about this.

from vue-table.

Ok, anyway I would still add the possibility to create other attributes as maybe someone can then create personalized tooltips with css or stuff like that, thanks for your efforts.

from vue-table.

+1 for ability to be able to add extra attributes, that would be very handy etc.

@midium I am curious, how do you intend to add tooltips to the table data, the tooltip title would have to be static text (i.e. the same tooltip for all items in that column and not from the api url) since the api url is already bound to the table columns.

Also, just to remind @ratiw, the checkboxes would be nice... whenever you get an opportunity to look into it.

from vue-table.

@mozami @midium version 1.0.12 has been published. Please see release info.

from vue-table.

@ratiw Thank you Sir! Some great features. Ive tested out the __sequence and __checkbox.
Looking good! 👍

from vue-table.