CodStak Weekly Challenge #7: Dynamic Table with Editable & Saved Rows

Frontend React Interview Question

Hey Coders,

Today’s challenge will test a lot of different skills require you to make a small reusable component. Here is the brief description of the challenge:

You need to implement a React component that manages a dynamic table with the following features:

Editable Rows:

Allow users to add rows with Name and Email fields. Provide input fields for editing these rows. Include a "Save" button to move the row to a saved list.

Saved Data: Display rows saved by the user in a separate table. Include a "Delete" button to remove rows from the saved list.

Functionality Add Row: Clicking "Add Row" adds a new blank row to the editable section. Edit Row: Users can modify the Name and Email fields in editable rows. Save Row: Moves the row to the saved data table and removes it from the editable rows. Delete Row: Deletes rows from the saved data section.

Constraints Each row must have a unique id. The saved rows should not be editable. The user should be able to delete rows only from the saved data section. Example Input/Action:

Click "Add Row". Enter "John Doe" and "john@example.com" in the editable fields. Click "Save". Click "Delete" on the saved row.

Output: Editable Table: Empty. Saved Data Table: Empty (after delete).

Expected Behavior Implement the component with React state management to ensure data integrity and dynamic updates to the table.

This is a medium challenge, so take your time.

You can access the challenge here

That’s all from today’s challenge, will see you next week!

---