Scrollable Bootstrap Data Table

Wappler General Need Help
1

I’m trying to create a data table similar to the one in this tutorial but can’t seem to make it work. IS it possible within Wappler to create such a thing?

I have a sortable table that can have over 200 records in it so I’d like a scrollable table with the header stationary.

How can I make this work in Wappler?

Do I add the following code between <script> tags?

$(document).ready(function () {
$('#joborderlist').DataTable({
"scrollY": "200px",
"scrollCollapse": true,
});
$('.dataTables_length').addClass('bs-select');
});
2

yes possible @brad
http://jsfiddle.net/qolami/CrSpu/4/

1 Like
3

Oh! So close! Now I seem to have lost my columns though?

Screen Shot 2020-09-22 at 2.19.10 PM
Screen Shot 2020-09-22 at 2.19.10 PM1476×605 116 KB

4

Anyone get this sorted out? I have tried some things but either get the above results or similar. My tables are inside a class=“container-fluid” if that makes any difference.

Some resources I found:

5

I was able to get very close using this css:

.table-scroll > tbody {
  overflow-y: auto;
}

.table-scroll > tbody, .table-scroll > thead {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: -webkit-box;
}

And then assigning a specific height value to the tbody tag:
image

That could be done in the CSS, but I wanted to use it multiple places with different heights, so chose to do it in the tag directly.

However, I am not quite there. The table headings are misaligned with the columns in the table:

image
image1692×218 21.7 KB

I need someone better at CSS than I am to take a look. Is there a way to fix the headers to align with the columns?
You can see the page live at:
https://cam-testing.azurewebsites.net/customers