Converting array data into a table in react

user_12831121 0
Viewed 7239

I have an array with three object in it. I want to map all of them and render them in a table in react. I am able to extract values using map method, bu I am not sure how to render them as a table.

[
   {
      "email":"gowtham@outlook.com",
      "firstname":"gowtham",
      "lastname":"ss",
      "password":"outlook010"
   },
   {
      "email":"ss@ss.com",
      "firstname":"ss",
      "lastname":"ss",
      "password":"ss"
   },
   {
      "email":"gow@gow.com",
      "firstname":"gow",
      "lastname":"gow",
      "password":"gow"
   }
]

image from chrome developer tools

Following is the code I used to map the array data: 

const exportHeaderData = Object.values(this.state.registeredData).map(
            (data) => {
                return Object.entries(data).map((key,value) => {
                    return `${key}: ${value}`;
                });
            }
        );

I want to render it using a table in react.

reactjs javascript
5 Answers

You can do it like this:

<table>
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Password</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    {arrayWithData.map(item => {
      return (
        <tr key={item.password}>
          <td>{ item.firstname }</td>
          <td>{ item.lastname }</td>
          <td>{ item.password }</td>
          <td>{ item.email }</td>
        </tr>
      );
    })}
  </tbody>
</table>
user_127073980

Here is one implementation

const Table = () => {
  const data = [
     {
        "email":"gowtham@outlook.com",
        "firstname":"gowtham",
        "lastname":"ss",
        "password":"outlook010"
     },
     {
        "email":"ss@ss.com",
        "firstname":"ss",
        "lastname":"ss",
        "password":"ss"
     },
     {
        "email":"gow@gow.com",
        "firstname":"gow",
        "lastname":"gow",
        "password":"gow"
     }
  ];
  
  return (
  <table>
    <tr>
      <th>Email</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Password</th>
    </tr>
    {data.map(d => (
      <tr>
        <td>{d.email}</td>
        <td>{d.firstname}</td>
        <td>{d.lastname}</td>
        <td>{d.password}</td>
      </tr>
      )}
  </table>
  );

}

user_55673870

You can create components to achieve this like:

  • App Parent component
    • Table Child component
      • TableHeaderRow Sub-Child component
      • TableRow Sub-Child component

const obj = [{email:"gowtham@outlook.com",firstname:"gowtham",lastname:"ss",password:"outlook010"},{email:"ss@ss.com",firstname:"ss",lastname:"ss",password:"ss"},{email:"gow@gow.com",firstname:"gow",lastname:"gow",password:"gow"}];

const TableHeaderRow = () => {
  return <tr><th>First Name</th><th>Last Name</th><th>Email</th><th>Password</th></tr>;
}

const TableRow = ({data}) => {
  return data.map((data) =>
    <tr>
      <td>{data.firstname}</td><td>{data.lastname}</td><td>{data.email}</td><td>{data.password}</td>
    </tr>
  );
}

const Table = ({data}) => {
  return (
    <table>
      <TableHeaderRow />
      <TableRow data={data} />
    </table>
  );
}

const App = () => <Table data={obj} />;
ReactDOM.render(<App />, document.getElementById("app"));
table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
table td {
  border: 1px solid #ddd;
  padding: 8px;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
table th {
  padding: 12px 8px;
  text-align: left;
  background-color: #336699;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

user_18238410

You need to use map to iterate through the entries and return an HTML Table Row for each entry

<table>
  <tbody>
     <th>
        <td>Email</td>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Password</td>
      </th>
    {this.state.registeredData.map(row => (
      <tr key={row.email}>
        <td>{row.email}</td>
        <td>{row.firstname}</td>
        <td>{row.lastname}</td>
        <td>{row.password}</td>
      </tr>
    ))}
  </tbody>
</table>
user_15956990

Hi you can do it like this

data=> {
    return(
     <>
     <thead>
     <th>email</th>
     <th> fName </th>
    </thead>
    <tbody>
    {this.state.registeredData.map((data) => {
       return (<tr>
       <td>data.email</td>
       <td>data.firstName</td> 
      </tr>)

    });
    }
    </tbody>
     </>
    )
}
user_55925970
Related