Table To Grid with Scrolling

pallone · March 19th, 2008, 06:43 PM

Hi,

I do not know if this is something possible to achieve using javascript, CSS, DIV, ..etc and I would be truly grateful is someone could help me to transform a TABLE into a GRID so that users could scroll the TBODY section vertically and horizontally.

When users scrolled horizontally then the TBODY together with the THEAD would scroll under the left section (currently using TH). When they scrolled vertically then the TBODY would go under the THEAD.

I don't even know how to start it and would appreciate some help with the code if possible.

Cheers

P

This is the table:

<html>
<head>
    <title>Table</title>
    <script type="text/javascript" language="javascript">
        function makeGrid()
        {
            var t = document.getElementById("grid")
            var th = document.getElementById("gridHead")
            var tb = document.getElementById("gridBdy")

            alert(th.outerHTML + "\n ==================== \n" + tb.outerHTML)
        }

    </script>
</head>
<body onload="makeGrid()">
<table border="1" id="grid">
  <thead id="gridHead">
    <tr>
      <th rowspan="5" colspan="3"> </th>
      <th colspan="6">Month</th>
      <th colspan="2"> </th>
    </tr>
    <tr>
      <th colspan="2">2006</th>
      <th colspan="4">2007</th>
      <th colspan="2"> </th>
    </tr>
    <tr>
      <th colspan="2">Quarter 4</th>
      <th colspan="4">Quarter 1</th>
      <th colspan="2"> </th>
    </tr>
    <tr>
      <th colspan="2">December</th>
      <th colspan="2">January</th>
      <th colspan="2">February</th>
      <th colspan="2">Total</th>
    </tr>
    <tr>
      <th>Total Pages</th>
      <th>Cost</th>
      <th>Total Pages</th>
      <th>Cost</th>
      <th>Total Pages</th>
      <th>Cost</th>
      <th>Total Pages</th>
      <th>Cost</th>
    </tr>
  </thead>
  <tbody id="gridBdy">
   <tr>
      <th rowspan="3">Full Name</th>
      <th rowspan="3">Name 1</th>
      <th>A</th>
      <td>1</td>
      <td>5385</td>
      <td>1</td>
      <td>4471</td>
      <td> </td>
      <td> </td>
      <td>2</td>
      <td>9856</td>
    </tr>
    <tr>
      <th>B</th>
      <td>1</td>
      <td>4914</td>
      <td> </td>
      <td> </td>
      <td>1</td>
      <td>5107</td>
      <td>2</td>
      <td>10021</td>
    </tr>
    <tr>
      <th>C</th>
      <td>0.8</td>
      <td>6604</td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td>0.8</td>
      <td>6604</td>
    </tr>
    <tr>
      <th rowspan="1"> </th>
      <th rowspan="1"> </th>
      <th>Total</th>
      <td>2.8</td>
      <td>16903</td>
      <td>1</td>
      <td>4471</td>
      <td>1</td>
      <td>5107</td>
      <td>4.8</td>
      <td>26481</td>
    </tr>
  </tbody>
</table>
</body>
</html>

vinod_yadav1919 · March 20th, 2008, 01:11 AM

Hi pallone!!

I found some links

http://www.javascripttoolbox.com/lib/scrollingdatagrid/
http://www.webreference.com/programm...pt/gr/column4/

Hope this will help you

Cheers :)

vinod

pallone · March 20th, 2008, 06:01 AM

Hi Vinod,

Thanks. I will have a look at the links.

Cheers

P

pallone · March 20th, 2008, 01:09 PM

Hi Vinode,

I had a look at the first link and it is promising. The only problem is that it works only in IE. I believe the reason for this is that the CSS to achieve the scrolling is only IE compatible:

/* OffsetParent of the TR is the DIV because it is position:relative */
            DIV.scrollingdatagrid TABLE THEAD TR {
            top:expression(this.offsetParent.scrollTop);
            }
            /* OffsetParent of the THEAD and TFOOT locked column is the TR because it is position:relative */
            DIV.scrollingdatagrid THEAD .locked, DIV.scrollingdatagrid TFOOT .locked {
            left:expression(this.offsetParent.offsetParent.scr ollLeft);
            }
            DIV.scrollingdatagrid TBODY .locked {
            left:expression(this.offsetParent.scrollLeft);
            }
            /* The TFOOT should stick to the bottom of the DIV */
            DIV.scrollingdatagrid TABLE TFOOT TR {
            top:expression(0 - this.offsetParent.scrollHeight + this.offsetParent.clientHeight + this.offsetParent.scrollTop);
            }

Do you think it would be possible to achieve the scrolling using JavaScript? Have you got any ideas on how to do that:

Cheers

P

The Grid

<html>
<head>
    <title>Scrolling Data Grid</title>
