How to configure full width, resizable tables?

dbaron

Hello, I am a new user to DataTables. I am using the product on desktop only for now. One of my requirements is to have the table use 'all available space' in my page, other than the 'surrounding' stuff (sidebar, page headers, etc...). I've already figured out how to get variable (full) height working, since I can directly address the 'scroller' div in js. However there does not appear to be a way for me to set the width of the datatable, real-time, as a user resizes the browser window. From what I can see, there are two elements that need explicit width setting - MY table (that holds the data) and the DT column headers table. Mine I can handle... the other has no ID, though does have the exact same class values as MY table. I could use jQ to select 'all tables with those classes' and then apply an explicit width in pixels to them. My question is: Is that the 'right' way to do it, or is there some setting somewhere I am missing? If there is no 'right' way to do it via API, then, can I ask: are those the only two elements I need to explicitly set widths for? I am not using a footer at this time, but I imagine that once I do, there would be that to set at well.

Thanks,

-David

tangerine

I think you might want the Responsive extension.
https://datatables.net/extensions/responsive/

dbaron

Yes, I should have said that I am also using the responsive add-in. That said, I am using both the 'js option', responsive: true, as well as the HTML class option: class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed". There appears to be no change in behavior.

allan

You should be able to simply add width="100%" to your table element. That will cause the table to take up 100% of the available width (which is defined by whatever container it is in).

If that doesn't fix it for you, we'd need a link to a test case showing the issue.

Allan

dbaron

Hi Allan - I had already set the table's width to 100%. That did not seem to result in anything. Instead I had to use 3 lines of js to manipulate several elements. Here is some basic html of my dt and container...

<div id="div-collection" class="row content-row menuDisplayed sub-header-descr">
        <table id="tbl-pieces" class="table table-striped table-bordered dt-responsive nowrap no-footer" cellspacing="0" style="width:100%;">

And here is the js that does the manipulation after each window resize:

//assume newW is a calculated value that I produce with every resize, i.e., the 'available width'
$('table.table').css('width', newW);
$('div.dataTables_scroll').css('width', newW);
$('#tbl-pieces_wrapper div.row').css('margin-left', '0px'); //this simply overcomes an enclosing margin of -15 (something from bootstrap)

It's all good at this point...it's just without the extra js, the table would be 'small' (width-wise) within the encompassing div)

Thanks again,

-David

allan

Odd! If you have a link to a page showing the issue I'd be happy to take a look. It should need that extra JS.

Allan