I have a large (some ~30 columns, 10k+ rows) data set I am displaying in a Tabulator table. The table has 100% height set and vertical scroll runs very smooth with the virtual DOM. But when I scroll horizontally (my columns span some 3-4 times the screen width on my resolution, and this is intended), the scrolling is again very smooth but the column headers (including their filter boxes) do not follow the scroll immediately, instead they sort of lag behind. When the scroll motion stops, the headers "catch up" in a second or so.
I guess this is because the table component supports sticky ("frozen") columns and therefore their position gets adjusted on-the-fly based on scroll events from the table content, but since I am not using such columns, I was wondering if the laggy / jerky movement of the headers can be disabled and have the headers directly scroll along with the table rows?
Related
I have a DIV on my webpage which is a set width, say 1300px wide. Inside this I have a HTML table which has a width that sometimes exceeds that of the parent DIV. It depends how long some of the data in each column is.
Easy answer is overflow-x: auto or scroll.
The issue is; the scroll bar is at the bottom of the DIV and if my table is 50+ rows tall it's a bad user experience as users may not notice columns are hidden and there's a scrollbar at the bottom of the page.
I've spent some considerable time on google. I can't find anything.
Is there a way of loading a semi transparent bar (DIV) or custom scroll bar that to somehow overlay my table to users can move it and scroll left to right and view all of the table data?
Thinking either JS or CSS most likely both.
I am trying to make this table that I am working on more responsive and visually appealing. I am using react.js. My table component has varying number of columns based on the data, so some tables I am finding it difficult to fit the information on the page without having resorting to horizontal scroll, or possibly things like the headers and the icons in the th's collide with one another. Initially I set a min width for the table so that the headers don't collide but that automatically made the table wider than it had to be causing immediate horizontal scroll.
Got this image from https://css-tricks.com/accessible-simple-responsive-tables/, looking to have the table initially with the squish method (no minimum width, just 100% width), but try to determine what min-width would be needed for the table not to collide on itself with a horizontal scroll. So maybe dynamically set a media query (if that's possible?) or open to other suggestions.
Here I set a minwidth for the table but even at full screen it goes straight to a horizontal scroll.
Here I removed the min width made the table 100% width and this would be ideal at full screen but when there are more columns or at smaller viewpoints it causes it to squish up to a point where it's unreadable.
Here I have a table with even more columns but even at 1461px screen width it starts overflowing. I also need to avoid having to break words in the headers.
Was hoping to learn to see if
There was a way to know at what screen size the column headers will overflow
If there is a way to dynamically set a media query to allow a min width at that point for horizontal scroll?
Or if I am just going about this the wrong way if there is a better way to address this? I would like to avoid collapsing columns if possible.
See the example here:
http://dojo.telerik.com/uFuYa/2
When you resize the column header (reduce the width) it's pushing the whole grid downwards. Also when you lower the column header width, then increase it, it reduces the height of the whole grid. Same issue happens when virtual scrolling is disabled. Is there any workaround to stop this happening? The content section (data section) seems to just push the footer down. Even if the footer is fixed, the content section still pushes past it.
It is recommended all Grid rows to be of equal height, so that the virtual scrolling functionality works as expected:
Virtual scrolling - Kendo UI documentation
You can set the CSS white-space property to nowrap for the Grid header and regular cells:
Modified dojo example
How can iScroll5 or HTML5 be used to allow touch/momentum scrolling with these attributes:
A Table with many items, and each item has many columns
Scrolls vertically and horizontally
Header is fixed vertically, but header scrolls horizontally with columns
In this scenario, vertical scrolling would affect which list items are displayed, and horizontal scrolling would affect which columns are displayed for the visible list items.
To see an example of this go here and click on "100" to show 100 records:
http://www.tablefixedheader.com/fullpagedemo
This example works correctly except for the scrolling does not have a touch/momentum/flick action.
We have a page with multiple content areas, in one of which we build a table from a result set. The user requirement is that the page not scroll. If we fix the number of rows to now allow scrolling at our preferred screen resolution, it looks great at the preferred resolution, but at lower resolutions the page scrolls. If we fix the number of rows so that the page does not scroll at our lowest supported resolution, we end up with a lot of wasted space at our preferred resolution. We have done some things with the viewport size (get viewport size, subtract all fixed elements, divide the result by normal row height to calculate number of rows to display), but these do not take into account that some of the rows wrap to be two lines. When that happens, we push down and end up scrolling at lower resolutions. Is there any way to dynamically fill an element with rows until it is full but not go past the point where the element would be forced to scroll?
Keep appending rows, all the while checking $('table').outerHeight() until it's greater than $(window).height(), then delete the last row.
Call this window fitting thing again on window resize events.