How to add dynamic rows in table using React-Redux


Ahamed Fazil Buhari
SharePoint Developer
Published On :   03 Sep 2018
Visit Count
Today :  1    Total :   240



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).

clip_image002

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

clip_image004

In Actions, we created three different actions

· createRow

· removeRow

· updateRow

clip_image005

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

clip_image007

I create the key using Date.now() (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

clip_image009

clip_image011

Github to the project https://github.com/ahamedfazil/react-redux-ts-sp/tree/feature/DYNAMIC-TABLE

Happy Coding

Ahamed

Categories