[Edit]

React - how to create dynamic header for the table

1 contributors

2 contributions

0 discussions

0 points

Created by:

cory

1756

In this article, we would like to show you how to create a dynamic header for the table in React.

To create a dynamic header we use two methods:

Object.keys() that takes the first object from the passed array and creates table (headers) filled with the object's properties,
map() method that renders <th> element for each element in headers table.

Note:

Remember that each element should have a unique key - it helps React optimally manage changes in the DOM. In below example we create counter to assign keys.

Runnable example:

xxxxxxxxxx
 
// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';
​
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 Header = ({ array }) => {
  let counter = 0;
  const headers = Object.keys(array[0] ?? {});
  return headers.map((x) => {
    ++counter;
    return (
      <th style={thStyle} key={counter}>
        {x}
      </th>
    );
  });
};
​
const App = () => {
  const students = [
    { 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 style={tableStyle}>
        <tbody>
          <tr>
            <Header array={students} />
          </tr>
          {/* --- example data records --- */}
          {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>
  );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App/>, root );