DEV Community

Cover image for React - how to create dynamic table
Dirask-React
Dirask-React

Posted on • Originally published at dirask.com

React - how to create dynamic table

Hello Coders! 👋 😊

In this article, I would like to show you how to create a dynamic table in React.

Before we start, I would highly recommend you to check out runnable examples for the solution on our website:
How to create customized dynamic table in React

The final effect of this post:
image

Below example presents how to create a dynamic table from an array. Example table should consist of a header and some data records. While creating such records use map() function to convert them into elements.
Remember that each record should have a unique key 🗝️ - it helps React optimally manage changes in the DOM. Such a key may be, for example, the id assigned to an element of the table.

import React from 'react';

const tableStyle = {
    border: '1px solid black',
    borderCollapse: 'collapse',
    textAlign: 'center',
    width: '100%'
}

const tdStyle = {
    border: '1px solid #85C1E9',
    background: 'white',
    padding: '5px'
};

const thStyle = {
    border: '1px solid #3498DB',
    background: '#3498DB',
    color: 'white',
    padding: '5px'
};

const App = () => {
    const students = [
        { id: 1, name: 'Bob',  age: 25, favFruit: '🍏' },
        { id: 2, name: 'Adam', age: 43, favFruit: '🍌' },
        { id: 3, name: 'Mark', age: 16, favFruit: '🍊' },
        { id: 4, name: 'John', age: 29, favFruit: '🍒' }
    ];
    return (
      <div>
        <table style={tableStyle}>
          <tbody>
            <tr>
              <th style={thStyle}>Id</th>
              <th style={thStyle}>Name</th>
              <th style={thStyle}>Age</th>
              <th style={thStyle}>Favourite Fruit</th>
            </tr>
            {students.map(({ id, name, age, favFruit }) => (
              <tr key={id}>
                <td style={tdStyle}>{id}</td>
                <td style={tdStyle}>{name}</td>
                <td style={tdStyle}>{age}</td>
                <td style={tdStyle}>{favFruit}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

You can run this example here

That's how it works.
If you found this solution useful you can react to this post or just leave a comment to let me know what you think. Thanks for reading! 😊

Write to us!

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for mentoring write to us on dirask.com -> Questions

Top comments (10)

Collapse
 
undqurek profile image
undqurek

Sortable columns could be useful too.

Collapse
 
philiphassialis profile image
Philip Alexander Hassialis

Usually sortable columns are something done in backend. YMMV of course but past a certain point its actually more effective to do pagination and sorting in the database request since its optimized for this kind of work.

Collapse
 
hasnaindev profile image
Muhammad Hasnain

That ain't difficult, you just have to manipulate the data structure using selectors, a selector library like re-select to be more specific and run a sort method on the array.

Collapse
 
talorlanczyk profile image
TalOrlanczyk

Well you can make it more dynamic
By take the object keys and run on map to create a to each of them

This approach is no so much dynamic because you can use this only for one senerio

Collapse
 
diraskreact profile image
Dirask-React

Thank you for your comment! 👍
In the next post, I will try to make a more dynamic solution. 🚀

Collapse
 
talorlanczyk profile image
TalOrlanczyk

More dynamic solution us send array of object
With name and other properties of th like colspan

Thread Thread
 
wearypossum4770 profile image
Stephen Smith

Would it be a good design principle to have the style code in the object? Maybe it would create too much overhead and be a potential vector for errors? Could it potentially affect performance?

Collapse
 
wearypossum4770 profile image
Stephen Smith

The code has a bug. It assumes the objects are sorted by "id." I introduced a bug by switching "id" values.

Collapse
 
wearypossum4770 profile image
Stephen Smith

How about this suggestion? It fixes the "bug" I introduced.

...
 students.sort((a,b) => a.id-b.id).map(({ id, name, age, favFruit }) => 
...
Enter fullscreen mode Exit fullscreen mode
Collapse
 
amzat19 profile image
Amzat19

Is it possible to create to create a react table that adds several rows of input types(number/email) when you click a button