What is the most optimal way to create a component where you can add and remove rows from a table on the fly(like a shopping cart)?

App Building
,
1

I want to build a component that has a table where the user can add rows. There will be an add item button which will add a row onclick, and every row will have a delete button that will remove the appropriate row on click. The challenges that I am facing here are dynamic resizing of the table, and supporting screen responsiveness. I would greatly appreciate any solutions or resources on this.

Thanks!

2

You can use a either a listView OR temporary state

3

Hi @virinchi, Scott's two suggestions would be good here! It sounds like you'll want to utilize either a Temporary State variable or localStorage to temporarily store the data that users will be adding and removing. You can populate components in a Listview or the Table component with the data from the temp state variable or localStorage. That way the Listview or the Table component will be dynamically updated when the data in a temporary state variable or localStorage is updated.

With Temporary State you can use the .setIn method to only update a specific slice of the state rather than replacing the entire state.

I hope that helps with your use case!

1 Like