jQuery DataTables: Column width issues with Bootstrap tabs

Below is a list of the most common issues when table is initially hidden.

  1. Incorrect column widths
  2. Responsive extension – Incorrect breakpoints
  3. Scroller extension – Incorrect column widths or missing data
  4. FixedColumns extension – Incorrect column widths

1. Incorrect column widths

Problem

Both tables have the same column widths defined with column.width option. However table in “Tab 2” has column widths different from the table in “Tab 1”.

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Name Position Office Age Start date Salary
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000

Solution

Use the code below to recalculate column widths of all visible tables once a tab becomes active using columns.adjust() API method.

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Name Position Office Age Start date Salary
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000

Edit on jsFiddle

2. Responsive extension – Incorrect breakpoints

Problem

Both tables have Responsive extension enabled with responsive option. Columns that do not fit the container of the table in “Tab 1” are hidden. However table in “Tab 2” has all columns visible, even those that do not fit the container.

Name Position Office Age Start date Salary Phone Extension Department Supervisor
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 123-456-7890 1230 IT Dai Rios
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 123-456-7890 1231 Accounting Angelica Ramos
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 123-456-7890 1232 Marketing Angelica Ramos
Name Position Office Age Start date Salary Phone Extension Department Supervisor
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 123-456-7890 1230 IT Dai Rios
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 123-456-7890 1231 Accounting Angelica Ramos
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 123-456-7890 1232 Marketing Angelica Ramos

Solution

Use the code below to recalculate column widths of all visible tables once a tab becomes active by using a combination of columns.adjust() and responsive.recalc() API methods.

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust()
      .responsive.recalc();
});
Name Position Office Age Start date Salary Phone Extension Department Supervisor
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 123-456-7890 1230 IT Dai Rios
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 123-456-7890 1231 Accounting Angelica Ramos
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 123-456-7890 1232 Marketing Angelica Ramos
Name Position Office Age Start date Salary Phone Extension Department Supervisor
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 123-456-7890 1230 IT Dai Rios
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 123-456-7890 1231 Accounting Angelica Ramos
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 123-456-7890 1232 Marketing Angelica Ramos

Edit on jsFiddle

3. Scroller extension – Incorrect column widths or missing data

Problem

Both tables have Scroller extension enabled with scroller option and table height defined with scrollY option. However in “Tab 2” width of the columns in the header do not match width of the columns in table body. Also in some cases table may appear as having the data missing.

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Name Position Office Age Start date Salary
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000

Solution

Use the code below to recalculate column widths of all visible tables once a tab becomes active using scroller.measure() API method.

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .scroller.measure();
});
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Name Position Office Age Start date Salary
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000

Edit on jsFiddle

4. FixedColumns extension – Incorrect column widths

Problem

Both tables have FixedColumns extension enabled with fixedColumns option. However in “Tab 2” table has incorrect height and width of the columns in the header do not match width of the columns in table body.

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Name Position Office Age Start date Salary
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000

Solution

Use the code below to recalculate column widths of all visible tables once a tab becomes active using columns.adjust() and fixedColumns().relayout() API methods.

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust()
      .fixedColumns().relayout();
});
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Name Position Office Age Start date Salary
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000

Edit on jsFiddle

Recommended For You

Books

Online Courses

You Might Also Like

Comments

    1. Although this is unrelated to the article but if you’re using Scroller extension with scrollY, use scrollCollapse: true to reduce table height when limited number of rows are shown.

  1. Regarding solution 2, if there’s no data in the table then the “No data in table” cell which is supposed to span the entire table only spans the first column.
    If you’re fetching your data from an AJAX store which is often empty, this is a big no no…
    Chaining a draw(); after calling columns.adjust fixes this issue.
    https://jsfiddle.net/ppgumq4m/

  2. Hi Michael,

    I have tried your suggestion in my code regarding section “1. Incorrect column widths”. But it is not working at all.
    I am using Jquery v3.1.1 and Bootstrap v3.3.7. Could you please guide me what mistake i have done.

    HTML Page:

    <ul>
                <li><a href="#dvdksStoredetails" rel="nofollow">Type 1 Stores</a></li>
                <li><a href="#dvfsStoredetails" rel="nofollow">Type 2  Stores</a></li>
                <li><a href="#dvggStoredetails" rel="nofollow">Type 3 Stores</a></li>
            </ul>
    
            <!-- Tab Content Containers -->
            
                @Html.Partial("dksstoresList", Model)
                @Html.Partial("fsstoresList", Model)
                @Html.Partial("ggstoresList", Model)
    

    Jquery:

    $('#dksplanTable').dataTable({
                scrollY: 300,
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                "sort": false,
                "searching": false,
                'searchable': false,
                'orderable': false,
                columnDefs: [{
                    orderable: false
                }],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                order: [[1, 'asc']]
            });
            $('#fsplanTable').dataTable({
                scrollY: 300,
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                "sort": false,
                "searching": false,
                'searchable': false,
                'orderable': false,
                columnDefs: [{
                    orderable: false
                }],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                order: [[1, 'asc']]
            });
                 
                       
            $('#ggplanTable').dataTable({
                scrollY: 300,
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                "sort": false,
                "searching": false,
                'searchable': false,
                'orderable': false,
                columnDefs: [{
                    orderable: false
                }],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                order: [[1, 'asc']]
            });
            $('#ggplanTable').on('shown.bs.collapse', function () {
                $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
            });
           
    
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                $($.fn.dataTable.tables(true)).DataTable()
                   .columns.adjust();
            });
    

    You can refer here for my code: https://jsfiddle.net/ujjwal29/hsmzqLq4/1/

  3. Hi Michael,

    I have a similar problem as case 3 (3. Scroller extension – Incorrect column widths or missing data).

    I tried all options, but the header is still a problem for me. I tried adding $.fn.dataTable.tables(true)).DataTable().scroller.measure(); and also
    $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc(); after adding scroller and responsive to datatable, but I still see the same issue.

    I have accordions and each accordion has a datatable in it.

    Do you have any suggestion for me?

      1. Oh wow! I was calling these methods after the table and accordion were rendered, but I never called it inside accordion activate. Thanks for sharing the stackoveflow link. It solved my problem.

      2. I have one more problem which I am trying to solve.
        In my case, the datatable header is rendered normal in Chrome, but in all other browsers, the header expands and it’s height is 5-6 times the height of data rows.
        I tried a few options to change height of the header columns by applying suggestions from datatable.net forum, but with no luck. I see the height attribute is applied to of my datatable, but the header is still rendered out of proportion.

        Do you have any pointers for this?

        P.S. I am sorry that I am not sharing any image here. The jsfiddle examples are also rendering normally with all static binding, which makes them futile. My page dynamically renders all accordion and datatables in those accordions.

  4. Hi,

    I am having the same issue though it’s caused because the left nav-bar collapses onload which affects the pre-defined width of the table (it is stretched out when the nav-bar collapses).

    On hover, the nav-bar expands to display the links.
    The header has a toggle show/hide nav-bar button as well which shrinks/expands the page content, again affecting the table width

    How can I set the ‘columns.adjust();’ in this case?

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
(Optional)