CODEWITHSUNDEEP
cssdatatablehorizontal-scrollingvertical-scrollingfixed-header-tables
Ranoy
Ranoy

Reputation: 108

Datatable with fixed header, horizontal and vertical scrolling

I am looking for data-table html structure with fixed header, horizontal and vertical scrolling. I am working on a already developed datatable widget . I found this example https://datatables.net/examples/basic_init/scroll_xy.html where html structure is similar to what I have in my widget. I want to ask in the above example how header scrolls even though the scroll is on body of table .If it is being done by JavaScript still none of the header css properties change when we scroll it horizontally.

Upvotes: 2

Views: 9178

Answers (2)

Jamess
Jamess

Reputation: 11

Add this script to call your table id

$(document).ready(function () {
$('#tableid').DataTable({
"scrollX": true,
"scrollY": 300,
"paging": false,
});
$('.dataTables_length').addClass('bs-select');
});

for more information: https://mdbootstrap.com/docs/jquery/tables/scroll/

Upvotes: 1

tmndungu
tmndungu

Reputation: 358

My experience is if you use the example above exactly as it is, ie the same table class, it should work but the moment you introduce other bootstrap classes, maybe you want to add data export to excel feature to the table, things get complicated. A 'one fits all' solution is hard to find, your solution depends on the additional classes/CSS.

Upvotes: 0

Related Questions