100% width tables with vertical & horizontal scroll?

the6step

I current use DataTables in an application, and I fight with it all the time because I have an elastic application: the tables stretch to the viewport, but when the data gets to be too much for the data, a scrollbar appears: the best of both worlds....

My current problem, is that I want to do horizontal and vertical scrolling, and DataTables can handle it, just not in the 100% width context (that resizes as the browser expands & shrinks, and smartly puts a scrollbar when the table can't shrink anymore). Any ideas?

mykbaker

I need this exact same functionality and have not been able to find a way to do it yet as well.

the6step

mykbaker: This is somewhat important so I think just for our sake I'm going to start a use case and then we can make the question clearer and/or we can work on it ourselves.

Links to test cases are below:

http://jsbin.com/opabi3/26
or
http://jsbin.com/opabi3/26/edit

Notable bugs: [code] All bugs look like they are fixed (Firefox is a little choppy when scrolling however)[/code]

For those who don't know how to use jsbin, the number at the end is the revision: change that number to look through previous revisions (since I'm currently hacking on this).

mykbaker

My issue is a little different I guess. I have used the sScrollY and sScrollX to set the size of the table so the scroll bar can be used in the table without losing the header. I would just like to be able to set sScrollY and sScrollX to a percentage value so it will grow to fit the users screen.

the6step

I don't quite understand how our needs differ, but I think they are close enough... the example on the page isn't really close to what I want: you should make another revision and show me what your talking about if it's that different.

mykbaker

Here is a copy that works like what I have. I'd like to be able to set the sScrollY value to 100%.

http://jsbin.com/opabi3/15

cdaigle

the6step - try this:
[code]
$(document).resize(function() { $("#example1").dataTable().fnAdjustColumnSizing();};
[/code]
This should take care of the width aspect when resizing.

Hope this helps.
-Chris

the6step

mykbaker: yeah you're right, you're talking about something almost completely different...

cdaigle: I plugged the code into the page previously posted (on jsbin) and while it controls some aspects, things like header (I'm pretty sure) it doesn't control completely. I'll report back and see what I can find.

Edit: ok so I'm pretty sure that has an adverse hit on performance, but besides the point:

I've updated my example with your code snippet (slightly alterated)... the 2 issues is that horizontal scroll doesn't work for the header.. and the more pertinent issue is that since the header & footer are no longer directly apart of the table, when the browser width compresses, the cells become misaligned. Take a look at my updated code example I put in my 3rd post.

Edit: it looks like your code along with some alterations, it now works. I want to add a load spinner with an overlay on the tables so that instead of resizing every single resize event, just stop displaying the table upon resize (or blur it out) and then when the user stops resizing, then readjust the columns and then fade out the spinner.