Fixed Width Columns, Fixed Width Table, Smart Overflow

mavik

Hi,
first of all I'd like to congratulate Allan Jardine for the excellent tool and the community for the excellent plugins available.

I'd like to make the following usage of datatables.

Given a container of fixed width, build a table from a dynamic json object. Column size would be fixed and know at initialization moment. The columns width should also be fixed. The table should be the size of the aggregated columns width regardless of the container size. If this size exceeds the container scroll would be available to the table overflow, if it falls short, the table should be only as large as it's columns.

I've tinkered around with sWidth and OverflowXInner, but i still can't obtain the desired effect.

Any help would be greatly appreciated

nlrr

Isn't this solvable with just CSS? Giving the container overflow: auto; and giving each column a width using HTML elements?

mavik

Thanks for your reply, it kind of works but the container also includes the headers and the toolbar. The toolbar will be dragged along when h-scrolling and the same will happen with the table headers.

I want the behavior of sScrollXInner but without specifying a measure and without resizing the columns, and maintaining sScrollY visible at all times.

As per your suggestion i did the following:

$('#container').html('');
$new('#example').dataTable( {
"aaData": [
/* Reduced data set */
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
[ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
[ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
[ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
[ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
[ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
[ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
[ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{
"sTitle": "Grade",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "A";
}
return sReturn;
}
}
]
} );

mavik

I just solved my problem set "bAutoWidth": false, sScrollXY and use a fixed table layout. Just felt a bit sluggish on ie, but... it works

jimhap

mavik, I went down the same rabbit hole. Besides "bAutoWidth":false; I've created a trailing dummy column at the end with "sWidth": "auto" to fill the gird horizontally when columns are hidden with the ColVis plugin.

Have you figured a way to dynamically adjust "sScrollXInner" for when columns are hidden? (if you're using ColVis, that is). That's my current problem. Everything works, except user can horizontally scroll too far when a lot of columns are hidden.