jQuery DataTables: Column width issues with Bootstrap tabs

Below is a list of the most common issues occurring with tables that are hidden initially.

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

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

Related posts

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/

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)