I am new at this, tried to find ways to do it,but was not able to.

I am performing export to excel on a click of Export button and data to be saved in .csv file or .xlsx file format.

I want the data to be saved in below way:

But somehow I dont know how to do it in ReactJs.

I have tried something like this :

this.state = {
            headers: [
                { key: 'srNo', label: 'srNo' },
                { key: 'student', label: 'student'}, 
                { key: 'student.firstname', label: 'firstname'},
                { key: 'student.lastname', label: 'lastname'},
                { key: 'student.age', label: 'age'},
            ]
        };

<Button>

                                <Button 
                                    style={{ float: "right", margin: "5px" }}
                                    variant="contained"
                                    color="primary"
                                    onClick={this.ExportToExcel}
                                    data={this.props.student.records}
                                    headers={this.state.headers}
                                    filename={"test.csv"}
                                    // filename={"menu.csv"}
                                    className="btn btn"
                                    target="_blank"
                                    >
                                        Export
                                    </Button>

I get all the proper data from the database. I just want it to get exported in a particular way in excel file as shown in the image above. Also see how the rows and columns are merged with center as formatting and the font being bold. I want my data to get export in the exact same way as in the image above.

I need to do proper formatting of the excel file in headers or so.

I don't know how to go about it. Need help.