Column Headers not aligned after expanding row.

Column Headers not aligned after expanding row.

craig91craig91 Posts: 3Questions: 1Answers: 0

I have my datatable setup like below. As you can see it has a fixed height with scrolling when there are enough rows that it is required. My issue is that when no row is expanded there is no scroll Y (veritcal) scroller visible as there aren't enough rows that it is required. Then after expanding the row the scroll bar is then displayed, taking up some space to the right of the table which causes the inner table to become a bit smaller width wise, but the headers do not adjust. I even tried to redraw them in the row expand click event. Let me know if you have any ideas. Thanks in advance!

var table = $('#main_table ').DataTable({
              scrollY:        '60vh',
              scrollCollapse: true,
              scrollX: true,
              paging:         false,
                            "columns": [
                                            "className": 'details-control',
                                            "orderable": false,
                                            "data": null,
                                            "defaultContent": '',
                                            "render": function () {
                                                    return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                                    { "data": "column1" },
                                    { "data": "column2" },
                                    { "data": "column3" },
                                    { "data": "column4" },
                                    { "data": "column5" },
                                    { "data": "column6" }
                            "order": [[1, 'desc']],

                    // Add event listener for opening and closing details
                    $('#main_table tbody').on('click', 'td.details-control', function () {
                            var tr = $(this).closest('tr');
                            var tdi = tr.find("i.fa");
                            var row = table.row(tr);

                            if (row.child.isShown()) {
                                    // This row is already open - close it
                            else {
                                    // Open this row

              $($.fn.dataTable.tables( true ) ).DataTable().columns.adjust().draw();

This question has an accepted answers - jump to answer


  • colincolin Posts: 6,245Questions: 0Answers: 1,073

    Hi @craig91 ,

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.



  • craig91craig91 Posts: 3Questions: 1Answers: 0

    Sorry about that.

    Here is an example. Make sure you size the table window so that there is no vertical scroll bar originally, but when you expand the row it is then tall enough so the scrollbar is visible. You should see the columns not align with the headers.


  • allanallan Posts: 50,577Questions: 1Answers: 7,530 Site admin
    Answer ✓

    I honestly don't know why calling columns.adjust() isn't working there - I'll dig into that, but as a workaround for the moment, call:




  • craig91craig91 Posts: 3Questions: 1Answers: 0

    Thanks Allan! I did find it odd that resizing the window fixed it but the manual call did not. That's a good work around though, thanks for a solution!

Sign In or Register to comment.