Fixed Width Columns, Fixed Width Table, Smart Overflow
Fixed Width Columns, Fixed Width Table, Smart Overflow
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
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
This discussion has been closed.
Replies
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;
}
}
]
} );
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.