CODEWITHSUNDEEP
javascriptdatatables
DShultz
DShultz

Reputation: 4541

Datatables - horizontal scrolling for only certain columns

The scrollX option in Datatables allows the user to scroll the grid horizontally - however, in my table, I am needing to keep the first two columns in place, but allow the next x columns scroll horizontally. I'm not seeing any good examples of how to do this.

Example: https://datatables.net/examples/basic_init/scroll_x.html

Upvotes: 1

Views: 2114

Answers (1)

Manuel Otto
Manuel Otto

Reputation: 6540

You could achieve this by changing the relative position of each cell based on the scrollLeft value.

$('.dataTables_scrollBody').scroll(function (){
    var cols = 2 // how many columns should be fixed
    var container = $(this)
    var offset = container.scrollLeft()
    container.add(container.prev()).find('tr').each(function (index,row){ // .add(container.prev()) to include the header
        $(row).find('td, th').each(function (index,cell){
            if(index>=cols) return
            $(cell).css({position:'relative',left:offset+'px'})
        })
    })
})

Upvotes: 2

Related Questions