I have the following table:

<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td>5421</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>

Using this script I can scroll the 2nd columns onward and let 1st column (First name) fixed.

$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false
    } );
    new $.fn.dataTable.FixedColumns( table );
} );

JSFiddle

What I want to do is to manually interactively resize the first column on the fly. How can I achieve that?

I have the following table:

<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td>5421</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>

Using this script I can scroll the 2nd columns onward and let 1st column (First name) fixed.

$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false
    } );
    new $.fn.dataTable.FixedColumns( table );
} );

JSFiddle

What I want to do is to manually interactively resize the first column on the fly. How can I achieve that?

• javascript
• jquery
• html
• datatables

3 Answers 3

There is no native method in FixedColumns API to do this. Instead, set the width through header(), here setting the first column to 200px :

table.tables().header().to$().find('th:eq(0)').css('min-width', '200px');
$(window).trigger('resize');

table.draw() results in double scrollbars (disappearing upon resize though). Somehow FixedColumns is not fully included in a draw() - not even FixedColumns update() does this correct. But triggering resize on the window does the job right.

forked fiddle -> https://jsfiddle.net/k7err1vb/

Update. The meaning of the question changed completely (?)

Well, there once was a great plugin ColReorderWithResize.js, but this works poorly with dataTables 1.10.x. So you could downgrade if the demand for a resizeable fixed column is essential. Apart from the new API and default styling there is not so much difference between 1.9.x and 1.10.x - use 1.9.x myself in a project exactly because of the need of ColReorderWithResize.

Some guy have made a colResize plugin -> https://github.com/Silvacom/colResize that works with 1.10.2 and up. Here used on OP's fiddle :

var table = $('#example').DataTable( {
    dom: 'Zlfrtip',
    //target first column only
    colResize: {
       exclude: [2,3,4,5,6,7]
    },
    ...
})

demo -> https://jsfiddle.net/mhco0xzs/ and it "works" - somehow - but not nearly as smooth as the good old ColReorderWithResize.js. Someone could take the challenge to refactor ColReorderWithResize.js, but I myself have certainly not have time for that at the moment.

You should try using a plugin to add resizable header functionality. You can try using this: http://www.bacubacu.com/colresizable/

The question was asked and answered on StackOverflow.com already here: Resizable table columns with jQuery

I also have problems just like you and I use the following solution.

window.fixedColumns =  new $.fn.dataTable.FixedColumns( table , { leftColumns: 3} );     

//Events occur when changing column width.(paginate, sort , click, ... ) 
// $('.sorting').click.... 
// $('.paginate_button').click....

$('.DTFC_Cloned').width();    
fixedColumns.fnRedrawLayout();

http://datatables.net/docs/FixedColumns/3.0.0/FixedColumns.html#fnRedrawLayout