2023 Jun 21 7:56 AM
This post is part of the UI5 Web Components for React Challenge (June 2023)
Welcome to the third week of the React developer challenge! This week, your task is to add infinite scrolling to your table and use a larger data set sent into the Solution component through a prop.
If you haven’t completed the first 2 weeks, you’ll need to do so as this week’s code is built on top of the previous weeks.
To help you achieve the goals for this week, the following resources (along with the resources from the last 2 weeks) could be useful.
For guidance on getting started, please refer to week 1.
Goal: Use the larger data set from utils/data.js and send to your Solution component through a prop in App.tsx. Then implement an infinite scroll that loads 10 rows when the table initializes, and another 5 rows.
Hint: When loading in the data from a prop, you should be using React state.
To receive credit for this week, you will need to accomplish the following tasks:
1) Change the name of the title in App.tsx to include your name and “Week 3 – Infinite Scroll”. It should resemble the title shown in the screenshot at the top of this post.
2) Use the larger data set in utils/data.js and send that into your solution component through a prop in App.tsx. Also, you will need to add statuses to the individual tasks in data.js.
3) Implement an infinite scroll to your table with the help of built in Table or AnalyticalTable props. You should load 10 rows on initialization and 5 rows after scrolling to the bottom. You will need to apply a style to the table to limit its growth so you can scroll.
4) Take a screenshot with your full table, header, scroll bar, and modified statuses and post it in THIS discussion.
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!
2023 Jun 22 11:11 AM
2023 Jun 22 12:45 PM
2023 Jun 23 6:29 AM - edited 2023 Jun 23 6:32 AM
2023 Jun 23 6:30 AM - edited 2023 Jun 23 6:33 AM
2023 Jun 23 11:35 AM - edited 2023 Jun 23 11:36 AM
2023 Jun 23 5:31 PM
2023 Jun 26 6:25 AM
Hi Michelle,
Here are my submission for week 3.
Picture1, at the top of the page. There are totally 15 rows in the table now. 10 rows were from the initial load plus more 5 rows added by a setRows function on onLoadMore event that has automatically raised according to the height of the table.
Picture2, at the bottom of the page after the 3rd scrolling down.
2023 Jun 26 12:13 PM
2023 Jun 27 1:48 PM
2023 Jun 28 12:40 PM
Hi All!
Here is the output for this week's challenge:
After scrolling down:
2023 Jun 29 11:16 PM
this is my assignment.
I have no excuse right now to learn React with SAPUI5 🙂
2023 Jul 02 11:03 PM
2023 Jul 03 6:53 AM
2023 Jul 03 7:01 AM
2023 Jul 03 11:07 PM
2023 Jul 04 8:29 AM
2023 Jul 04 11:03 AM
2023 Jul 06 8:56 AM
2023 Jul 10 11:00 AM
Week 3 Submission:
Interestingly, the additional 5 rows after scrolling to the bottom is more apparent when the growing="Button" component is used. Tried it when testing if my code worked.
2023 Aug 02 11:07 AM
2024 Aug 03 2:45 PM
2024 Aug 03 2:46 PM