Description
Implement https://www.lightningdesignsystem.com/components/data-tables/#Column-resizing
Functionality should match: https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation
Toggle Between Navigation and Action Modes
You can use data tables in navigation mode and action mode using the keyboard. To enter navigation mode, tab into the data table, which triggers focus on the first data cell in the table body. Use the arrow keys to move around the table.
To enter action mode, press the Enter key or Space Bar. Columns can be resized in action mode. To resize a column, navigate to the header by pressing the Up Arrow key. Then, press the Tab key to activate the column divider, and resize the column using the Left Arrow and Right Arrow keys. To finish resizing the column and return to navigation mode, press the Tab key.
Main callouts not in SLDS spec are:
- Column handler highlights when focused and hover
- Focused column handler keyboard events on header cell when in action mode: left and right arrow keys should resize column +10px, -10px
For Design System React, this means that the column tab/resize keyboard events only happen when keyboardNavigation:true . For an example of this action mode in DSR, hit enter on a cell here: http://design-system-react-components.herokuapp.com/?path=/story/sldsdatatable--interactive-elements and an example of the completed implementation here: https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example
When the header cell is “selected” in action mode (enter), then the header resize column button gets a tab stop and the left and right arrows get actions. When escape is pressed, keyboard events and tabIndexes go away, but the mouse can still resize. keyboardNavigation:true and action mode are already implemented. We only need a tabindex changed to 0 when in "action mode" and a keyboard arrow event that resizes on left and right added when that tabstop is focused.
Video of keyboard interaction
Please use the instruction above to reproduce
Screenshot of mouse and keyboard event highlight
tabIndex change when action mode is toggled with enter key:
