Deviopath › React

Editable Table

Hard · Lists

Edit single table cells in place with the keyboard (no Save buttons).

Render one <tr> per person in PEOPLE inside <tbody>, with one <td> per field (name, city, age). Each <td> has data-row (the row index) and data-col (the field name) and shows the value.

- Clicking a cell replaces its text with <input className="cell-input"> prefilled with the value. Only one cell is edited at a time: clicking another cell switches to it and discards the unsaved edit.

- Enter saves the trimmed value. For name and city, an empty value keeps the old value.

- Escape cancels the edit.

- An age must be a whole number. While it is not, the input also has the class invalid (className="cell-input invalid") and Enter does nothing.

Below the table show <p className="avg">Average age: 31</p>, rounded with Math.round.

Next: File Tree Explorer