Update Table Component

[michaelmccombie]

We have a couple of upcoming projects that will need a data-table (user-friendly sitemap, the language selector page, careers.mozilla). This component already exists in ProgressUI (https://protocol.mozilla.org/patterns/atoms/typographic.html). It looks like there only a handful of small tweaks to make for the desktop version of this component. The mobile version needs some thought.

Desktop

• 100% width
• Either remove border between rows or make it optional

Mobile

• Make responsive using the "Collapse Rows" method
  https://css-tricks.com/accessible-simple-responsive-tables/

Related Tickets

mozilla/bedrock#5827

[rraue]

What's the status here? it is blocking my language sitemap page.

[alexgibson]

I'm curious if a <table> is actually the most semantic form of markup here. This design looks a lot like a list with a heading to me, rather than somehting that represents tabular data.

Curious if any other front-enders have opinions here? /cc @craigcook @stephaniehobson @amychurchwell

If a <table> isn't best suited here, this could be a case of something that may well only exist on one page, so doesn't need to be a protocol component yet (until we can justify it).

[djst]

Agree <table> seems semantically incorrect. I'd use <ul> since it's a list of languages, not a table.

[stephaniehobson]

Agreed. This is a list.

[alexgibson]

Ok, I'm gonna say that #186 no longer depends on this issue, and move forward with a simple heading / list. Until we have precedence of this particular styling pattern over multiple pages, I don't think it needs to be a component just yet.

@michaelmccombie up to you if you want to keep this issue open or close it, but for the example of the language selector page I don't think we need to update the <table> styles.

[stephaniehobson]

Sounds like the use case this was opened to handle has been covered.