SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table with Floating headers and columns: Best Practice

    Hi Everyone

    There is one problem I seem to run into continually when web programming. People want tables with a frozen header and frozen columns. There are many many ways of doing this and I have spent quite a lot of time trying to come up with more and more efficient ways of doing this. I have tried multiple tables, divs/spans, divs which move in and out of other divs. I have tried to match scrollLeft/scrollLeft properties and even done sliding divs where you mach the top/left with the scrollLeft. There are many ways of making these tables, but, They all slow down when the table gets really large. IE is fairly efficient with larger tables, it is mozilla based browsers that seem to have the most problems. So, I thought I would throw this problem out to you and see if anyone has come up with a solution.

    How do you make the most efficient table(not necessarily <table>) with
    1) Headers which scroll right and left but stay frozen on scroll Up and Down
    2) Columns which scroll up and down but stay frozen on scroll Right and Left
    3) Capability of handling large amounts of data, say, 80+ columns and 1500+ rows
    4) Cross browser compatability

    Thanks
    AFrieze

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There was a thread about this just recently. Here's the demo I came up with: xTableHeaderFixed

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your response MikeFoster
    Looks quite interesting

    Any Ideas on how this could be incorporated to be used with both a frozen header..and a frozen column?

    Also, 80+ columns is going to need to expand beyond the scope of one page, so the header needs to scroll left and right, same requirement on the frozen column, only up and down.

  4. #4
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AFrieze,

    Your requirement for frozen headers and columns in the context of 80+ columns in a browser environment goes against how data tables are handled by browsers as they exist today. You seem to be searching for a brute force method that browsers just cannot handle.

    Consider also: a human being cannot grok 80 columns. Period. Perhaps a machine can, but a human carrying out work tasks just cannot. We members of homo sapiens apologize in advance.

    If your application design requires 80+ columns and who knows how many rows, then reconsider your design. Is there another way to break up the data so that it has the proper impact, meaning, and utility for your users? Reject the brute force approach and use design in the context of an understanding of user objectives.

    With that done, I am absolutely certain, from personal experience, that your technical requirements will be dramatically reduced.

    Brett Merkey
    http://web.tampabay.rr.com/bmerkey/

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,833
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Maybe you need to supply the info in a downloadable spreadsheet since that volume of data is too much to display on a web page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Think I just found my solution.
    I used a mixture of ideas and came up with a table which can handle 2000 rows and 100 columns with a frozen column(scrolls up and down) and a frozen header(scrolls right and left). I can post a web page if anyone wants to demo it, however, the file i am testing with is 16 megabytes. The scroll is fairly smooth as well.
    Thanks
    AFrieze

  7. #7
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "I can post a web page if anyone wants to demo it"

    Sure, please do. I would love to see a smooth scrolling cross-browser locked header, frozen column 16 meg table...

  8. #8
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to see it too, because I think about it a lot. Anyway, I came with another solution, because in this case is question why do you need it. Answer is simple: help user to know in which row and column cell is. So maybe there is another possibility. Just send him required information through title of cell. Here is an example how to do it, but it is not well done because it wants to work on gecko bug with whitespace, I saw somewhere something like js whitespace reset . Demo of my idea is here http://xy.wz.cz/table-title-crosshover.html

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have another 'table experiment': xTable. And there is a related thread.


  10. #10
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link MikeFoster, I will look into the code soon and see how it works with large amounts of data.

    I have another question, however. The table i built works great with large amounts of data, as long as the user downloads that data. I just put an Add 100 rows button on the table to demonstrate it and realized that the table scrolls much much slower when data is added in this way. Any ideas why?

    I was experimenting in Firefox

    Thanks
    AFrieze

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AFrieze, show us your table and we'll take a look.

    Keep in mind that 'xTable' is very experimental - and I will most definitely be changing it.

  12. #12
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    MikeFoster
    Here is a link to the table.

    http://herdbook.simmental.org/Test.html

    The code is sloppy right now as I am continually trying new things. I believe I now have most of the problems solved

    The table should resize itself with the browser window and scroll with large amounts of data. I am not sure if it is working in safari yet, I think I might have some sizing issues. Let me know

    Note: Oops! I left and event on each cell, so if you click on a table cell an alert box pops up. Also, you can click the Add 300 Rows button as many times as you want to get lots of data

    AFrieze

  13. #13
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good work, AFrieze.

    I just put an Add 100 rows button on the table to demonstrate it and realized that the table scrolls much much slower when data is added in this way. Any ideas why?
    Adding hundreds of event listeners (td.onclick) creates alot of overhead. Perhaps that is having an effect.

  14. #14
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bugs Found:
    On some browsers my headers are not getting their widths set properly.


    Code:
              for(i = 0; i < thList.length;i++){
                thList[i].style.width = thList[i].offsetWidth + "px";
              }
    The above code segment is run right before it is removed and appended to another table. I need to find a better way. Perhaps a div or some such inside.

    AFrieze

  15. #15
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks AFrieze. Looks like a solution with excellent performance possibilities. IE 6 does not handle the load as elegantly as Firefox 1.5 but they both do fine in the end. No problem scrolling in any direction.

    Brett Merkey

  16. #16
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Brett Merkey

    Ok, so bug with headers has been solved(but not moved up to test page). I put a div in each <th> and here is the new sizing code

    Code:
              for(i = 0; i < thList.length;i++){
                thList[i].getElementsByTagName("div")[0].style.width = thList[i].getElementsByTagName("div")[0].offsetWidth + "px";
                //thList[i].style.width = thList[i].offsetWidth + "px";
              }
    Load should probably be something like this

    parentNode = gridTable.parentNode;
    parentNode.removeChild(gridTable);
    //a few hundred appends to gridTable through cloning rows
    parentNode.appendChild(gridTable);

    Another question I have is with column size. It would be nice to change the column size smaller than the internal text size. Any suggestions? I would prefer to not put divs or spans inside every <td>

    Thanks
    AFrieze


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •