How to add dynamic rows in table using React-Redux

Ahamed Fazil Buhari
Senior Developer
September 3, 2018
Rate this article
[Total: 0    Average: 0/5]

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


Category : SharePoint, SPFx

Author Info

Ahamed Fazil Buhari
Senior Developer
Rate this article
[Total: 0    Average: 0/5]
Ahamed is a Senior Developer and he has very good experience in the field of Microsoft Technologies, especially SharePoint 2013, 2016 and O365, Azure, ASP.NET, SQL Server, IIS and client more

Leave a comment