Dear Dojo Community,
If we have huge data and we want to display pagination instead of vertical scroll in table component. I didn't see any pagination option in layout for table component. Please guide me, how we can apply the same.
Looking something below
Thanks
Hi Vikas,
We opted to go for an infinite scroll rather than a paged approach for several reasons:
- Page numbers don't provide context about the content on each page, making it harder for users to find specific information without going back and forth.
- Not all data sets expose their size, enforcing this could impact performance.
- We found good filtering/searching capabilities to be a good way to prevent large data sets. These filters are done on the data sets (on database level) guaranteeing a good performance.
Note that you can easily filter using the right-click menu on a column.
Those are some good questions and I’m glad to see you’re taking a deep dive into how the components work. As for the table, the data is being requested page by page. So if the user is only viewing the first 50 records, then the client will only fetch those 50 records even if the data set contains a lot of data. When scrolling, more and more data is being fetched from the backend, which is being kept in memory of the browser. So this will indeed consume more and more memory. However, we do apply virtualization in the DOM of the web page, meaning we can have 100 000 records in memory while only having 50 records in the DOM of the browser (this prevents locking up the browser). So in conclusion, loading in more records will allocate more memory, but will not lock up the browser.
Thank you so much. I got it.
Thank you Sebastian for the detail explanation. Sometime customer asked pagination and all. I’m currently learning every component in details with limitations. So I’m curious to know, how the things working in depth.
As you said table component doesn’t support pagination, I have question on infinite scroll, we designed app and added table component fit to screen means table height is fit to screen. In table component we added query with select statement. let’s say it can display 50 rows data in full screen at a time, if user keep scrolling & scrolling, is table component contains old rows data in browser memory cache (if yes, if we have huge data, will it hang browser when browser memory fully consumed )?
Or this component is just keeping last 50 rows where the scroll currently pointed and old rows automatically removed from cache and will be fetched again once user will scroll up?
Thank you.