How to correctly initialize ColResize and ColPin for this scenario?

[marianopeck]

Hi,

I note there is a difference in how I initialize dataTable (lowercase function) and yours DataTable (uppercase). I cannot find a way to correctly initialize for everything I need.

Currently, I am doing this:

    $(document).ready(function() { 

                    // this is so that the table does not use all the height space and hence the horizontal scroll looks outside the empty space.
                    // By default, we make the table a max height of 80% of the windows.

                     var oTable = $(''#', tableID asString ,''').dataTable( {
              "scrollY":  ( 0.82 * $(window).height() ),
            "scrollX": "100%",
            "scrollCollapse": true,
            "paginate": false,
    "stateSave": false,
    "stateDuration": -1,
    "destroy": true,
    "filter": false,
    "sort": false,
    "autoWidth": false,
    // J: ColResize.
    // I: ColPin. It needs ColReorder. When I add it, body and header are shifted until I pin 1 column.
    // R: ColReorder
    "dom": "JPt",
    // this is in case I want to use the paginate for the Scroller
    "iDisplayLength": -1

        } );

        // Check if body width is higher than window width :)
        if ( oTable.width() > $(".tableContainer").width() ) {

    var colPinOpts = { 
          fixedColumns: { 
            leftColumns: 1, 
            rightColumns: 0, 
            heightMatch: ''auto''
          }
        };

    oTable.colPin(colPinOpts);

        $(document).on({
        mouseenter: function () {
            trIndex = $(this).index()+1;
            $("table.dataTable").each(function(index) {
                $(this).find("tr:eq("+trIndex+")").each(function(index) {
                  $(this).find("td").addClass("thover");

                 });
            });
        },             
        mouseleave: function () {
            trIndex = $(this).index()+1;
            $("table.dataTable").each(function(index) {
                $(this).find("tr:eq("+trIndex+")").each(function(index) {
                  $(this).find("td").removeClass("thover");
                 });             
            });                
        }
    }, ".dataTables_wrapper tr");   

        };

                    });

That is:

1) I first create dataTable for which I want ColResize and ColPin enabled. 2) Then I check if the width of the resulting table is bigger that my containter. If true, then I want to automatically fix the left most column and the top most column, while of course letting the possibility to the user to unpin those or pin more. 3) All the last mouseenter and mouseleave is not necessary but this is just to replicate the hover over the fixed columns (thought someone would find this useful).

Of course, if I try the above it doesnt work because "oTable.colPin is not a function". Note that I am a JS and CSS newbie..so I may be doing something wrong.

Thanks for any help!

[maca88]

Here is a correct initialization with ColResize and ColPin with custom settings: http://live.datatables.net/IroN/48

[marianopeck]

Hi Thanks for the example. However, I would like to add the default pinned columns (say 1 left and one right) ONLY when the table width is bigger than my container. So I don't know how to do that dynamically and that's what my attempt above tried to do. Any idea how can I do that?

Thanks!

[marianopeck]

OK, I found a way to do it:

    $(document).ready(function() { 

                        // this is so that the table does not use all the height space and hence the horizontal scroll looks outside the empty space.
                        // By default, we make the table a max height of 80% of the windows.

                         var oTable = $(''#example'').DataTable( {
                  "scrollY":  ( 0.82 * $(window).height() ),
                "scrollX": "100%",
                "scrollCollapse": true,
                "paginate": false,
        "stateSave": false,
        "stateDuration": -1,
        "destroy": true,
        "filter": false,
        "sort": false,
        "autoWidth": false,
        // J: ColResize.
        // I: ColPin. It needs ColReorder. When I add it, body and header are shifted until I pin 1 column.
        // R: ColReorder
        "dom": "Rt",
        // this is in case I want to use the paginate for the Scroller
        "iDisplayLength": -1

            } );

            // Check if body width is higher than window width :)
            if ( $(''#example'').width() > $(".tableContainer").width() ) {

        var colPinOpts = { 
              fixedColumns: { 
                leftColumns: 1, 
                rightColumns: 1, 
                heightMatch: ''auto''
              }
            };

        oTable.colPin(colPinOpts);

            $(document).on({
            mouseenter: function () {
                trIndex = $(this).index()+1;
                $("table.dataTable").each(function(index) {
                    $(this).find("tr:eq("+trIndex+")").each(function(index) {
                      $(this).find("td").addClass("thover");

                     });
                });

[maca88]

I did it in a slightly different way: http://live.datatables.net/IroN/51/edit I will add the rePin function in the core. This exmaple will work with the stateSave, so when the table will be resized to a bigger size that the parent container, the rePin function will pin only the first and the last column.

[marianopeck]

Cool! Thank you!

[marianopeck]

BTW...did you know that you cannot click in the input fields of the header anymore? The hack is there but it doesn't seem to work.

[marianopeck]

Sorry, forget what I said...I tried again getting last version and it worked. It is a pity that ColReorder doesn't have this fixed as well :(

[maca88]

I saw.. this is because of ColReorder calling the preventDefault function on mousedown event. I'm gonna try to fix that in ColResize so that preventDefault will not be called. I'll post here when a patch will be done to the ColResize.

[marianopeck]

Thanks! This is appreciated!