How to add dynamic rows in table using React-Redux

Ahamed Fazil Buhari
 
Senior Developer
September 3, 2018
 
Rate this article
 
Views
6000

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

Category : SharePoint, SPFx

Author Info

Ahamed Fazil Buhari
 
Senior Developer
 
Rate this article
 
Ahamed is a Senior Developer and he has very good experience in the field of Microsoft Technologies, especially SharePoint, Azure, M365, SPFx, .NET and client side scripting - JavaScript, TypeScript, ...read more
 

Leave a comment