CompareTable component is currently implemented using HTML<table>
tags and hardcoded styles for colors, spacing, borders etc, missing HTML5 table semantics causing accessiblity concerns.
examples:
|
border: 1px solid rgb(190, 190, 190); |
Question:
For the spreadsheet
display format we could achieve the UX using OOTB Table component as well. Is there any specific reason to not use OOTB Table, any challenges in particular?
Suggestion:
OOTB Table component supports column renderers
and could be used to render Radio buttons within table cells. We can also easily align column data left | center | right
as needed. This OOTB component does takes care of proper HTML table semantics along with accessibility.
Here are the screenshots of OOTB Table achieving similar results.
Current implementation
![custom-table](https://private-user-images.githubusercontent.com/11829883/300046637-99b01d10-3310-4bbf-ae22-26ad44202ae1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyMjQ1NTUsIm5iZiI6MTcyMTIyNDI1NSwicGF0aCI6Ii8xMTgyOTg4My8zMDAwNDY2MzctOTliMDFkMTAtMzMxMC00YmJmLWFlMjItMjZhZDQ0MjAyYWUxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE3VDEzNTA1NVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTg0MGUzM2Q1MWYyN2FjZjI4M2YzZTUwNmQwYzgyMWQ1OGE4ZWQxY2RjNTFiZWUxZDQ0ZjFmNDhhMTM2MmM5MGUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.M6R1eQ6FNLWzv7BMsdg6s7DSz0XrhIIMkbWiAtsICmk)
Using OOTB Table
![cosmos-table](https://private-user-images.githubusercontent.com/11829883/300046617-d596a8f7-8636-4714-9de5-e39792b7e8c1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyMjQ1NTUsIm5iZiI6MTcyMTIyNDI1NSwicGF0aCI6Ii8xMTgyOTg4My8zMDAwNDY2MTctZDU5NmE4ZjctODYzNi00NzE0LTlkZTUtZTM5NzkyYjdlOGMxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE3VDEzNTA1NVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFhYzNiODM4MzQ4Y2NkOWQ2Y2Y2YmNmNjVkZDIzYmU2OWQ5Y2M0YmExZmQxNTFmYmEwN2JkYTQ5OTc4Y2EyZDYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.AzDon9houd1PLaZvPaP2BTV0-g-x-NrUsZysDuFOohM)
OOTB Table Limitations:
- It doesn't support table body cells to be rendered as
th
. It renders every cell as td
implicitely.
- Heading is aligned to
left
always. Although this can be overridden in Styles if need be.
- Cannot be used in complex case. i.e.
displayFormat = 'financial-report'
@ricmars / @niallriddell Please suggest should we replace the implementation with OOTB Table or fix the current code to use Theme tokens, Table semantics and accessibility guidelines.