How to make a responsive DataTable

I am looking for a best practice on how to make a responsive DataTable.

I have a website that uses bootstrap. I have placed the DataTable inside <div class="container py-4">, which is a responsible container that sizes itself depending on the viewport. Everything works well until the viewport is too small (i.e. on mobile). At that point the column widths get too small and it is not possible to read the data inside the DataTable anymore.

I have played around with the width and sizing attributes for both TableColumn and DataTable, but I got nowhere. As of now my TableColumns dont have any width or sizing atributes. The datatable uses ```width=600, height=300, sizing_mode=‘scale_width’``.

If I set a min width the table will stop shrinking as the view port reduces, and it will endup too big (bigger than the size header, footer, navbar, etc). What I wanted was for a scrolling horizontal bar to appear after a min width limit.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.