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:

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;

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

Comments

[undqurek]

Sortable columns could be useful too.

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

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

[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

[Dirask-React]

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

[TalOrlanczyk]

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

[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?

[Stephen Smith]

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

[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 }) => 
...

[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