jQuery DataTables: Column width issues with Bootstrap tabs

Michael Ryvkin
64 64

One of the most common issues with a table using jQuery DataTables and Bootstrap framework is when the table is initially hidden. For example, your table is located in a tab, accordion menu or modal. When user activates the tab or opens the menu and table becomes visible, it usually has columns not working and having incorrect width or unexpected behavior.

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

You May Also Like

jQuery DataTables: Row selection using checkboxes and Select extension
jQuery DataTables: Row selection using checkboxes
jQuery DataTables: Why click event handler does not work
jQuery DataTables: Alphabetical Search
Michael Ryvkin

Freelance web developer based in Perkasie, Bucks County, PA. I design and develop custom websites and web applications, perform website maintenance and provide technical support for small and medium-sized businesses.

Contact me for a free quote or consultation on your project.

Comments

  1. How to hide the dynamically adjust the height of the table when lesser number of items are displayed?

    Reply

    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.

      Reply

  2. 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/

    Reply

  3. 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/

    Reply

  4. 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?

    Reply

      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.

        Reply

      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.

        Reply

      3. I tried this but it is give error, trUncaught TypeError: $(…).accordion is not a function
        Do you have any suggestion for me?

        Reply

  6. 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?

    Reply

  7. I draw tabs dynamically with jQuery and inside each tab i draw a datatable. I tried those solutions but i have the same issue. The width of table is smaller like tab.

    I tried a lot of things like below code, but it works bad. 

    
$('.tabTablas').on('shown.bs.tab', function (e) {
    $($.fn.dataTable.tables(true)).css('width', '100%');
    $($.fn.dataTable.tables(true)).DataTable().columns.adjust().draw();
});
    Reply

  8. I would like to know something from example 2.

    How would you make it from the 2nd responsive column?

    Thank you.

    Reply

  9. Muchas gracias por tan valioso artículo. Me ayudo a resolver un problema en asp.net mvc 4. Saludos desde Colombia.

    Reply

  11. Hi, Firstly thank you this issue.
    I have a problem 🙁 . 

    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function () {
       $($.fn.dataTable.tables(true)).DataTable()
      .scroller.measure();
    });

    Console:

    Uncaught TypeError: Cannot read property 'measure' of undefined
    Reply

  12. I have similar issue like the problem is dataTable being hidden on load, and because scroll header is appending 100%, dataTable columns are not aligned correctly.
    I used, 

    scrollCollapse : true,
scrollY:'50vh'

    I have tried the below, but no luck.

    columns.adjust();
responsive.recalc();
scroller.measure();

    please let me, if any suggestion.

    Reply

  13. Thanks for the code. I was stuck ‘Responsive extension – Incorrect breakpoints’ for months. This post just solved my problem.

    Reply

  14. You saved my life! That’s all I needed doing in my code. I was struggling to find a solution for that and you clearly showed me. thank you. Greetings from Brazil!

    Reply

  15. in my dataTable code first column width is very large and there is scroller at bottom.But i want the table fit to display screen without any scroller and avoid too much width of first column

    Reply

  17. Hi Micheal,

    I have a problem with fixed column, it is duplicating the columns that are declared as fixed in the datatable initialization. Any idea what could be the issue.

    Reply

Leave a Reply

(optional)

This site uses Akismet to reduce spam. Learn how your comment data is processed.