Export two excel data into single excel sheet by adding heading and some calculated data

Question

I am using react-data-export to export the excel sheet in my react project. I need to export two excel data in single file. Example

If not possible the above module please suggest me a new way to do so.

Answer 1

I have published a simple proof of concept that it should be useful to understand how it is possible to satisfy the needs in the question to export two excel data in single file.

In the ExcelSheet components it is possible to pass a dataSet that allows any number of data tables and other features such as column headers and the offset in rows and columns between a data table and the subsequent one.

• The data attribute of ExcelSheet is for one data table.
• The dataSet attribute of ExcelSheet is for one or more data table

In the react-data-export git repo there is also an example simple_excel_export_02 but I have not been able to make it work, also there is a open issue with some suggestions I've learned for my POC.

Answer 2

Here is my solution.

Inside ExcelSheet there is a property called dataSet. which is used to generate data to our excel. So you can add multiple data to the dataSet. Please see my code below. Here I am using field called generatedData, which contains rows and columns for our excel. So you can add multiple objects of data inside array to order in your single excel sheet. Result will be exactly what you asking above

import ReactExport from 'react-data-export';
const ExcelFile = ReactExport.ExcelFile;
const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
const ExcelColumn = ReactExport.ExcelFile.ExcelColumn;

const VesselReportExcelGenerator = (props) => {
    const [exportModalOpen, setExportModalOpen] = useState(false);
    const [excelData, setExcelData] = useState([]);
    const vesselReportApi = new VesselReportApi();
    var generatedData = [
        {
            columns: columns,
            data: excelData
        },
        {
            columns: columns,
            data: excelData
        }
    ];

    useEffect(() => {
        fetchVesselReportFormStructure();
    }, []);

    const fetchVesselReportFormStructure = async () => {
        try {
            const vesselReportFormStructure = await vesselReportApi.getVesselReportFormStructure();
            setExcelData(vesselReportFormStructure);
        } catch (error) {
            console.log(error);
            props.setMessages([{type : "danger", message : 'Something went wrong. Please try again!'}]);
        }
    };

    return (
        <Container fluid className="VesselReportExcelBackground">
            <Col lg={7}>
                <Row style={{ justifyContent: 'center', height: '2rem',paddingTop: "40px",height: "10%" }}>
                    <div style={{fontSize: "2rem",color: config.KSTColors.MAIN,fontWeight: "900",}}>
                        OFFLINE VESSEL REPORT
                    </div>
                </Row>
                {/* Export Vessel report excel UI */}
                <Row xs={12} md={3} style={{backgroundColor: config.KSTColors.CARD_BG,height: "150px",borderRadius: "15px",marginTop: "40px"}}>
                    <Col xs={3} lg={3} style={{ padding: "0px" }}>
                        <Button className="VesselReportExcelEditButton" style={{ backgroundColor: config.KSTColors.MAIN,borderColor: config.KSTColors.MAIN,width: "100%"}} onClick={() => setExportModalOpen(true)}>
                            {/* <FontAwesomeIcon icon={faFileExport} style={{color: config.KSTColors.ICON,fontSize: "60px"}} /> */}
                            <img src={VesselExportIMG} alt="Excel Export" style={{height: "120px"}}/>
                        </Button>
                    </Col>
                    <Col xs={6} lg={6}>
                        <div style={{display: "flex",width: "100%",height: "100%",flexDirection: "column",justifyContent: "center"}}>
                            <div style={{marginTop: "5px",width: "100%",height: "50%",color: config.KSTColors.MAIN,fontSize: "32px",
                                display: "flex",justifyContent: "center",alignItems: "center"}}>
                                Download Template
                            </div>
                        </div>
                    </Col>
                </Row>
            </Col>
            <Modal size="lg" show={exportModalOpen} onHide = {() => setExportModalOpen(false)} aria-labelledby="VRTemplateDownload" centered>
                <Modal.Header style={{ backgroundColor: '#e6e6e6' }}>
                    <Modal.Title id="VRTemplateDownload">Export Vessel Report Template</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <span style={{fontSize: "12px"}}>Are you sure to generate {loggedInVesselName} vessel report?</span>
                </Modal.Body>
                <Modal.Footer style={{ color: '#04588e' }}>
                    <Button onClick={() => setExportModalOpen(false)} style={{ backgroundColor: 'white', color: '#04588e', paddingTop: '2px', paddingBottom: '2px', paddingLeft: '20px', paddingRight: '20px' }}>Cancel</Button>
                    <ExcelFile filename={`${loggedInVesselName}_DailyLogTemplate`} element={<Tooltip title="Export Daily Log Template" placement="bottom"><Button style={{ backgroundColor: '#04588e', color: 'white', paddingTop: '2px', paddingBottom: '2px', paddingLeft: '20px', paddingRight: '20px' }}>Daily Log</Button></Tooltip>}>
                        <ExcelSheet dataSet={generatedData} name="Daily Log" />
                    </ExcelFile>
                </Modal.Footer>
            </Modal>
        </Container>
    );
};

export default withMessageManager(VesselReportExcelGenerator);

Answer 3

You should look into more programming approaches like the one in pandas library on python.