Adding features to tables

[louismaximepiton]

Need a backport to v4 ?

Added features :

• Striped rows in tbody Netlify
• Sticky headers Netlify -> Should wait for Add .sticky-thead for sticky table headers on scroll twbs/bootstrap#36125 ?
• Accessibility Netlify

Fixed :

• Hover feature Netlify

[louismaximepiton]

Added specs that are not in Zeplin at the moment.

[Aniort]

hello,
some a11y comments:

• no need to add tabindex="0" on div (content (even table) with scrollbar are keyboard usable
• we must warn boosted users that they don't always need role="region" and" aria-label="xxx" if there is only one table as main content of the page, or if tables are just considered as a normal, common content. But if they are important when using the application, it could be important f"or some users to identify them specifically with a role=region and an aria-label to be easily acceded
• and colspan are not an a11y barrier for screenreaders but, if not definitely needed, shouldn't be used to avoid misunderstanding

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	b509531
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/63a2d5b20b77f000088059e7
😎 Deploy Preview	https://deploy-preview-859--boosted.netlify.app/docs/5.2/content/tables
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Franco-Riccitelli]

Here is my design review for Tables.

Striped columns:

• Striped columns do not exist in the Web UI Kit.

Row Selection:

• The row is selected by clicking on the checkbox.
• In the example, the row does not select or deselect when clicking the checkbox.
• Same comment for the 'With icons or thumbnails' example.
• The grey on the selected state (in the Row selection example) should be #DDDDDD. In the example it's #DEDEDE.

Table group dividers:

• Table group dividers are not included in the Web UI Kit.

Nested tables:

• I think this table should use the 'Expanding Row' de#cluded in the UI kit.
• The example should be on a black or white background.
• Do not nest a white table in a black table.
• The row that is expanded should be in the selected state. Refer to UI Kit example.
  Link: https://system.design.orange.com/0c1af118d/p/21b04a-data-tables

[louismaximepiton]

Hi @Franco-Riccitelli,

First of all, thanks a lot for the time you invested into this review !

No changes

To give you feedback on what you mentionned, we'll add some danger callouts on Striped columns, Table group dividers and Nesting. Indeed, it seems that these aren't in the DSM and as you said, there's an alternative to the one people might want to use.

Changes

On the subject of Row selection:

• The selecting feature is not implemented yet and will be released as an example. We already have a callout on this so I didn't change anything. Same for the icons and thumbnails section.
• I changed the gray that was a mistake of mine.

Feedback

If you're fine with the changes, could you please write a seal of approval ?

[Franco-Riccitelli]

Hi @louismaximepiton

Those changes are all good. Thanks.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[julien-deramond]

LGTM! 🚀