I'm using the React DataGrid At the moment I'm trying to introduce a feature that when the user press TAB on the last column of the last row it should create a new row.
I already can create a new row, and I already know when I'm on the last row, however, I can't find anything on the documentation regarding handle clicks on the cell.
There is onGridRowsUpdated
which can handle what I want for the case that the change in the cell is committed... but for that, the user must start editing the cell first (double click or press Enter), then leave the cell, but this also works for cases I don't want it to happen (i.e: the user clicks to edit the cell, then click outside the cell or in another row)
The documentation has also an API for Cell, however, I have no idea how would I access this, as I don't seem to give any reference to hold the cell value, and even there I don't see any method like onFocus/onBlur.
My code
<ReactDataGrid
columns={columns}
rowGetter={i => rows[i]}
rowsCount={rows.length}
enableCellSelect={true}
ref={dataGrid}
onRowClick={index => setFocusRowIndex(index)} // Here I'm saving the current Index clicked, probably not the best way to handle this, but can't find another way with React DataGrid
onGridRowsUpdated={event => {
// Here I can handle when the user press TAB after editing a field
}}
/>
Any ideas?