how to render table from json input react

Question

I am rendering an Json from DB and want to dispay the json in interactive table.

Using react 17.0.1 version

[
    {
        "Sno": "1",
        "First Name": "name",
        "Last Name": "las2t name",
        "Email": "[email protected]",
        "Amount": "2000"
    },
   {
        "Sno": "1",
        "First Name": "first name",
        "Last Name": "last name",
        "Email": "[email protected]",
        "Amount": "2000"
    }
]

Badal Sherpa · Accepted Answer · 2021-03-02 13:31:05Z

1

You can fetch the data as an array and map it inside the custom HTML table or use any react-table. Here is how you do it.

let say your data is fetched in data[] array from the database, then you can map it like this


{data.map((l, i) => (
       <table style="width:100%">
  <tr>
    <th>Sno</th>
    <th>First Name</th>
    <th>Last Name</th> 
    <th>Email</th>
     <th>Amount</th>
  </tr>
  <tr>
    <td>{l.sno}</td>
    <td>{l.FirstName}</td>
    <td>{l.LastName}</td>
    <td>{l.Email}</td>
    <td>{l.Amount}</td>
  </tr>
</table>
      ))}

answered Mar 2, 2021 at 13:31

Badal Sherpa

5771 gold badge8 silver badges23 bronze badges

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

Comments

AbhishekGowda28 · Accepted Answer · 2021-03-02 13:04:35Z

0

Parsing of data and rendering it in the client side is left to the developers to handle. React doesn't do it for us. You can use react-table with little bit of configuration you can customize as you want.

answered Mar 2, 2021 at 13:04

AbhishekGowda28

1,09412 silver badges20 bronze badges

Collectives™ on Stack Overflow

how to render table from json input react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related