How to add dynamic rows in table using React-Redux

Ahamed Fazil Buhari
Senior Developer
Published On :   03 Sep 2018
Visit Count
Today :  8    Total :   911

Hello everyone,

This is continuation of my article on React and Redux in Typescript. In this article we will see how to create dynamic rows in a table using redux store. This is simple dynamic table in which you can add or remove rows. I use immutability-helper package. I believe you have basic understanding of React and Redux (if not please refer my previous articles).


To have dynamic rows in react, its important to have unique key, we can’t go with the index value from an array of values. That’s the only reason we should need unquie key in our array. Because I’m making this dynamic rows by adding and slicing values in an array. So here the app state looks more like this


In Actions, we created three different actions

· createRow

· removeRow

· updateRow


Reducer have separate function for these three actions and using immutability-helper,


I create the key using (which gives value with milliseconds and it will be unique each time you click the AddNewRow button)

In design, we used <ul> and <li>, we can also use <table> and <tr> as well



Github to the project

Happy Coding