how to create dynamic table in react

Question

I have started with reacr-redux. in that I have got some json data to populate as table structure. for that I have data like this

[
    {

        "year": 2016,

        "mix": [{

            "name": "A",

            "volume": 0.55,

        },
        {

            "name": "B",

            "volume": 0.2,

        },
        {

            "name": "C",

            "volume": 0.0,

        },
        {

            "name": "D",

            "volume": 0.0,

        }],

},
{

    "year": 2017,

    "mix": [{

            "name": "A",

            "volume": 0.55,

        },
        {

            "name": "B",

            "volume": 0.2,

        },
        {

            "name": "C",

            "volume": 0.0,

        },
        {

            "name": "D",

            "volume": 0.0,

        }],

},
{

    "year": 2018,

    "mix": [{

            "name": "A",

            "volume": 0.55,

        },
        {

            "name": "B",

            "volume": 0.2,

        },
        {

            "name": "C",

            "volume": 0.0,

        },
        {

            "name": "D",

            "volume": 0.0,

        }],

},
{

    "year": 2015,
    "mix" :[{

            "name": "A",

            "volume": 0.55,

        },
        {

            "name": "B",

            "volume": 0.2,

        },
        {

            "name": "C",

            "volume": 0.0,

        },
        {

            "name": "D",

            "volume": 0.0,

        }]
},
{

    "year": 2019,

    "mix": [
        {

            "name": "A",

            "volume": 0.55,

        },
        {

            "name": "B",

            "volume": 0.2,

        },
        {

            "name": "C",

            "volume": 0.0,

        },
        {

            "name": "D",

            "volume": 0.0,

        }
    ],


}
]

and I want my table structure like this. basically it extracts year and of that year all the mix. so final table structure should look like this

    2015    2016    2017    2018
A   0.55   0.55    0.55     0.55
B   0.2     0.2     0.2      0.2
C   0        0       0       0
D   0       0        0       0

for that I have written code like this

     <table className="table table-bordered">
                   <thead>
                    <tr>
                        <th></th>
                     {this.props.allYear.map((data) =>(
                       <th>{data.year.toString().substr(0,4)}</th> 
                     ))}
                    </tr>
                    </thead>
                    <tbody>
                    {this.props.allYear.map((data) =>(
                       data.mix.map((Data1) => (

                           <tr>

                               {Data1.name}
                           </tr>

                ))
                ))}
                    <td></td>
                {this.props.allYear.map((data) =>(
                    <td>
                       {data.mix.map((Data1) => {

                           return(
                               <tr>
                               {Data1.volume}

                           </tr>
                           )



                       })}
                </td>
                ))}

                     </tbody>

                </table>

but my all the data went 1 tr down because of the tr I have written so table looks like this

    2015    2016    2017    2018
A               
B               
C               
D               
    0.55    0.55    0.55    0.55
    0.2 0.2 0.2 0.2
    0   0   0   0
    0   0   0   0.

Please let me know how to fix this

@downvoter: please let me know where did I mistake so I can take care of that next time — LowCool
– LowCool, Commented Aug 8, 2017 at 20:11
The biggest issue is that your data array contains the columns, not the rows. So to keep the render function small, we need to restructure the entire data array so that each elements is a row of the final table. — user5734311
– user5734311, Commented Aug 8, 2017 at 20:27

user5734311 · Accepted Answer · 2017-08-08 21:03:59Z

I figured out a way to keep your original data structure:

var sorted = this.props.allYear.sort((a, b) => a.year - b.year);
// create rows object, letters as keys, each value an array of volumes
var rows = {};
sorted.forEach(function (year) {
    year.mix.forEach((data) => {
        if (!rows[data.name]) rows[data.name] = [];
        rows[data.name].push(data.volume);
    });
});

return (
    <table className="table table-bordered">
        <thead>
            <tr>
                <th></th>
                {sorted.map((data, i) => <th key={i}>{data.year}</th>)}
            </tr>
        </thead>
        <tbody>
            {Object.keys(rows).map((letter) =>
                <tr>
                    <td>{letter}</td>
                    {rows[letter].map((data) => <td>{data}</td>)}
                </tr>
            )}
        </tbody>
    </table>
);

However this assumes that there are no "holes" in the data.

Chase DeAnda · Accepted Answer · 2017-08-08 20:47:05Z

Your table structure is all kinds of wrong. What you are doing is creating 4 <tr> and then a bunch of random <td>. Basic table structure is table -> tbody -> tr -> td. You need to create two map functions. Like Chris G mentioned in a comment, your data structure is not setup to make this easy. It actually makes what you want to do a lot harder. I would suggest changing your data structure to something more like this:

[
    A: [{
        year: 2015,
        volume: 0.0
    },{
        year: 2016,
        volume: 0.0
    },{
        year: 2017,
        volume: 0.0
    }],
    B: [{
        year: 2015,
        volume: 0.0
    },{
        year: 2016,
        volume: 0.0
    },{
        year: 2017,
        volume: 0.0
    }],
   C: ...
]

Collectives™ on Stack Overflow

how to create dynamic table in 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