<style type="text/css">
/*
Tables inside a scrollingdatagrid should have:
1. border-collapse:separate
2. No border or margin
3. Background colors on all cells to avoid bleed-thru on scroll
4. cellspacing="0" on the <table> tag itself
*/
DIV.scrollingdatagrid {
    overflow-x:auto;
    overflow-y:auto;
    position:relative;
    padding:0px;
}
DIV.scrollingdatagrid TABLE {
    width : 98.7%; /* Make room for scroll bar! */
    margin:0px;
    border:0px;
    border-collapse:separate;
}
DIV.scrollingdatagrid TABLE TR .locked, DIV.scrollingdatagrid TABLE THEAD TR, DIV.scrollingdatagrid TABLE TFOOT TR {
    position:relative;
}
/* OffsetParent of the TR is the DIV because it is position:relative */
DIV.scrollingdatagrid TABLE THEAD TR {
    top:expression(this.offsetParent.scrollTop);
}
/* OffsetParent of the THEAD and TFOOT locked column is the TR because it is position:relative */
DIV.scrollingdatagrid THEAD .locked, DIV.scrollingdatagrid TFOOT .locked {
    left:expression(this.offsetParent.offsetParent.scr ollLeft);
}
DIV.scrollingdatagrid TBODY .locked {
    left:expression(this.offsetParent.scrollLeft);
}
/* The TFOOT should stick to the bottom of the DIV */
DIV.scrollingdatagrid TABLE TFOOT TR {
    top:expression(0 - this.offsetParent.scrollHeight + this.offsetParent.clientHeight + this.offsetParent.scrollTop);
}
/* Make the z-index values very clear so overlaps happen as expected! */
DIV.scrollingdatagrid TD, DIV.scrollingdatagrid TH { z-index:1; }
DIV.scrollingdatagrid TD.locked, DIV.scrollingdatagrid TH.locked { z-index:2; }
DIV.scrollingdatagrid THEAD TR, DIV.scrollingdatagrid TFOOT TR { z-index:3; }
DIV.scrollingdatagrid THEAD TR TH.locked { z-index:4; }
</style>

<style type="text/css">
/* EXAMPLE STYLES FOR EXAMPLE TABLE */
table.example thead th {
    background-color:#ffcccc;
}
table.example tfoot td {
    background-color:#ccffcc;
}
table.example tbody td {
    background-color:#eeeeee;
}
table.example td, table.example th {
    border:1px solid #cccccc;
    border-width:0 1px 1px 0;
}
</style>
</head>
<body>

<div class="scrollingdatagrid" style="width:400px;height:500px;border:1px solid black; left: 0px; top: 0px;">
<table class="example" cellspacing="0">
<thead>

    <tr>
      <th class="locked" rowspan="5" colspan="3" style="background-color:Gray" />
      <th colspan="6">Month</th>
      <th colspan="2"> </th>
    </tr>
    <tr>
      <th colspan="2">2006</th>
      <th colspan="4">2007</th>
      <th colspan="2"> </th>
    </tr>
    <tr>
      <th colspan="2">Quarter 4</th>
      <th colspan="4">Quarter 1</th>
      <th colspan="2"> </th>
    </tr>
    <tr>
      <th colspan="2">December</th>
      <th colspan="2">January</th>
      <th colspan="2">February</th>
      <th colspan="2">Total</th>
    </tr>
    <tr>
      <th >Total Pages</th>
      <th>Cost</th>
      <th>Total Pages</th>
      <th>Cost</th>
      <th>Total Pages</th>
      <th>Cost</th>
      <th>Total Pages</th>
      <th>Cost</th>
    </tr>

</thead>
<tbody>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
    <tr><td class="locked">Row Title</td><td class="locked">Row</td><td class="locked">Title</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>

</tbody>
<tfoot>
    <tr>
      <td class="locked" rowspan="1"></td>
      <td class="locked" rowspan="1"></td>
      <td class="locked">Total</td>
      <td >2.8</td>
      <td >16903</td>
      <td >1</td>
      <td >4471</td>
      <td >1</td>
      <td >5107</td>
      <td >4.8</td>
      <td >26481</td>
    </tr>
</tfoot>
</table>
</div>

</body>
</html>

vinod_yadav1919 · March 21st, 2008, 09:12 AM

Hi Pal,
I will give some other useful links that work with IE and other browsers too.
In mean time have a look on following:

http://webfx.eae.net/dhtml/syncscroll/scrolltable.html
http://webfx.eae.net/dhtml/syncscroll/syncscroll.html
http://webfx.eae.net/dhtml/syncscroll/syncbehavior.html

http://www.stansight.com/sort/LockTableHeadSort.html
http://www.webdeveloper.com/forum/sh...ad.php?t=93850

Cheers :)

vinod

pallone · March 21st, 2008, 02:07 PM

Hi Vinod,

I had a look at all the links an some others but none of them manage to freeze multiple column and row headers. The example I showed above doest that but unfortunately does not work in IE. I will have to find a way to scroll using javascript I think...

Cheers

vinod_yadav1919 · March 27th, 2008, 02:36 AM

Hi Pal,
I have got the js for this,since file can't be uploaded, you can send ur email so that I can forward it to you.

Cheers :)

vinod

romsan · June 25th, 2008, 02:29 PM

Hi Pallone,

I am running into the problem with scrolling grid. If you have only 2-3 rows of data, IE7 just hangs(100% CPU).

I guess it has something to do with calculating footer position and somehow it crashes....

Any help would be appreciated.

Thank you.