Rendering a table using reactjs

Question

Hi Im starting with the reactjs. After working with the basics in react, Im trying to work on the reactjs with dynamoDB. First query Im working on is Select query, and render the table in html file. So right now Im able to get the json array from desired table using select query. But Im not able display the rendered data in a table format i.e I get a json array like below and able to display data 4281, taniv, secondary... but not able to display the header for each value (id, name, class, etc.), so how to display the header for each json value. I want it to be dynamic because I want to show what is in the db(if some of the attributes are not there or missing I don't want it to be displayed) :

This an example I refered to get the data from db

 [
    {
      "id": 4281,
      "name": "taniv",
      "class": "secondary",
      "admission": 227,
      "telephone": "209-109-2322",
      "address": "11 first lane",
      "postCode": "5788009",
      "county": "UK",         
    }]

js

<div id="third" >
                    <label> Result </label>
                    <br />
                    <table>
                        <tbody>
                            <tr>
                                <th>  </th>   
                            </tr>
                            <tr>
                                {data.map((obj, y) => {
                                    return Object.keys(obj).map((x, y) => <td> {obj[x]} </td>)
                                })}    
                            </tr>
                        </tbody>
                    </table>
                    <Paginator>

Can you post the actual React code that's not properly showing the header? We can't help you with this information. — Andy Ray
– Andy Ray, Commented May 15, 2017 at 17:59
@AndyRay I have include the js page where Im trying to display th table — Rudhra
– Rudhra, Commented May 15, 2017 at 18:09

jonmajorc · Accepted Answer · 2017-05-15 19:14:25Z

1

I made an example on codesandbox.io for you (:

From what I understood you are trying to make your table completely dynamic. You essentially want keys in your object to be table headers and corresponding values to be table row data. Please checkout the example and let me know if this helps or if you have any questions you can find me on Twitter (@jonmajorc). Good luck!

edited May 15, 2017 at 19:14

answered May 15, 2017 at 19:02

jonmajorc

461 silver badge6 bronze badges

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

Collectives™ on Stack Overflow

Rendering a table using reactjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related