Solution - Scrollable (vertical and horizontal) responsive datatables via flexbox

holdencreative

Hi Folks,

As you may know, dataTables includes a number of configuration options for vertical and horizontal scrolling - see - [https://datatables.net/examples/basic_init/scroll_xy.html].

Due to traditional CSS limitations, DataTables 1.10.5 vertical scroll (scroll-y) configuration requires an explicit height in pixels, which breaks a responsive layout. I've created a solution here:

http://codepen.io/holdencreative/pen/ZYqoMg

To make the pen easier to follow I have marked out some codepen-only SCSS/CSS rules and used HTML5 data-variable elements to produce the dataTable configurations more obviously.

I also significantly simplified the default dataTables-included CSS.

One thing to note is that the th and td elements should maintain a "content-box" box-sizing. There are a lot of posts around the web where people are having trouble with column/row misalignments when scroll-y is enabled... the box-sizing rule is required for the JS calculation of header <th> widths to be accurate.

I hope this is useful to you!

Best,

Andrew H.

allan

Absolutely superb - thanks for sharing this with us! I've been thinking about writing a blog post about resizing the scrolling viewport recently, would you mind if I included aspects of this (with appropriate credit of course!)?

Due to the use of flex-box it isn't something I can see making its way into DataTables core anytime soon unfortunately, due to the lack of browser support in older browsers. IE6+ is currently supported and DataTables 1.11 will support IE8+. However, there is no reason why there shouldn't be a shim available for folks who have the luxury of targeting new browsers!

Allan

holdencreative

Thanks Allan, happy to help and thanks for DataTables!

I can certainly understand and agree on on the issue of browser compatibility. I (may) be able to provide a set of rules which support the existing wide compatibility but also allow for progressive enhancement... I'll follow up on this point in a couple weeks.

@ Including this post - absolutely, do whatever you like with it. :)

Best,
Andrew H.