Scroller and Fixed Column Integration not working

depgrid

Hi ,

I am using scroller and fixed columns. First column is not fixed. When I scroll horizontally , the data in first column is moving left.

here is my code.
JS --

   var dt = $('#dtGrid').DataTable({
            data: glaccounts,
            destroy: true,
        //   responsive: true,
           //  fixedColumns:{  heightMatch:'auto',leftColumns:2} ,
            scrollX: true,
           scrollY: '50vh',    
            scrollCollapse: true,
            scroller: true,
             deferRender: true, 
            columns: [
                { "data": "GLAcct", title: "GL Acct. No" },
                { "data": "Borough", title: "Borough" },
                { "data": "GLDescription", title: "GL Description" },
                {
                    "data": "BeginBalance", title: "Begin Balance"
                    ,"render": function (data, type, full, meta) { return type === 'display' ? '$' + parseFloat(data).toLocaleString('en') : data; }
                    , className: "dtColAlign"
                },
                {
                    "data": "TodaysDebits", title: "Today Debits", "render": function (data, type, full, meta) { return type === 'display' ? '$' + parseFloat(data).toLocaleString('en') : data; }
                  , className: "dtColAlign"
                },
                {
                    "data": "TodaysCredits", title: "Today Credits", "render": function (data, type, full, meta) { return type === 'display' ? '$' + parseFloat(data).toLocaleString('en') : data; }
                  , className: "dtColAlign"
                },
                {
                    "data": "CurrentBalance", title: "Current Balance", "render": function (data, type, full, meta) { return type === 'display' ? '$' + parseFloat(data).toLocaleString('en') : data; }
                  , className: "dtColAlign"
                },
                { "data": "DateLastTran", title: "Date Tran" }
               
            ]
        });

         //     new $.fn.dataTable.FixedHeader(dt);
        new $.fn.dataTable.FixedColumns(dt);

HTML ---

   ```       
            <div class="dataTables_wrapper">
       <table id="dtGrid" class="table table-striped table-hover table-bordered nowrap" cellspacing="0" width="100%"></table>
                </div>

```

leonardharley

I am having exactly the same issue but have narrowed it down to something related to the scrollY value.

In other words when the scrollY value is set such that the vertical scroll bar is present then it fixes the column correctly - however if the table is such that due to the number of rows present the vertical scrollbar is not shown then the fixed column (in my case on the left) does not stay fixed and scrolls along with the rest of the table...