When assign scrollY:500, then value shifted from valued columns. after click on any column, working fine.

table = $('#OrderMargin-data-table').DataTable({
data: data.AllData,
colReorder: true,
select: true,
scrollX: true,
scrollY: 430,
"scrollCollapse": true,
deferRender: true,
"searching": false,
autoWidth: false,
"columns": [
{ "title": "Discount", "data": "Discount", "searchable": true, width: '120px', className: "text-right", },
{ "title": "Deduction", "data": "Deduction", "searchable": true, width: '120px', className: "text-right", },
{ "title": "Fuel Cost", "data": "FuelCost", "searchable": true, width: '100px', className: "text-right", },
{ "title": "Gross Margin", "data": "GrossMargin", "searchable": true, width: '120px', className: "text-right", }

                    ],
                    "order": [],
                    dom: '<"datatable-header"fl><"datatable-scroll-lg"t><"datatable-footer"ip>',
                    language: {
                        search: '_INPUT_',
                        lengthMenu: '<span>Show:</span> _MENU_',
                        paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
                    },                           
                    "lengthMenu": [[9, 25, 50, -1], [8, 25, 50, "All"]],
                   
                });

Start with the supplied DataTables configuration and reproduce the issue using colReorder, select, scrollX, and scrollY: 430. Compare the displayed values before and after clicking a column; done means the values remain aligned with their columns without requiring a click.