Soy nuevo en esto, traté de encontrar formas de hacerlo, pero no pude.

Estoy realizando una exportación a Excel con un clic en el botón Exportar y los datos se guardarán en formato de archivo .csv o .xlsx .

Quiero que los datos se guarden de la siguiente manera:

Pero de alguna manera no sé cómo hacerlo en ReactJs.

He intentado algo como esto:

 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>

Obtengo todos los datos adecuados de la base de datos. Solo quiero que se exporte de una manera particular en un archivo de Excel como se muestra en la imagen de arriba. También vea cómo las filas y las columnas se fusionan con el centro como formato y la fuente en negrita. Quiero que mis datos se exporten exactamente de la misma manera que en la imagen de arriba.

Necesito formatear correctamente el archivo de Excel en los headers más o menos.

No sé cómo hacerlo. Necesitas ayuda.