Navigate/select ag-grid table row with arrow keys - reactjs

Question

I'm trying to navigate the rows of an ag-grid table on a react app. This means when I press up or down, the current selected row changes to the previous/next row.
I've tried the example on the ag-grid docs. But I don't know how to access the gridOptions.
How would I make this work?

Answer 1

I think I found a way, although I'm using useRef and I'd prefer to avoid it.
This is the main function:
const arrowKeysNavigation = (tableRef) => (params) => {
var previousCell = params.previousCellPosition;
var suggestedNextCell = params.nextCellPosition;
const api = tableRef.current.api;
var KEY_UP = 38;
var KEY_DOWN = 40;
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
switch (params.key) {
case KEY_DOWN:
previousCell = params.previousCellPosition;
// set selected cell on current cell + 1
api.forEachNode(function (node) {
if (previousCell.rowIndex + 1 === node.rowIndex) {
node.setSelected(true);
}
});
return suggestedNextCell;
case KEY_UP:
previousCell = params.previousCellPosition;
// set selected cell on current cell - 1
api.forEachNode(function (node) {
if (previousCell.rowIndex - 1 === node.rowIndex) {
node.setSelected(true);
}
});
return suggestedNextCell;
case KEY_LEFT:
case KEY_RIGHT:
return suggestedNextCell;
default:
throw new Error(
"this will never happen, navigation is always one of the 4 keys above"
);
}
};
The main steps:
Create ref const tableRef = React.useRef();
Associate it to ag-grid together with the function above:
<AgGridReact ... ref={tableRef} navigateToNextCell={arrowKeysNavigation(tableRef)}/>