8725 responsive tables

[isaacchansky]

Any PRs being created needs a changelog.txt file before being merged into dev. See: Change Log Instructions

Description

This changes the default behavior of tables to be responsive in nature and depending on the table data and how that impacts width/height compared with available height/width of device, enables scrolling/sticky component behavior

Related Issue / Ticket

https://jira.mass.gov/browse/DP-8725

Steps to Test

1. View the table on http://localhost:3000/patterns/05-pages-howto/05-pages-howto.html
2. On Desktop, ensure that:
   1. the header row sticks to the top of the page as you scroll down
   2. the scrollbar controls appear at the bottom as you scroll down
   3. can use the native horizontal scroll (i.e horizontally swiping a trackpad) within the table
   4. clicking on the left arrow scrolls left a cell-width, or nothing if you're already scrolled all the way left. likewise for the right arrow
   5. clicking in the empty space of the scrollbar (the white area within the scrollbar) scrolls you in that direction
   6. clicking and dragging the scrollbar (blue part) scrolls you the direction you drag in.
   7. that as you start to scroll down past the table the scrollbar stops sticking and becomes static
   8. that as you scroll fully beyond the table, the header stops sticking as well.
   9. that the "tell use what you think" button is removed while the table is in view
3. On mobile, ensure all that all desktop functionality is present, and:
   1. that the table header rows do not overlap with/conflict with other sticky 'bars' at the top (menu and jump links)

Screenshots

Use something like licecap to capture gifs to demonstrate behaviors.

Additional Notes:

Anything else to add?

Impacted Areas in Application

• atoms/tables

@todo

• I need to test with more variations of tables, and specifically malformed or otherwise odd table situations that we currently have in production.

Today I learned...

Improving accessibility of scrollable regions: https://developer.paciellogroup.com/blog/2016/02/short-note-on-improving-usability-of-scrollable-regions/