WIP feat(tables): adds react-bootstrap-table and patternfly tables #134
Conversation
|
Shift-Tab seems to be navigating OK for me. |
|
I only just briefly looked at the two, and am happy to review further as needed. I did notice an issue with the cell edit example for react-bootstrap-table where Shift+Tab would not work. That was the only instance of this issue I could find (and I'm not sure if this feature is a requirement for us) For reactabular, none of the actions are keyboard accessible, like pagination or sort, because they are not implemented with semantic html. But I'm also not familiar at all with the level of customization for any of these and if the issues we're seeing are issues we can resolve in our implementation. |
|
@jeff-phillips-18 @jgiardino thanks for the inputs.. The example I was seeing shift tab problems was here where the keyboard navigation mode is enabled. Can you check this one and see what you think? Regarding reactabular, everything is customizable so we could get much closer to our existing table/data tables (and do a11y enhancements where desired). I think I am just looking to see whether or not react-bootstrap-tables will be an option at this point. Still evaluating myself too... I guess main problem I'm seeing w/ react-bootstrap-tables is the choice in DOM rendering multiple |
|
Planning to give this style API a try: And quickly compare... Will see what gives... |
Yeah, that's weird. The shift+tab behaves like the tab. I am able to use the arrow keys though so it's not totally blocking keyboard access in that case. |
|
I think we can close this now in favor of the effort started in #143 . thoughts? |
|
I'm closing this for now. It seems like this table is not a good option. |
3 participants
What:
Pushing an initial PR to showcase react-bootstrap-table and some markup rendered.
Good things:
👍 API is very comprehensive and would handle most PF functionality (sort, pagination, column visibility, csv export, etc)
Bad things:
👎 Markup is not semantic. Multiple
<table>elements rendered inside div's👎 Table is not really accessible it seems, even with keyboard navigation mode I can't go backwards when shift-tabbing.
👎 Custom CSS added in
react-bootstrap-table-all.min.cssis not good so I removed it and added a few custom classes to get it much closer.👎 There is always an additional div rendering in the
thelement. Any knows how to remove it? (see Data Tables example started)👎 PF has custom carrot rendered w/
sorting_ascclass (example here). We need to customize thethusing arefit appears.Link to Storybook
cc: @jeff-phillips-18 @ohadlevy @yaacov @amirfefer
At this point, I am wondering if we should go ahead and consider reactabular as it seems to have complete customization and should help avoid these sort of things...
Would ❤️ any more thoughts when you have a chance 😄
Additional issues: