Table with vertical scroll and pages for horizontal - javascript

I have a table that have important information in left column and in the top row, therefore these should always be visible, I then want to have Pages in the bottem for horizontal "scrolling" and a normal scroll for vertical scrolling.
Is there a Jquery script that supports this?
It would look something like this

If your requirement is to display basic data then you could use one of the Jquery plugins available for this purpose like Datatables. They are very flexible and you could do most of the basic things using one of their extra's.
If your requirement is more than just displaying data. It has complex edits, custom features for each column and stuff then your better of with a custom implementation. We've build such a table which has integrated autopopulates, calendar and other completely custom features by having a div float beside the table and using Jquery to control the scroll. The header and the frozen column on the left are usually separate tables/divs themselves and are just aligned as per the table using Jquery. They work quite well for IE 8+ and other browsers.

Does this work? (I used CSS, not jQuery, sorry)
http://jsfiddle.net/mAnQp/
Update: added pages
http://jsfiddle.net/mAnQp/3/

Related

How to make React-Table React-Window combo fit inside a smaller wrapper div?

I have a table with all the bells and whistles that react-table has to offer, but one of the requirements I have is to add infinite-scroll-like behaviour to the table and I saw the Virtual Rows example that certainly solves my problem. Unfortunately the styling is not as easy to implement as I thought.
I have a fork of the mentioned example where I am trying to make it work inside a smaller wrapper div... What I have works but is not good UX since the user cant see the position of the scroll until scroll horizontally to the right
See "working" example here
Ideally I will have the scroll bar outside next to the body of the table like the photoshoped image below
But all my attempts to make this work have fail.

Fixing First Column and Header HTML Table

I have a this table:
`https://jsbin.com/hutifufisa/edit?html,css,js,output`
And I already fixed the first column using an example i saw here in stack, but if the table contains a lot of values and being responsive, it's not easy to know which value i'm checking because the header is not fixed when you scroll down, thinking about mobile UX, im using bootstrap to create the table.
Is it possible to keep the first column fixed, just like it already is, and also fix the header?
Thx!
for responsive table and UI good developers always used bootstrap.
responsive table bootstrap.
read this link https://www.w3schools.com/bootstrap/bootstrap_ref_css_tables.asp for read more about responsive table and bootstrap(Bootstrap is so easy just used class and read and research)

JQuery Datatable is not working as responsive

I need to use jQuery datatable in my project and need to create it as responsive. I don't want the inbuilt paging, sorting, searching of the datatable. Instead I need to use lazy loading in that while user scrolls to the end. This is the model fiddle of my progress,https://jsfiddle.net/Noblemo/y9ye3yvj/.
I'm using table.row.add method to add rows in to the datatable. My issue is, while adding data, the table shows horizontal scroll bar. I need only vertical scroll bar. Horizontal over flow of data should be responsive. Please help me.

Fixed header within table when scrolling the table

Problem:
I have a table that is too large to be a liquid style element for mobile. My solution was to make the overflow-x: auto. Works great and is pretty much how spread sheets on mobile apps work. One problem, the table can be confusing to read with the header being within the offset-y portion. I sometimes find myself scrolling back up just to see what column of data I'm looking at.
Question:
Is there a way to keep the table header in a fixed position within the table itself using CSS/JS - jQuery so that when the user is scrolling through the data, the header is always showing just like you would expect it to be in a mobile app? (Numbers for mac also does this). I don't mind using CSS3 since this is for mobile.
Other Things That Have The Same Behavior
Apple Numbers When you scroll down and the headers should be out of view, they stay fixed until you pass up the table.
iPhone Instagram App when scrolling through feed, the user's header stays in view until new post shows up.
iPhone Contacts App When scrolling through All Contacts the letter section you're in stays on top until a new letter shows up.
I just want to make sure you guys know what I'm talking about because I couldn't find anything similar to what I wanted to do. Not sure If I'm typing in the wrong search terms or what. But it's pretty much a hybrid style between float and fixed.
Code drops has an excellent article on making the table headers fixed while scrolling.
The solution is based on JQuery and it works for both, row heading and column heading
Sticky Table Headers & Columns
This is what you're looking for: https://css-tricks.com/persistent-headers/
It's been done many times before.

Optimize css : many tables that contain tables

I have to render up to 1500 row using jquery plugin Datatables and twitter bootstrap css. In each row, there is a table that can contain up to 50 row.
Using chrome developper tools profiler and testing, the rendering is a real problem. For example, i have for 250 items displayed 219861 selector match for .table th, .table td.
How can i optimize this ?
I retrieve twitter bootstrap from bootstrapcdn
I am a framework developer and I can share some of things I have faced and remember at this moment
When writing table inside table layout, don't use
'box-sizing:border-box'
Instead use 'content-box', otherwise it will create gaps between rows, not columns if you have specified or not specified borders. No style will help you to remove that.. This is very important while implementing nested table layout
Even if you are using DIV with table layout, take care 'max-width' does not work properly in some mozilla versions, for that you may have to maintain a "wrapper" DIV that is occupying the 100% width and 100% height of cell.
Maintain block lever wrappers inside cells and apply skins to it if it is table, because hover and focus will not apply properly.. Example: half filled hover skin observed in some modern browsers as well.
And while embedding those many elements dynamically instead of creating elements on fly and appending, prepare HTML string and append it, it does perform very well.. I have observed this. But modifying html renderer might look dirty, but all we need is performance
These are some things I remember at this point of time. If I am wrong somewhere please correct me..
Suggestion If you are targeting mobile browsers as well, then go for table layout until unless you have good expertise in dealing with div layout. Floats does not work properly in some mobile devices. And tables scaled properly with media Queries in mobiles as well.
I recently had a similar situation with waaaay too much table data and had to solve it with pagination. The HTML has to pull all that info and build that massive table before it will even start to render it, thus the horrible slowness.
Finally i will limit maximum number of rows displayed to 200. No "display all the stuff" allowed.
I will try to optimize css too. Seems that there is a lot of definition of bootstrap css i don't use.

Categories