Add gl-responsive-table component
GitLab has many tables, and a lot of them are responsive. They are not plain <table>s, but instead marked up something like this:
<div>
<div role="row" class="gl-responsive-table-row table-row-header">
<div role="rowheader" class="table-section section-25">
Foo
</div>
<div role="rowheader" class="table-section flex-grow-1">
Bar
</div>
<div role="rowheader" class="table-section section-10">
Qux
</div>
</div>
<div class="gl-responsive-table-row">
<div class="table-section section-25 section-wrap">
<div role="rowheader" class="table-mobile-header">Foo</div>
<div class="table-mobile-content">a foo</div>
</div>
<div class="table-section flex-grow-1">
<div role="rowheader" class="table-mobile-header">Bar</div>
<div class="table-mobile-content">a bar</div>
</div>
<div class="table-section section-10 section-wrap">
<div role="rowheader" class="table-mobile-header">Qux</div>
<div class="table-mobile-content">a qux</div>
</div>
</div>
</div>
That's quite verbose and repetitive, and it's easy to get wrong. It should be encapsulated in a component for easier reusability, discoverability and maintenance.
I would recommend we replace these with GlTable, based on BTable, which is extremely powerful and responsive (in both senses of the word).
Old conclusion
While the rows of these tables tend to get extracted out into feature-specific components, we can almost certainly do better and extract the markup fully into a generic component.
I propose that the new component should be designed to have the same core API as GlTable, so as to make them easily interchangeable. Alternatively, GlTable could gain a new responsive prop which switches to the responsive markup structure.