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.