DEV Community

Cover image for How to create customized dynamic table in React (with dynamic header)
Dirask-React
Dirask-React

Posted on • Originally published at dirask.com

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

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:
image

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;
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
talorlanczyk profile image
TalOrlanczyk • 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

Collapse
 
diraskreact profile image
Dirask-React

Thanks for the tips! 😊πŸ”₯

Collapse
 
aalphaindia profile image
Pawan Pawar

good one!

Collapse
 
more03625 profile image
Rahul More

How can I CRUD buttons in each row? With status col with appropriate colos