Data table horizontal scroll best practice

1. How do I make a Datatable scrollable horizontally?
2. Is horizontal scroll good?
3. When would you use a horizontal scroll?
4. How do I fix a table header with horizontal scroll?

How do I make a Datatable scrollable horizontally?

DataTables has the ability to show tables with horizontal scrolling, which is very useful for when you have a wide table, but want to constrain it to a limited horizontal display area. To enable x-scrolling simply set the scrollX parameter to be true .

Is horizontal scroll good?

Horizontal scrolling involves more effort since users typically have to move their mouse pointer to a specifically designated area on the screen and drag (while holding the mouse button) or click. In addition to this, some horizontal scrolling implementations make the design judder and hence impair user experience.

When would you use a horizontal scroll?

Horizontal scrolling is a good option for design portfolios and photography sites where users need to go through multiple images quickly and easily. Navigating vertically in these situations is chaotic and puts a lot of strain on the user.

How do I fix a table header with horizontal scroll?

In order to achieve this, we wrapped the table in a <div> that had its width locked to a specific value (something like 80% of the screen's width). We then added some buttons and a scrolling function that changes the scroll position of the wrapper.