[Edit]

React - how to create dynamic table

1 contributors

2 contributions

0 discussions

3 points

Created by:

christa

600

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

The below example consists of several steps:

Creating a dynamic table based on array,
Each table always consists of a header and some data records,
The header is usually fixed and keeps the same amount of columns,
While creating data records we use map() function. It's a good approach to convert array items into React elements.

Note:

Remember that each element 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 each element of the table.

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'
}
​
const tdStyle = {
    border: '1px solid black',
};
​
const App = () => {
    const students = [
        { id: 1, name: 'Tom',  age: 25 },
        { id: 2, name: 'Adam', age: 43 },
        { id: 3, name: 'Mark', age: 16 },
        { id: 4, name: 'John', age: 29 }
    ];
    return (
      <div>
        <table style={tableStyle}>
          <tbody>
            <tr>
              <th style={tdStyle}>Id</th>
              <th style={tdStyle}>Name</th>
              <th style={tdStyle}>Age</th>
            </tr>
            {students.map(({ id, name, age }) => (
              <tr key={id}>
                <td style={tdStyle}>{id}</td>
                <td style={tdStyle}>{name}</td>
                <td style={tdStyle}>{age}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Auto running

Dynamic table component example

Edit

In this section, we want to show you how to create Table component which displays data changing on click event.

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'
}
​
const tdStyle = {
    border: '1px solid black',
};
​
const Table = ({students}) => (
  <div>
    <table style={tableStyle}>
      <tbody>
        <tr>
          <th style={tdStyle}>Id</th>
          <th style={tdStyle}>Name</th>
          <th style={tdStyle}>Age</th>
        </tr>
        {students.map(({ id, name, age }) => (
          <tr key={id}>
            <td style={tdStyle}>{id}</td>
            <td style={tdStyle}>{name}</td>
            <td style={tdStyle}>{age}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);
​
const GROUP_1 = [
    { id: 1, name: 'Tom',  age: 22 },
    { id: 2, name: 'Adam', age: 43 },
    { id: 3, name: 'Mark', age: 16 },
    { id: 4, name: 'John', age: 29 }
];
​
const GROUP_2 = [
    { id: 1, name: 'Kate', age: 23 },
    { id: 2, name: 'Ann',  age: 18 }
];
​
const App = () => {
    const [students, setStudents] = React.useState(GROUP_1);
    return (
      <div>
        <div>
          <button onClick={() => setStudents(GROUP_1)}>Show GROUP_1</button>
          <button onClick={() => setStudents(GROUP_2)}>Show GROUP_2</button>
        </div>
        <br />
        <Table students={students} />
      </div >
    );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );