Adding checkboxes to vuetable rows

[mozami]

I would like to add a checkbox on the left of each row, allowing the user to select multiple rows at a time, similar to this.

I am aware of the actions buttons generated via the __action field - that is a great feature, and I suppose one could use them to somehow select the rows on a click event. However, the UI for those is a button tag and I would prefer to have a regular column of checkboxes (in addition the to the buttons as well).
Is it possible to add something like this to vuetable?

[ratiw]

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

[midium]

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.

[mozami]

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

[mozami]

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

[midium]

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

[ratiw]

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

[midium]

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

[ratiw]

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

[midium]

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

[ratiw]

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

[midium]

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.

[ratiw]

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

[midium]

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.

[mozami]

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

[ratiw]

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

[mozami]

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