Comments (13)
Just v-if the entire component and show a loader instead
from vue-materialize-datatable.
Just v-if the entire component and show a loader instead
This method solves problem just partially.
I have multiple tables on one page, each of them loading data from different sources.
So, I want to quickly show users all different tables (title, columns, etc.)
Thats why I want to render all static data at once, and then show loading indicator inside table while data is fetching.
I have a few thoughts. We can impliment one more slot like this.
In the component source:
<tbody>
...
<slot name="body-center">
</slot>
</tbody>
And in the app:
<td slot="body-center" colspan="20" align="center">
*some loading indicator*
</td>
I can make a PR for that if you think it's OK this way.
from vue-materialize-datatable.
@MicroDroid I've implemented this in my project and it works like a charm with simple spinner
from vue-materialize-datatable.
I actually don't like the approach of having this slot, it's very prone to bugs. Aside from that, loading tables incrementally can cause page vertical scroll to go haywire, no?
from vue-materialize-datatable.
Thats right, but If we know initial amount of rows we can use skeleton loading for example with fixed height, so overall height of content will not change after data is loaded.
from vue-materialize-datatable.
wooo
I actually like that approach, I should do this everywhere in my websites, too. 🤔
Thanks for the heads up, and I'd also appreciate any PRs to this library to support such kind of a thing, but I'd rather try stay away from a slot like that cause it can turn things into haywire. Currently, the library is aware of the number of items per page, perhaps one could add a loading
prop and it should do exactly that, just maybe. 🙄
from vue-materialize-datatable.
So, just to clarify, we can:
- Add this skeleton loading component as a dependency/make different skeleton loading inside rows just for the vue-materialize-datatable
- Add
loading
prop which, if setted totrue
, fires up skeleton loading while table data is empty for every<td>
content
Right?
from vue-materialize-datatable.
Yeah exactly. I'm not sure how far flexible is this plugin is, but if we can get the skeleton to look highly similar to what the table displays, then we can use it and no need to reinvent the wheel. Otherwise we may opt for an in-house solution.
But in general yeah, that should be just about right.
from vue-materialize-datatable.
@MicroDroid problem appears - how we can differ in component no data at all (empty rows
) or data just being fetched (rows empty, but will be fullfilled)?
Maybe we can use some keyword, i.e. rows='loading'
while data is fetching will tell the component that it's awaiting data?
from vue-materialize-datatable.
from vue-materialize-datatable.
Sorry I was meaning that if loading
is false
and there are no rows then, well, there are no rows.
from vue-materialize-datatable.
@MicroDroid I'm agree with you.
Second problem is the situation, when fetched amount of rows is less than expected (less than defaultPerPage
), it will cause haywire. Of course in most cases amount of rows is more than defaultPerPage
, but will we be OK with this?
Or we can just let user to decide how many skeleton loading rows to show with :rowsLoading="5"
i.e.
And when its not setted get amount of loading rows from defaultPerPage
from vue-materialize-datatable.
No need to make an option for that, the developer that uses this library wouldn't be able to determine that either.
It should be same as defaultPerPage
and it's not the end of the world if it turns out to be less, it's what happens on any website on the internet that uses skeleton loading anyways.
from vue-materialize-datatable.
Related Issues (20)
- Error in render: "RangeError: invalid array length HOT 4
- Any template with this datatables? HOT 1
- Invalid prop: type check failed for prop "customButtons". Expected Function, got Array HOT 1
- Exported Excel has HTML tags HOT 3
- Browser Use HOT 1
- Using bootstrap HOT 4
- Change table current page HOT 2
- Date filter in column function call HOT 2
- Sortable on a th, td manually defined fields HOT 1
- Pagination, right and left arrows get darker and darker when you click them until you can't see the icons HOT 1
- Column searching, sorting Questions HOT 1
- [Feature] Adding entries HOT 3
- Sorting by Date time Strings HOT 3
- Exporting options for Cyrillic? HOT 4
- If Paginate set to false, printing raise an error : "TypeError: can't access property "remove", clonedTable.querySelector(...) is null"
- Can't Use The Data Table HOT 2
- Datatable Column Render function
- Export table with utf-8 format
- Compatibilidad con vue3 HOT 1
- Responsiveness HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-materialize-datatable.