If scrollY is used then table column width is getting increased for any operation on Datatable

Parikshit_Lex

Here is my table intilalization part:

$('#table_id').dataTable({
"paging": false,
"scrollY":"550px",
"scrollCollapse": true,
"info": false,
"searching": false,
"sDom": "Rlfrtip",
"aaSorting": [],
columnDefs: [
{type: 'non-empty-string', targets: 0, bSortable: false},
{type: 'non-empty-string', targets: 1},
{type: 'non-empty-string', targets: 2, bSortable: false},
{type: 'non-empty-string', targets: 3, bSortable: false},
{type: 'non-empty-string', targets: 4, bSortable: false},
{type: 'non-empty-string', targets: 5 }
],
"fnDrawCallback": function(){
if(layoutHomeScreen.dataTableApi == null){
layoutHomeScreen.dataTableApi = $('#table_id').DataTable();
}

        },
        "createdRow": function ( row, data, index ) {
            console.log("Inside createdRow");
            $(row).attr({id: 'grid_row_' + (layoutHomeScreen.rowCount)})
            $(row).addClass('decoratetr');
            $('td', row).eq(0).addClass('decoratetd');
            $('td', row).eq(2).addClass('decoratetd');
            $('td', row).eq(4).addClass('decoratetd');
            $('td', row).eq(0).attr({id: 'grid_row_' + (layoutHomeScreen.rowCount) + '_column_ip_icon'});
            $('td', row).eq(1).attr({id: 'grid_row_' + (layoutHomeScreen.rowCount) + '_column_ip'});
            $('td', row).eq(2).attr({id: 'grid_row_' + (layoutHomeScreen.rowCount) + '_column_model_icon'});
            $('td', row).eq(3).attr({id: 'grid_row_' + (layoutHomeScreen.rowCount) + '_column_model'});
            $('td', row).eq(4).attr({id: 'grid_row_' + (layoutHomeScreen.rowCount) + '_column_firmware_icon'});
            $('td', row).eq(5).attr({id: 'grid_row_' + (layoutHomeScreen.rowCount) + '_column_firmware'});
            layoutHomeScreen.rowCount++;
        }
    });

Now for any kind of update on the cell data by using the cell.data('DATA').draw() method the column width keeps increasing for each operation.

Could you please help us out here?