Wrong column size when I use colspan in first row

proteos_engineering

Hello everybody,
I have a problem with version 2.0.0, to illustrate it I took an example from this website. In particular, by enabling scroll datatables, the size of the first column is incorrect. I verified that if the first row has a "colspan" attribute equal to 3, datatables forces the sum of the first three columns into the first column. The same error occurs with the "rowGroup" plugin only if the first row has the "colspan" attribute. Below example:

var dataSet = [
    ['Tiger Nixon', 'System Architect', 'Edinburgh', '5421', '2011/04/25', '$320,800'],
    ['Garrett Winters', 'Accountant', 'Tokyo', '8422', '2011/07/25', '$170,750'],
    ['Ashton Cox', 'Junior Technical Author', 'San Francisco', '1562', '2009/01/12', '$86,000'],
    ['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '6224', '2012/03/29', '$433,060'],
    ['Airi Satou', 'Accountant', 'Tokyo', '5407', '2008/11/28', '$162,700'],
    ['Brielle Williamson', 'Integration Specialist', 'New York', '4804', '2012/12/02', '$372,000'],
    ['Herrod Chandler', 'Sales Assistant', 'San Francisco', '9608', '2012/08/06', '$137,500'],
    ['Rhona Davidson', 'Integration Specialist', 'Tokyo', '6200', '2010/10/14', '$327,900'],
    ['Colleen Hurst', 'Javascript Developer', 'San Francisco', '2360', '2009/09/15', '$205,500'],
    ['Sonya Frost', 'Software Engineer', 'Edinburgh', '1667', '2008/12/13', '$103,600'],
    ['Jena Gaines', 'Office Manager', 'London', '3814', '2008/12/19', '$90,560'],
    ['Quinn Flynn', 'Support Lead', 'Edinburgh', '9497', '2013/03/03', '$342,000'],
    ['Charde Marshall', 'Regional Director', 'San Francisco', '6741', '2008/10/16', '$470,600'],
    ['Haley Kennedy', 'Senior Marketing Designer', 'London', '3597', '2012/12/18', '$313,500'],
    ['Tatyana Fitzpatrick', 'Regional Director', 'London', '1965', '2010/03/17', '$385,750'],
    ['Michael Silva', 'Marketing Designer', 'London', '1581', '2012/11/27', '$198,500'],
    ['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', '3059', '2010/06/09', '$725,000'],
    ['Gloria Little', 'Systems Administrator', 'New York', '1721', '2009/04/10', '$237,500'],
    ['Bradley Greer', 'Software Engineer', 'London', '2558', '2012/10/13', '$132,000'],
    ['Dai Rios', 'Personnel Lead', 'Edinburgh', '2290', '2012/09/26', '$217,500'],
    ['Jenette Caldwell', 'Development Lead', 'New York', '1937', '2011/09/03', '$345,000'],
    ['Yuri Berry', 'Chief Marketing Officer (CMO)', 'New York', '6154', '2009/06/25', '$675,000'],
    ['Caesar Vance', 'Pre-Sales Support', 'New York', '8330', '2011/12/12', '$106,450'],
    ['Doris Wilder', 'Sales Assistant', 'Sydney', '3023', '2010/09/20', '$85,600'],
    ['Angelica Ramos', 'Chief Executive Officer (CEO)', 'London', '5797', '2009/10/09', '$1,200,000'],
    ['Gavin Joyce', 'Developer', 'Edinburgh', '8822', '2010/12/22', '$92,575'],
    ['Jennifer Chang', 'Regional Director', 'Singapore', '9239', '2010/11/14', '$357,650'],
    ['Brenden Wagner', 'Software Engineer', 'San Francisco', '1314', '2011/06/07', '$206,850'],
    ['Fiona Green', 'Chief Operating Officer (COO)', 'San Francisco', '2947', '2010/03/11', '$850,000'],
    ['Shou Itou', 'Regional Marketing', 'Tokyo', '8899', '2011/08/14', '$163,000'],
    ['Michelle House', 'Integration Specialist', 'Sydney', '2769', '2011/06/02', '$95,400'],
    ['Suki Burks', 'Developer', 'London', '6832', '2009/10/22', '$114,500'],
    ['Prescott Bartlett', 'Technical Author', 'London', '3606', '2011/05/07', '$145,000'],
    ['Gavin Cortez', 'Team Leader', 'San Francisco', '2860', '2008/10/26', '$235,500'],
    ['Martena Mccray', 'Post-Sales support', 'Edinburgh', '8240', '2011/03/09', '$324,050'],
    ['Unity Butler', 'Marketing Designer', 'San Francisco', '5384', '2009/12/09', '$85,675'],
];

$('#table-data').DataTable({
    columns: [
        { title: 'Name' },
        { title: 'Position' },
        { title: 'Office' },
        { title: 'Extn.' },
        { title: 'Start date' },
        { title: 'Salary' }
    ],
    data: dataSet,
    paging: false,
    scrollCollapse: true,
    scrollY: '200px',
    order: [[2, 'asc']],
    drawCallback: function (settings) {
        var api = this.api();
        var rows = api.rows({ page: 'current' }).nodes();
        var last = null;

        api.column(2, { page: 'current' })
            .data()
            .each(function (group, i) {
                if (last !== group) {
                    $(rows)
                        .eq(i)
                        .before(
                            '<tr class="group"><td colspan="5">' +
                            group +
                            '</td></tr>'
                        );

                    last = group;
                }
            });
    }
});

Thanks for your help.

Norberto.

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

allan

Hi Norberto,

Yes, I've hit upon this issue in another thread or two as well. It looks like an error in the browser engines - I need to do some work to write up a test case and submit it, as it does appear to be a colspan in the first row of the table causing the problem, regardless of DataTables.

Apologies I don't have a better answer at the moment.

Allan

kthorngren

I built a test case for you.
https://live.datatables.net/maqekume/1/edit

I changed colspan from 5 to 6 to match the number of columns in the table. It seems to work correctly.

<tr class="group"><td colspan="6">Edinburgh</td></tr>

Please update the test case to show the issue.

Kevin

proteos_engineering

Hi Kthorngren,
from your example you have to remove the TH tags so that the datatables build the THEAD and the TBODY. This way you will see the error even if the colspan is 6. Thanks

kthorngren

I did that and it still looks correct:
https://live.datatables.net/maqekume/3/edit

      <table id="table-data" class="display nowrap" width="100%">
      </table>

<tr class="group"><td colspan="6">Edinburgh</td></tr>

Maybe you can update the example to show the issue.

Kevin

kthorngren

Here is that same example with RowGroup:
https://live.datatables.net/jipifugi/1/edit

However Allan did mention he's seen something similar. Possibly this thread. When you insepct your page do you see a colgroup element after the table tag?

Kevin

proteos_engineering

Hi Kevin, the table in question is very complex and there is a colgroup with the dimensions in pixels. However, while waiting for a more elegant solution, I solved it like this:

$('#table-data').DataTable({
    columns: [
        { title: 'Name' },
        { title: 'Position' },
        { title: 'Office' },
        { title: 'Extn.' },
        { title: 'Start date' },
        { title: 'Salary' }
    ],
    data: dataSet,
    paging: false,
    scrollCollapse: false,
    scrollY: '200px',
    order: [[2, 'asc']],
    drawCallback: function (settings) {

        var api = this.api();
        var rows = api.rows({ page: 'current' }).nodes();
        **/* temporary */
        var ncols = api.context[0].aoColumns.filter(function (value) { return value.bVisible; }).length;
        $(rows).eq(0).before('<tr class="d-none">' + Array(ncols).fill('<td></td>').join('') + '</tr>');
        /* end temporary */**
        var last = null;
        api.column(2, { page: 'current' })
            .data()
            .each(function (group, i) {
                if (last !== group) {
                    $(rows)
                        .eq(i)
                        .before(
                            '<tr class="group"><td>A</td><td colspan="5">' +
                            group +
                            '</td></tr>'
                        );

                    last = group;
                }
            });
    }
});

proteos_engineering

Hi Kevin, I wrote in Italian by mistake.

KukyRoad

Good day, everyone!

I spent a lot of hours trying to find a solution to my problem and even though this looked helpful it did not do it for me.

Ends up the solution was as simple as adding this line of code to the html element linked to the DataTable object:

$('#yourTableElementIdGoesHere').columns.adjust().draw();

Hopefully this helps someone else.

Reference to the official site: https://datatables.net/reference/api/columns.adjust()

Take care, and happy coding!

KukyRoad

You need to run this line!

$('#yourTableElementIdGoesHere').DataTable().columns.adjust().draw();