Loading label/icon during table computation about vue-table HOT 17 CLOSED

👍 @ratiw

from vue-table.

You can do that yourself by listening to vuetable:loading and vuetable:loaded events.

vuetable:loading event occurs just before vuetable requests data from the server. And when there is a response back from the server (whether success for failure), the vuetable:loaded event will occur.

This is done automatically in Semantic UI using loader, but Bootstrap does not come with that functionality. So, you may try to implement that using CSS or available third party library by calling trigger function inside those events to toggle the loading animation.

from vue-table.

@ratiw thaks for the hint, that works like a charm !

from vue-table.

@ratiw Anyway was thinking, wouldn't it be possible to implement a default loader inside the component quite like you do for the pagination component of the table? I mean this is just a thought and could be useful for those who are using bootstrap and don't know how to generate them-self a loader.

from vue-table.

@midium Well, I really think that the loader is kind of personal preference on styling. That's why I make vuetable open to that via events. But it'll be nice if there are more people asking for it and you could help by sharing it to them. :)

from vue-table.

I was wondering about this myself, and I agree with @midium that the loader should be part of the component. However as @ratiw has pointed out, it is definitely a personal preference on how you want to present it - so from that point of view, it should preferably be kept outside of the component.

Perhaps a simple loader setup example can be part of the documentation wiki and users could just copy/modify based on the example? I haven't set up one yet, but when I do, I can share it in the docs or bootstrap example if @ratiw is interested?

from vue-table.

@mozami Yes, definitely. I only see benefits from sharing. It helps everyone! :)

from vue-table.

@ratiw OK - I will share it as part of the wiki docs and/or you can also include it in the bootstrap demo.

from vue-table.

I agree that at least an example on the wiki would be great

from vue-table.

👍

from vue-table.

Hi @ratiw, how do I submit to the wiki?
I have forked your bootstrap demo and can add a loader to it then you can check it out.

from vue-table.

@mozami I believe you could clone the wiki, update it, and send pull request.

https://github.com/ratiw/vue-table.wiki.git

from vue-table.

👍 Thanks! I'll do so this afternoon

from vue-table.

@midium i've uploaded a simple of loader using the 'loading' css class that displays a loading message when the load commences. You can view it here: loader demo / index.html source code

@ratiw i have put together a small doc for the wiki on loader setup with some examples, but seems like the wiki is for the repo collaborators only. Let me know how else i should post it?

from vue-table.

@mozami Thanks a lot. I'll check it out later tonight.

For the wiki, I thought it was just another repo that people can share. Sorry for that.
I've just add you as a collaborator, can you please try again?

from vue-table.

@ratiw Done. Please check / edit anything as necessary:
https://github.com/ratiw/vue-table/wiki/Loading-Animation

from vue-table.

@mozami Perfect! :)

from vue-table.