DASH AG GRID - How to go to the cell below when pressing Tab

Dash Python
1

Hello guys,

I’m working with a transposed table, as you can see in the image below

image
image876×698 35 KB

So I would like to change what happens when I press Tab; The expected behavior is to make it go to the below cell instead of going to the cell on the right

I have built an MRE with the JavaScript and other more advanced things implemented on this context;

After doing some searches, I did find it on the AG GRID Documentation, but I didn’t understand how to implement this on the Dash context;

Any help or information about this will be very welcome

2

Hello @kabure,

You are looking for tabToNextCell

dagfuncs.tabToNextCell = (params) => {
    const {node, api, backwards, previousCellPosition} = params
    const {column, rowIndex} = previousCellPosition
    if (backwards) {
        return {rowIndex: rowIndex ? rowIndex-1 : 0, column: column}
    } else {
        return {rowIndex: rowIndex+1 , column: column}
    }
}

"tabToNextCell": {"function": "tabToNextCell(params)"}

This will not jump columns.

2 Likes
3

Hello @jinnyzor

I was not sure about where the "tabToNextCell": {"function": "tabToNextCell(params)"} should be set, but after some tries it worked as expected!

dag.AgGrid(
    id="dag-table",
    rowData=data_list,
    columnDefs=columnsDef,
    dashGridOptions={
        "tabToNextCell": {"function": "tabToNextCell(params)"}
    },
)

Thank you very much

2 Likes