Multiple FixedColumns example

b101

Hi there,

I've successfully implemented a Multiple FixedColumn Data Table. Now, I want to adjust the width of the Left (the fixed columns - 2 in my case). This is what my code looks like atm:

$(document).ready(function() {
    var table = $('#articles').DataTable( {
        scrollY:        "750px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        columnDefs: [
    { width: 350, targets: 1 }
  ]
    } );
    new $.fn.dataTable.FixedColumns( table, {
        leftColumns: 2
    } );
} );

I'm not even sure if targets:1 is correct, or if it has to be 2 (since I dont know if it is initialized by 0 or by 1)

However, no matter how much I change the width in columnDefs, the table doesn't change, how can i set the width of the first 2 fixed Columns??

Best regards !
b101

b101

so I've added some attributes and changed the parameter order within columnDefs
It applies the width I set. But its still not working like I want it to work. I didn't explain my problem properly so, I've to add that my Table is dynamic, meaning the User can add another Column by hitting a checkbox. When this happens, the left part (the first 2 columns) get smaller so that the new Column is displayed inside the table. But I would rather want the left part (fixed columns) to stay fixed in width, the right part should also stay fixed in width but it should provide a scroll bar at the bottom.. I actually thought this is how the fixed coulmns were supposed to work, but I guess it only works this way if you cant add new columns to it

this is what my script looks like now

$(document).ready(function() {
    var table = $('#articles').DataTable( {
        scrollY:        "750px",
        scrollX:        false,
        scrollCollapse: true,
        paging:         false,
        searching: false,
        ordering: true,
        orderClasses: true,
        columnDefs: [
    { targets: [0,1],width: '800px', }
  ]
        
    } );
    new $.fn.dataTable.FixedColumns( table, {
        leftColumns: 2,
        
    } );
} );