carbon: [DataTable] with selection, missing possibility to select multiple subsequent rows with Shift key
Description
Missing possibility to select and unselect multiple subsequent rows with Shift key, which brakes UX. You can check expected behaviour using Chrome - History page, where this works as expected.
Justification
IBM application would like to use paginated DataTable with Search input, for tables with 1000+ rows, Example:
For items per page 20:
- search for rows which contain some text e.g. salary, result (salary_1, salary_2, salary_3, etc.)
- select multiple subsequent rows, e.g. from salary_3 to salary_11, by selecting salary_3, hold Shift, selecting salary_11
Steps to reproduce the issue
Try on: http://react.carbondesignsystem.com/?path=/story/datatable--with-selection
- Select one row e.g. 1st
- Press Shift key and hold
- Select any row below/above selected row e.g. 4th Expected: rows from 1-4 are selected Result: only row 1 and 4 are selected
Fix should work also for unselecting, see Chrome -> History page.
What version of the Carbon Design System are you using?
"carbon-components": "10.5.0",
"carbon-components-react": "7.5.0",
"carbon-icons": "7.0.7",
### Tasks
- [ ] https://github.com/carbon-design-system/carbon/issues/13479
- [ ] https://github.com/carbon-design-system/carbon/issues/13480
- [ ] https://github.com/carbon-design-system/carbon/issues/13481
About this issue
- Original URL
- State: open
- Created 5 years ago
- Comments: 23 (10 by maintainers)
Hey @AustinGitHub, no news yet, but after the call we had looking over Data Table enhancements, this one definitely got people excited. Good to know that your product is in need. This helps our business case for taking it on. I’ll be sure to update you accordingly!
From DataTable Backlog Grooming call:
Core carbon should eventually take this on.
@dakahn in Chrome browser history, I can filter by e.g. by “youtube”, I can click on first checkbox, scroll down e.g. to row 150, press Shift and hold, click on this 150 element, and all elements between 1-150 will be selected. My intention was to mention commonly used multiple checkboxes selection pattern, across web and other applications, which is currently missing in DataTable, and forces user to click or use keyboard 150 times.
Just getting to this now. My apologies.
I assume the specific situation we’re talking about here is a user has narrowed their search through filtering as much as they can and still have too many table items to select manually without frustration (greater than 10? 20?).
Selecting rows on our DataTable is done by ticking a checkbox component. If you think about the expected keyboard interaction pattern there it goes something like this:
1, with keyboard the user focuses the checkbox 2. user hits
enterorspaceto change the checkbox’s state to selectedFor anyone unfamiliar with the referenced functionality found in Google Chrome’s History menu. When the user enters a fieldset of checkboxes and focuses the first checkbox they can hold down
shiftand use the down (or up) arrows to move through the table’s items. Then when they get to the desired item with theshiftkey still held down they can hitspaceorenterto select or deselect all the checkboxes they’ve just moved through while holdingshift.In my brief testing using NVDA Chrome’s History datatable has VERY poor screen reader accessibility. An interaction we’d need to fully flesh out if we were to consider this feature. The user would need to know:
shiftis held down?)I expect (based on experience) for this feature to conflict with JAWS’s arrow key movement peculiarities when dealing with form fields specifically.