How to interactively resize a fixed column in DataTables's FixedColumns plugin

Question

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?

Solution 1

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.

Solution 2

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

Solution 3

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

Comments

[Danf]

Sorry. But what I meant is to let user manually resize the first column interactively. Not the programmer do it under the hood.

[Gyrocode.com]

ColReorderWithResize.js has now been refactored, see jQuery DataTables: Column reordering and resizing and github.com/jeffreydwalter/ColReorderWithResize.

[davidkonrad]

@Gyrocode.com Nice info; it looks good, just inspected the source, I like when people try to hold the style and conventions more or less similar to Alan Jardines code. Produce an answer with that new plugin and you are guaranteed at least one upvote :) BTW, what about the colspan / rowspan example? It could be the canonical answer for dupe hammering all those questions

[Gyrocode.com]

I didn't forget about colspan/rowspan example and planning to work on it next. I will experiment with ColReorderWithResize and FixedColumn plug-ins and will either update the article or post the solution here or both.