ScrollY: misaligned data table header . All the columns Header is not showed against its data

polachan

I am using  the datatable to list the  record  and  after adding the  comment column on the datatable  and after using ScrollY , all alignment  going wrong . The header of the column is not being showed against its data .  It would be very very appreciated somebody can help me to fix this error. I am also using rowgroup. This is the problem ScrollY. If I remove the scroll, the  datatable will not get enough height to show the record and there is no verticall scrollbar.

I also tried to solve be giving  column width for all column ,  still no effect. The customised column width is not taking at the time of listing the records. But when I click  on the column header, the column would be displayed wth column width size.
I have attached the code herewith on the text file . Please can you help how to resolve with suggested code

Please find html view coming
https://drive.google.com/open?id=1bkWIdOVdTGuHdi7UCucxLbmY3uWoVTKR

$('#tblAllApprovedequets').DataTable({
"processing": false,
"ajax": {
"url": "/UniformApproval/GetAllApprovedRequestByEmployeeId?employeeId=" + empId ,
"dataSrc": function (json) {
return JSON.parse(json);
}
},
"columns": [
{ "data": "DepotName" },
{ "data": "EmpName" },
{ "data": "ProductName" },
{ "data": "ProductCode" },
{ "data": "Color" },
{ "data": "Size" },
{ "data": "ApprovedDate" },
{ "data": "OrderedQty" },
{ "data": "Rate" },
{ "data": "Total" },
{ "data": "Comment" }

        ],
        order: [[0, 'asc'], [1, 'asc']],
        rowGroup: {
            dataSrc: ["EmpName", "DepotName"],

            startRender: function (rows, group, level) {

                var total = rows
                    .data()
                    .pluck("Total")
                    .reduce(function (a, b) {
                        return a + b;
                    });

                return $('<tr/>')
                    .append('<td class="td-left" >' + group + '</td>')
                    .append('<td></td>')
                    .append('<td></td>')
                    .append('<td></td>')
                    .append('<td></td>')
                    .append('<td></td>')
                    .append('<td></td>')
                    .append('<td style="font-weight:bold">' + parseFloat(total).toFixed(2) + '</td>')
                    .append('<td></td>');

            }
        },


        "columnDefs": [
            {
                "targets": [1],
                "visible": false
            },
            {
                "targets": [0],
                "visible": false
            },

            {
                "className": "dt-center", "targets": "_all"
            },
            {
                "targets": [8, 9],
                "render": function (data, type, full) {
                    return parseFloat(data).toFixed(2);
                }
            },


        ],
        "pageLength": 40,
        scrollY: "300px",
        scrollX: true,
        paging: false


    });

kthorngren

There are a lot of things that could cause the issue. Without seeing it it will be hard to say but somethings to check:

Make sure to set the table width as in this example:
https://datatables.net/examples/basic_init/flexible_width.html

If the table is hidden when initialized you may need to follow the steps in this example:
https://datatables.net/examples/api/tabs_and_scrolling.html

Could be a CSS issue. If you are using a styling framework like Bootstrap make sure you have the correct files. Use the Download Builder to get the correct files.

If this doesn't help please post a link to your page or a test case so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

There are lots of threads with this type of issue. Maybe one of those will help.

Kevin