Converting array data into a table in React

Question

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

[
   {
      "email":"[email protected]",
      "firstname":"gowtham",
      "lastname":"ss",
      "password":"outlook010"
   },
   {
      "email":"[email protected]",
      "firstname":"ss",
      "lastname":"ss",
      "password":"ss"
   },
   {
      "email":"[email protected]",
      "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.

which library are you using for table?

Zohaib Ijaz
– Zohaib Ijaz

2020-04-08 12:24:29 +00:00
Commented Apr 8, 2020 at 12:24 — Zohaib Ijaz
– Zohaib Ijaz, Commented Apr 8, 2020 at 12:24

aopanasenko · Accepted Answer · 2020-04-08 12:28:31Z

11

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>

answered Apr 8, 2020 at 12:28

aopanasenko

4784 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

palaѕн · Accepted Answer · 2020-04-08 12:46:44Z

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:"[email protected]",firstname:"gowtham",lastname:"ss",password:"outlook010"},{email:"[email protected]",firstname:"ss",lastname:"ss",password:"ss"},{email:"[email protected]",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>

Zohaib Ijaz · Accepted Answer · 2020-04-08 12:29:24Z

Here is one implementation

const Table = () => {
  const data = [
     {
        "email":"[email protected]",
        "firstname":"gowtham",
        "lastname":"ss",
        "password":"outlook010"
     },
     {
        "email":"[email protected]",
        "firstname":"ss",
        "lastname":"ss",
        "password":"ss"
     },
     {
        "email":"[email protected]",
        "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>
  );

}

ibrahimijc · Accepted Answer · 2020-04-08 12:30:04Z

0

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>
     </>
    )
}

answered Apr 8, 2020 at 12:30

ibrahimijc

3413 silver badges12 bronze badges

Comments

imdzeeshan · Accepted Answer · 2020-04-08 14:15:43Z

0

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>

edited Apr 8, 2020 at 14:15

imdzeeshan

1,12820 silver badges27 bronze badges

answered Apr 8, 2020 at 12:26

klugjo

21k10 gold badges65 silver badges83 bronze badges

Comments

Fakeer · Accepted Answer · 2023-03-03 07:31:54Z

0

Usage:

<Tabulate arr={array_of_objects}/>

Simple component

const Tabulate = ( {arr} ) => {
    const cols = Object.keys(arr[0])

    const header = () => {
        return cols.map(e => <th key={e} align="right">{e}</th>)
    }

    return (
        <table className="table">
            <tbody>
                <tr>{header()}</tr>
                {arr.map(row => 
                    <tr>
                        {cols.map(col => <td key={col} align="right">{row[col]}</td>)}
                    </tr>
                )}
            </tbody>
        </table>
    )
}

edited Mar 3, 2023 at 7:31

answered Mar 3, 2023 at 7:00

Fakeer

1,0541 gold badge15 silver badges33 bronze badges

Comments

Nirav Jethva · Accepted Answer · 2023-03-03 07:48:30Z

You just need to loop through your data array into table structure.

const data = [
  {
    email: "[email protected]",
    firstname: "gowtham",
    lastname: "ss",
    password: "outlook010",
  },
  {
    email: "[email protected]",
    firstname: "ss",
    lastname: "ss",
    password: "ss",
  },
  {
    email: "[email protected]",
    firstname: "gow",
    lastname: "gow",
    password: "gow",
  },
];

const Table = () => (
  <table>
    <thead>
      <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Email Address</th>
        <th>Password</th>
      </tr>
    </thead>
    <tbody>
      {data.map((d) => (
        <tr key={d.email}>
          <td>{d.firstname}</td>
          <td>{d.lastname}</td>
          <td>{d.email}</td>
          <td>{d.password}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

// Render it
ReactDOM.render(<Table />, document.getElementById("root"));

<div id="root"></div>
<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>https://stackoverflow.com/questions/61100530/converting-array-data-into-a-table-in-react#

Collectives™ on Stack Overflow

Converting array data into a table in React

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related