React-data-grid: Enter navigation

[GenoD]

Which version of React JS are you using?

✅ Officially supported ✅

• [x] v15.4.x

⚠️ Not officially supported, expect warnings ⚠️

• [ ] v15.5.x
• [ ] v15.6.x

☣️ Not officially supported, expect warnings and errors ☣️

• [ ] v16.x.x

---

Which browser are you using?

✅ Officially supported ✅

• [ ] IE 9 / IE 10 / IE 11
• [ ] Edge
• [x] Chrome

⚠️ Not officially supported, but "should work" ⚠️

• [x] Firefox
• [x] Safari

---

I'm submitting a ...

• [ ] 🐛 Bug Report
• [x] 💡 Feature Request

---

Issue Details

Please include:

• What the current behavior is
  After a cell is expanded and edited, enter key is used to close the cell and trigger 'onRowUpdate'. Currently there is no way to control which cell is focused aside from tab navigation.

• What the desired behavior is
  It would be nice be able to control which cell is focused or allow for the user to be automatically navigated to a specific cell after hitting 'enter' to finish editing the current cell.

• (If Feature) The motivation / use case for the feature
  I have a table where the user may need to enter in hundreds of weights for data collection; each possibly unique from the last. The weights all exist in the same column and as a result the down arrow must be used to navigate to the next row. As all inputs are entered via num pad, our clients would prefer to enter in a weigh, hit enter to be navigated to the next row, and begin typing.

Demonstration of use case:

Entry would be much faster if they type the number and hit enter to get to the next line. Having to use the number pad then the down arrow forces you to move your wrist and lose your place/slow down.

[todvenn]

Hi, is the 'on enter navigation' actually now implemented and working?
(apologies if I'm missing something, asking silly questions, I'm new to Github's ways)

The reason I ask is because I can see that there is an example in the docs here called "cell navigation":
http://adazzle.github.io/react-data-grid/#/examples/cell-navigation

And I gather that this presumably listens for an enter key press, which I think should in the case of this demo move to the next row down, since when I view the source code for this demo, I see it uses -- cellNavigationMode="changeRow" /> as a prop...

The demo page, however, doesn't seem to work in this way (it only cycles columns upon pressing tab), and nor can I get the jsfiddle to render anything (I get a blank white render pane), as per the other fiddles.

I'm looking for some way to implement this behavior if it's not already built in / working.
Can anyone advise me, please & thank you?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[lepsistemas]

If someone is still wondering how to press enter and move to the next row, I achieved this with some steps. I'll paste here just some code, for I use redux and containers to control my state. So the code is quite big. But I guess you'll get the idea.

Ps: I wanted this behaviour only on last row

1) Get a reference to the grid by adding this props to the tag:

<ReactDataGrid ref="grid" ... />

2) Implement the event onGridKeyDown with something like this:

<ReactDataGrid onGridKeyDown={this.handleKeyDown.bind(this)} ... />

handleKeyDown(event) {
   if (event.which === 13) { // Enter key pressed
      let currentRowIndex = this.refs.grid.state.selected.rowIdx
      let lastRowIndex = this.state.rows.length - 1
      if (currentRowIndex === lastRowIndex) { // We are at the last row
         // Call your method that adds a new row here.
         // Mine has lots of controls and uses redux, so I'm not pasting it.
         this.refs.grid.openCellEditor(currentRowIndex + 1, this.refs.grid.state.selected.idx)
      }
   }
}

The expected behaviour is something like this: