Javascript Datagrid That Uses Scroll Bars

Hey guys.

I am looking for a Javascript Datagrid that will populate based on database driven data, but also allows the data in the list to scroll sepereately from the Header. This is so I can allow users to sort data without making another database call on each sort.


For instance, I have used this Javascript and it looks and works great, except the header scrolls with the data....

http://phatfusion.net/sortabletable/

That works great with dynamic database data....but the header dissapears when using a scroll bar.

I am looking for something that works like this, but is not ajax and does not query the database with each sort. http://reconstrukt.com/ingrid/src/example1.html

See how the data scrolls, but the header stays put? The pagination onthat example is not needed and in fact I would rather it didn't have that capability.

I want that functionality, but with Javascript. Anyone know of something like that?


Thanks!

I don't have an example (the code I'm working on for a scrollable datagrid is still being developed), my example does not include sorting:

1) Your table HTML will need to look like this:

Code:

---

<table id="abc">       
    <thead>
        <!-- your header here -->
    </thead>
    <tbody>
        <!-- your rows here -->
    </tbody>
</table>

---

2) Use CSS to specify the height of the tbody element and overflow to auto.

This will allow scrolling on your data rows whilst keeping your header static.

Issues:
1) The data on the right hand side may be covered up by the scroll bar
2) If you only have a small amount of data you might find each row height has been auto set to take an equal share of your tbody height, this can be overcome within JavaScript.

Conclusion:
It will be really easy to do this