Welcome to the fourth and final week of the SAP React developer challenge. This week, your task is add a row to your data set and table using the predefined custom component AddRowDialog. There is also a bonus challenge of adding a way to remove a row from the table and data.
If you haven’t completed the previous three weeks, you’ll need to do so as this week’s code is built on the previous weeks.
We have another bonus challenge this week. It makes sense that if we can add rows to a table, we should be able to remove them. For this bonus challenge, implement a way to delete rows of data from the table. Be careful here. If implemented improperly, bugs could be introduced into the infinite scrolling that was added last week.
To help you achieve your goals for this week, the following resources (along with the resources from the previous weeks) could be useful.
Goal: Use the custom dialog in Components/AddRowDialog.jsx and write the logic to add a new row with data sent back from that dialog.
1) Change the name of the title in App.tsx to include your name and “Week 4 – Adding New Rows”. It should resemble the screenshots in this post.
2) Use the custom dialog in Components/AddRowDialog.jsx and write the logic to add a new row with data sent back from that dialog. You only need to add the component, which has a button already set up to open, close, and send data through the addNewRow function prop, to your Solution component.
A) Add a way to delete rows in the table and in the data. This is completely optional.
Note: If you are having issues with your icons loading, you might need to update your package.json dependencies with the packages from this file, open a terminal, run `npm i`, the restart your frontend using the three dot dropdown and clicking “restart” from the sub menu.
3) Take a screenshot of your full table and header and post it to THIS discussion. Be sure to add a new task to the table and have that appear in your screenshot. You do not need to have the dialog open like the screenshot at the top of this post.
Note: If you encounter issues with your frontend not loading, ensure that you have imported all the necessary dependencies. Unfortunately, the debugging experience may not provide clear error messages. One useful approach is to comment out sections of code until the UI loads, then gradually uncomment to isolate the problematic line.
Get ready to enhance your React skills by incorporating the power of SAP UI5 Web Components into a custom component! Good luck and happy coding!
Hi @MichelleMoudy ,
Here are my submission for week#4.
Add row function.
Delete row function.
for this part, I am able to do it with below assumptions.
- the table can be performed with actual data in the array only.
- the deleted row will be removed from both UI table and the element of the array (source data) to keep program works correctly.
- extra field (unique key) was added in the task object to use as the key in the React element (to be filter out).
There was one issue that I need to take a look into. I found that If I keep the state of pure data object (array) instead of the rendered React table row component, it was more easily to manage the delete functionality but when the state of the data has changed, the UI table rendered incorrectly (the cursor focus always set to the top of the table after deletion was performed).
the icon issue is quite interesting indeed, I also experienced that only the set of specified versions mentioned by Michelle as below worked for me.
When I was experiencing this issue, I discovered that if I added the new packages and reinstalled then restarted the sandbox using the restart option in the menu, it fully fixed the problem. I believe there's some strange caching happening in the sandbox that can be fixed by restarting.