Establish a table pattern and Table component

[lyzadanger]

Create a common table pattern and Table component based on the Table component and its styling from the lms project. This work is needed to smooth out some UI issues in the LMS project, but a generic and flexible table pattern seems useful in general.

The Table component should have as near an API and implementation as possible to the current Table component in LMS. The table pattern should be based on the existing component styling, but adapted per conventions.

By implementing this in a common way, we can pull out any non-table-related concerns from the styling, bring it in line with other patterns, and be able to see it in play in the pattern library with different content and in various contexts.

An area of focus is on adaptive height constraints and scrolling within overflow/scrolling containers, especially in Dialog contexts.

An aside on position:sticky, scrolling contexts, etc.

Table’s current styling provides some headers that are position:sticky such that they will “stick” to the top of the nearest ancestor scrolling element. However, the current Table implementation also wraps the entire <table> element with a wrapper <div> that is set overflow:auto. That defines the scrolling context for the sticky headers—but it’s not the correct scrolling context for certain use cases.

For example, we have a use case in which a Table is used within a Modal dialog, but is not the only content in the modal. The modal itself wants to assert a content area that is overflow:auto (to bound the modal content’s height), and the Table should scroll itself—and sticky-position its headers—relative to that scrolling context. But unfortunately its own overflow:auto wrapper gets in the way (again: position:sticky will position relative to the nearest scrolling ancestor).

My recommendation is to remove the wrapping div with the overflow rule, and instead allow parent components and elements to define any scrolling context.

Sub-tasks

• Establish a scrollbox pattern
• Establish a table pattern
• Establish a Scrollbox component
• Establish a Table shared component