keyboard navigation

[hollandjb92]

Wondering if there is any way to setup navigation of a table's rows through up/down arrow keys or is this something not available through react-table? getTrProps only works with onClick events

[GuptaSiddhant]

This feature is not natively supported but I was able to simulate it using following function:
Note: It is important that tbody tag should have a ref, and tr should have the id={row.id} and tabIndex

...
  const tbodyRef = React.useRef(null);
  
 // Function to handle key press on a row
  const handleKeyDown = ( event, row ) => {
    event.stopPropagation();
    const currentRow = tbodyRef.current?.children.namedItem(row.id);
    switch (event.key) {
      case "ArrowUp": 
        currentRow?.previousElementSibling?.focus();
        break;      
      case "ArrowDown": 
        currentRow?.nextElementSibling?.focus();
        break;  
      default: break;
    }
  };
...
//Then find the function with TableRow `tr`
<tbody {...getTableBodyProps()} ref={tbodyRef}>
  {rows.map((row) => {
     prepareRow(row);
     return (
    <tr {...row.getRowProps()} id={row.id} tabIndex={0} onKeyDown={(e) => handleKeyDown(e, row)} >
    ...
   </tr>)}
</tbody>
...

To see selected rows, CSS must added to focus state of the row:

tr:focus {
  background-colour: LightGray;
}

CodeSandBox: https://codesandbox.io/s/laughing-antonelli-yvsyl
Demo: https://yvsyl.csb.app

[GuptaSiddhant]

If you just add tabIndex={0} to each td, you'll be able to navigate with Tab.
If you want arrowKey navigation, then you need to add similar event listeners to cells as I added to rows, but for left/right keys.

[danvln]

Thanks a lot for your quick reply. There is a problem because I am using virtualization and not all the rows and cells are on the view port. Any other idea that I can use?

[GuptaSiddhant]

I am sorry that I am not very well versed with virtualisation and its effects.
But if I had to do something in which I can't use tableRef to detect rows, I'd use react-table's rowSelect API or rowStateAPI to manually select/highlight the next or previous row. That would need to be calculated from current row Id.
If you solve it, do share it. Good luck.

[dekokdj1]

On the subject of accessibility, is it possible to navigate the row headers that are used to sort with a keyboard?

[GuptaSiddhant]

Yes. It is. You need to add tabIndex to sort icons/buttons or on whole header cell, depending where you want user to click. You may need to write an custom onKeyPress method to perform sorting.

There is a UI library built around react-table which does that. You can check it out.
https://www.npmjs.com/package/react-table-ui

[bradwyatt]

Are there any future plans to support this natively? The closest solution I could get to this was by using the https://www.npmjs.com/package/accessible-react-table package, but it wasn't consistent across browsers, as well as the different pages on my app.

[GuptaSiddhant]

Unfortunately package accessible-react-table does not work with react-table 7 or TanStack table 8.

[Pagebakers]

I might be up for the task to implement this for v8. Will investigate.

[iamrakhmatov]

is there any news, regarding this?

[konsalex]

Hey folks, I recently released a library to work with table navigation. It works quite smoothly with @tanstack/table, and follows W3C guidelines for data grids. Feedback is more than welcome.

We use it in Neo4j Design system for table navigation, and works quite well for our use cases.

If docs are confusing please ping me to help.

Library (npm): https://www.npmjs.com/package/@table-nav/react

Also example with @tanstack/table

[Shank0071]

@konsalex This works great! But I am having a problem when I am dealing with inputs inside the table cell. "tab" key that is natively supported by the browsers does that work. However, I want to be able to navigate on "arrow key" events. Is there any way to achieve the same.

[konsalex]

Yes this issue is known, I consider it an issue with the spec to be honest, their is a thread also here but quite stale: w3c/aria-practices#2739

I guess I could provide in the library a flag to disable cell navigation, but if you want to solve it for now it's easy.

On the events onFocus and onBlur you can disable/enable the keyboard navigation. Check here the example also

[Shank0071]

Thank you for the quick response. I will take a look at the example!