How to create customized dynamic table in React (with dynamic header)

#react #javascript #webdev #html

Hello again! 👋😊

In the comment section under my previous post there was quite a discussion about creating a more dynamic solution for dynamic tables in React, so here we are! 🚀

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 (with dynamic header)

The final effect of this post:

In below example I used the following concept:

table is described by columns and data properties,
table is composed of header and some data records,
the column array allows us to decide which column names we want to display in the data rows,
using map() function we are able to reduce the amount of code – columns and data arrays are mapped into React components.

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 path assigned to each element of the table.

Practical example:

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 Table = ({ id, columns, data }) => (
  <table style={tableStyle}>
    <tbody>
      <tr>
        {columns.map(({ path, name }) => (
          <th style={thStyle} key={path}>{name}</th>
        ))}
      </tr>
      {data.map((rowData) => (
        <tr key={rowData[id]}>
          {columns.map(({ path }) => (
            <td style={tdStyle} key={path}>
              {rowData[path]}
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
);

// Example use --------------------

const App = () => {
  const columns = [
    { path: "id",   name: "ID" },
    { path: "name", name: "Name" },
    { path: "age",  name: "Age" },
    { path: "favFruit",  name: "Favourite Fruit" },
  ];
  const data = [
    { id: 1, name: 'Kate',  age: 25, favFruit: '🍏' },
    { id: 2, name: 'Tom',   age: 23, favFruit: '🍌' },
    { id: 3, name: 'Ann',   age: 26, favFruit: '🍊' },
    { id: 4, name: 'Jack',  age: 21, favFruit: '🍒' }
  ];

  return (
    <div>
      <Table id="id" columns={columns} data={data} />
    </div>
  );
};

export default App;

You can run this example here

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 your time! 😊

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 (4)

TalOrlanczyk • Mar 4 '21 • Edited

Great one but just for you to notice there is thead for the header
The tag is used to group the header content in an HTML table. The thead element should be used in conjunction with the tbody and tfoot elements.
Also a little tip:
You can add the rest of the props in map header
To the tag like colspan so it by itself do this