How to create customized dynamic table in React (with dynamic header)
Tags: react, javascript, webdev, html
Published: 2021-03-03 19:00:07

###Hello again! 👋😊
In the comment section under my [previous post](https://dev.to/dirask/react-how-to-create-dynamic-table-4214) 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)](https://dirask.com/posts/How-to-create-customized-dynamic-table-in-React-with-dynamic-header-j4qyG1)

The final effect of this post:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvfjgwacofrgt64gvmhk.png) 
 
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:

```jsx
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](https://dirask.com/posts/How-to-create-customized-dynamic-table-in-React-with-dynamic-header-j4qyG1)

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](https://dirask.com/questions)