- In this article, I will show you how to create a table with dynamic data in ReactJS .
- I know it’s quite simple for some of you, but this tutorial is for beginners so they know how to do them
Begin:
- We have data as an array of API-like objects. You can also use the API.
- First create simple component and store data in ** state **
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">class</span> <span class="token class-name">Table</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token comment">//since we are extending class Table so we have to use super in order to override Component class constructor</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">//state is by default an object</span> students <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">'Wasif'</span> <span class="token punctuation">,</span> age <span class="token punctuation">:</span> <span class="token number">21</span> <span class="token punctuation">,</span> email <span class="token punctuation">:</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> '</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">'Ali'</span> <span class="token punctuation">,</span> age <span class="token punctuation">:</span> <span class="token number">19</span> <span class="token punctuation">,</span> email <span class="token punctuation">:</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> .com'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">'Saad'</span> <span class="token punctuation">,</span> age <span class="token punctuation">:</span> <span class="token number">16</span> <span class="token punctuation">,</span> email <span class="token punctuation">:</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> '</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">'Asad'</span> <span class="token punctuation">,</span> age <span class="token punctuation">:</span> <span class="token number">25</span> <span class="token punctuation">,</span> email <span class="token punctuation">:</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> '</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
- Here we have 4 students with id, name, age and email address. Because of our table with dynamic data, it doesn’t matter if we have 4 or 100 students …
Create data for tbody
- Now we want to print students data in the DOM. We often use the map function in react to iterate over arrays (like a for loop).
- Write a new function and call it out using the render method. This way we will see the code more compact and easier to read
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <span class="token function">renderTableData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> students <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> student <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> id <span class="token punctuation">,</span> name <span class="token punctuation">,</span> age <span class="token punctuation">,</span> email <span class="token punctuation">}</span> <span class="token operator">=</span> student <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> tr key <span class="token operator">=</span> <span class="token punctuation">{</span> id <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> id <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> name <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> age <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> email <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> tr <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h1 id <span class="token operator">=</span> <span class="token string">'title'</span> <span class="token operator">></span> React Dynamic Table <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> table id <span class="token operator">=</span> <span class="token string">'students'</span> <span class="token operator">></span> <span class="token operator"><</span> tbody <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">renderTableData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token comment">// Gọi hàm đó ra ở đây</span> <span class="token operator"><</span> <span class="token operator">/</span> tbody <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> table <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
- You may have noticed our renderTableData method returns tr instead of tr within the table. Since tr cannot be a child of a div , we have to wrap tr inside the tbody
Create data for the header
- Now we write a new function for the header as above
1 2 3 4 5 6 7 8 9 10 | <span class="token function">renderTableHeader</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> header <span class="token operator">=</span> Object <span class="token punctuation">.</span> <span class="token function">keys</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> students <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token keyword">return</span> header <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> key <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token operator"><</span> th key <span class="token operator">=</span> <span class="token punctuation">{</span> index <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token punctuation">{</span> key <span class="token punctuation">.</span> <span class="token function">toUpperCase</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> th <span class="token operator">></span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span> thead <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">renderTableHeader</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> thead <span class="token operator">></span> |
- Object.Keys provides us with all the student keys as arrays and we have stored them as header variables. Because we can repeat the header by using map ()
- You might think why we don’t use forEach, it does the same. The reason is when we want to be map () because it will return a new array. So we use the map () method, while forEach doesn’t return anything, it just iterates over the elements. of the array.
Result:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token keyword">class</span> <span class="token class-name">Tables</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> students <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">'Wasif'</span> <span class="token punctuation">,</span> age <span class="token punctuation">:</span> <span class="token number">21</span> <span class="token punctuation">,</span> email <span class="token punctuation">:</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> '</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">'Ali'</span> <span class="token punctuation">,</span> age <span class="token punctuation">:</span> <span class="token number">19</span> <span class="token punctuation">,</span> email <span class="token punctuation">:</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> '</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">'Saad'</span> <span class="token punctuation">,</span> age <span class="token punctuation">:</span> <span class="token number">16</span> <span class="token punctuation">,</span> email <span class="token punctuation">:</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> '</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">'Asad'</span> <span class="token punctuation">,</span> age <span class="token punctuation">:</span> <span class="token number">25</span> <span class="token punctuation">,</span> email <span class="token punctuation">:</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> '</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function">renderTableData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> students <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> student <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> id <span class="token punctuation">,</span> name <span class="token punctuation">,</span> age <span class="token punctuation">,</span> email <span class="token punctuation">}</span> <span class="token operator">=</span> student <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> tr key <span class="token operator">=</span> <span class="token punctuation">{</span> id <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> id <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> name <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> age <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> email <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> tr <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">renderTableHeader</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> header <span class="token operator">=</span> Object <span class="token punctuation">.</span> <span class="token function">keys</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> students <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token keyword">return</span> header <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> key <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator"><</span> th key <span class="token operator">=</span> <span class="token punctuation">{</span> index <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token punctuation">{</span> key <span class="token punctuation">.</span> <span class="token function">toUpperCase</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> th <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> table <span class="token operator">></span> <span class="token operator"><</span> tbody <span class="token operator">></span> <span class="token operator"><</span> tr <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">renderTableHeader</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> tr <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">renderTableData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> tbody <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> table <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> Tables |
- That’s all, we have finished with simple tables. Demo link
Conclude
- Link to reference the article: https://dev.to/abdulbasit313/an-easy-way-to-create-a-customize-dynamic-table-in-react-js-3igg