Topic: Datatable scroll back to the origin position after update
Expected behavior I would like to scroll back the vertical scroll bar after update the content without any trick. That trick what I found is time based, so it is absolutely dangerous! Do you have any better idea?
Actual behavior If I scroll down to the middle of the table content, and I after update the table, the scroll position will be on the top of the table and I need a trick now to scroll back.
Resources (screenshots, code snippets etc.)
var scrollTop = 0;
I can get the position with
scrollTop = table_el.querySelector('.datatable-inner').scrollTop;
but after the render, I need a setTimeout to the scroll back can be work
table_el.addEventListener('render.mdb.datatable', () => {
setTimeout(setScroll, 100);
});
function setScroll() {
var el = table_el.querySelector('.datatable-inner');
el.scrollTop = scrollTop;
var el_rail = table_el.querySelector('.ps__rail-y');
el_rail.style.top = scrollTop + "px";
}
I've prepare a snippet for you. I run scroll update on button click so you can test it in the snippet. https://mdbootstrap.com/snippets/standard/kpienkowska/6157348
szaiftamas pro premium priority commented 9 months ago
Thank you for your answer, but unfortunately, I got an error for this snippets link.
- That's an error. The requested URL was not found on this server.
Kamila Pieńkowska staff commented 9 months ago
Added snippet should work now.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.0.1
- Device: Laptop
- Browser: Firefox
- OS: Linux
- Provided sample code: No
- Provided link: No