Fixing First Column and Header HTML Table - javascript

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)

Related

Scrollable table with fixed header and column as well as selective fixed rows

I need a table as shown in the image.
The requirements are:
the header row (very first blurred row) is fixed when we start scrolling down the table
the first column is fixed when we start horizontal scrolling
additionally, as we scroll down, the colspanned rows in black color (I'll call it the row-group heading row) - "Title 1" and "Title 2" - will become fixed, below the header row, when all rows that belong to its group are in view. And when we scroll further down, and when the next group of rows come into view, the previous row-group heading row will go away and in its place (right below the fixed main header row) the row-group heading row that corresponds to the rows in current view will be fixed.
We're building a react app. We checked out: react-sticky-table, and other non-react libraries like: Stickytable and Sticky-kit.
None of them seem to be doing what we want.
Is there a JS (react or non-react and preferably non-jquery) library that does this?
If not, assuming that we get the first-row header and the first column fixed using any of the above mentioned libraries, is there a way to make the row-group heading rows fixed/static based on scrolling?
I also prefer the table be built using <table> group of elems, and not just divs. But it's not a strict requirement.
UPDATE: Just found this plugin that seems to be doing this: http://maslianok.github.io/stickyRows/multiplerows.html. It's great, but keeping this question open for pureJS or react solution.
I have worked on the same UI but it was the mixture of pure javascript and jQuery, however less concerned about the front end library, as most of them fail at certain point of requirement or amount of data.
I suggest go with your own solution I did the same it is acceptable to clients since 5 years.
1. Create a separate tables for your header and content.
2. Give each cloumn exactly same column span width. E.g. ,<colspan width="50px">
3. Place a separate table with one column in LHS.
4. Write a code in javascript which scrolls your LHS table along with your main table.
Apologies as it is hard to give working example.

Display All the Table Records in the same page without using horizontal scroll

I have a huge table that I want to show it on my website. It has got 60 columns and as many as 2000 rows. Could you please guide me how can I represent these data in the webpage. Right now, I made a scrollbar horizontal and vertical in the webpage and reproduced all the data. It seems clumsy and awkward. This is my first venture in web development, so anyone could guide on simplifying this complexity, it will be great help for me. What I am looking forward is when the user wants a row of data from the table, all those cells should be visible in the same page without the need for a scroll.
Can anyone guide me?
You could use jQuery DataTables with Responsive plugin which will hide extra columns could be shown when necessary.
See this example for demonstration of displaying extra details in a collapsible child row.
See this example for demonstration of displaying extra details in a modal window.

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.

Table with vertical scroll and pages for horizontal

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/

Categories