how to reanchor fixedHeader (or how to change headerOffset)

how to reanchor fixedHeader (or how to change headerOffset)

miljenkomiljenko Posts: 4Questions: 1Answers: 0

I would like to change headerOffset of a DataTable dynamically, but could not find an interface to change it.

Tried disable followed by enable using the 3.0.1-dev but this had not effect on headerOffset.

Note: The reason I want to change the headerOffset is that my header changes height depending on window width (standard or smaller page header - which is bootstrap navbar).

In previous FixedHeader (2.xx) I was able to achieve the effect by instantiating new fixedHeader, but this throws an exception in V3.xx.

Is there any chance to put the headerOffset() available as API in V3.0.1?

PS the documentation on API mentions enable/disable, but those are not available in release FixedHeader V3.0.0

This question has accepted answers - jump to:

Answers

  • brettreynoldsbrettreynolds Posts: 4Questions: 2Answers: 0

    Can you not try something like...

                           fixedHeader: {
                               header: true,
                               headerOffset: $('#top-nav').height(),
                           },
    
  • miljenkomiljenko Posts: 4Questions: 1Answers: 0

    Thanks brett.
    This part would be ok just for the initial setup of the headerOffset.

    Unfortunately it does not helps for changing it dynamically

        $('#example').DataTable({
            fixedHeader: {
                header: true,
                headerOffset: $('#fixed').height()
            }
        });
    
        // some event which should result in new position of tableHeader 
        // due to change in height of page header
        .... (function (e) {
            var table = $('#example').DataTable();
            // DO SOMETHING HERE TO UPDATE fixedHeader.headerOffset
            table.fixedHeader.headerOffset($('#fixed').height());   // apply new value 
            // above fails, as there so no such method to update headerOffset (yet)
    
            table.fixedHeader.adjust();
        });
    

    The example showing what I need to achieve
    https://jsfiddle.net/u4wbzvdb/6/

    Please note that the problem is not how to overlay fixed header over the page header. I would like to adjust it to the edge of the header, no matter what the new height of the page header is.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    There currently is no API to be able to dynamically change the offset. That is something that would need to be added to the code (pull requests welcome :-) ).

    Allan

  • miljenkomiljenko Posts: 4Questions: 1Answers: 0

    Pull request created.

    Test case: based on https://jsfiddle.net/u4wbzvdb/6/ (just need to use the updated version of FixedHeader)

    PS Many thanks for the excellent work on DataTables

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    Awesome - thanks! I've replied to your PR :-)

    Regards,
    Allan

This discussion has been closed.