extra row appearing in generated excel

Viewed 222

I'm using npm package xlsx to generate excel reports which have table within table. everything is working fine except you can see in the attached screenshot that line#10 is the same as all the table below that. I'm sure i'm making an html table error but after two hours could not figure out what the error actually is. I've attached the screenshot and html.

Screenshot of report

import React from 'react';

const Report = ({ data }) => {
  // console.log(data);
  return (
    <table>
      <tbody>
        <tr>
          <td style={{ width: '200px', backgroundColor: 'yellow' }}>
            Source Name:
          </td>
          <td>SOme cool report</td>
        </tr>
        <tr>
          <td>Report Name:</td>
          <td colSpan='6'>
            02 Dummy
          </td>
        </tr>
        <tr />
        <tr>
          <td>Data Write:</td>
          <td>Append to Previous Data</td>
        </tr>
        <tr>
          <td>Download Date:</td>
          <td>19/04/2021 13:16</td>
        </tr>
        <tr>
          <td>SR Id:</td>
          <td>99931</td>
        </tr>
        <tr>
          <td>Data Period:</td>
          <td> 2021/3</td>
        </tr>
        <tr>
          <td>Report Period: </td>
          <td>Monthly </td>
        </tr>
        <tr>
          <td>sdfasdfasdf:</td>
          <td>sdfsdf</td>
        </tr>
        <tr>
          <td>
            <table>
              <tbody>
                <tr>
                  <td></td>
                  <td colSpan='2'>Less than 1</td>
                  <td colSpan='2'>{'1-4'}</td>
                  <td colSpan='2'>{'5-9'}</td>
                  <td colSpan='2'>{'10-14'}</td>
                  <td colSpan='2'>{'15-19'}</td>
                  <td colSpan='2'>{'20-24'}</td>
                  <td colSpan='2'>{'25-44'}</td>
                  <td colSpan='2'>{'45-64'}</td>
                  <td colSpan='2'>{'65+'}</td>
                </tr>
                <tr>
                  <td>Dummy</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                </tr>
                {Object.keys(data).map((d) => (
                  <tr>
                    <td>{d}</td>
                    <td>{data[d]?.abc?.male}</td>
                    <td>{data[d]?.abc?.female}</td>
                    <td>{data[d]?.cde1?.male}</td>{' '}
                    <td>{data[d]?.cde1?.female}</td>
                    <td>{data[d]?.cde2?.male}</td>{' '}
                    <td>{data[d]?.cde2?.female}</td>
                    <td>{data[d]?.cde3?.male}</td>
                    <td>{data[d]?.cde3?.female}</td>
                    <td>{data[d]?.abcd1?.male}</td>
                    <td>{data[d]?.abcd1?.female}</td>
                    <td>{data[d]?.abcd2?.male}</td>
                    <td>{data[d]?.abcd2?.female}</td>
                    <td>{data[d]?.ere1?.male}</td>
                    <td>{data[d]?.ere1?.female}</td>
                    <td>{data[d]?.ere2?.male}</td>
                    <td>{data[d]?.ere2?.female}</td>
                    <td>{data[d]?.ou?.male}</td>
                    <td>{data[d]?.ou?.female}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  );
};

export default Report;
1 Answers

The nested table HTML structure is causing entire table to create extra row.

Delete this lines from your code - and that should remove extra line being added to excel sheet.

    <table>
      <tbody>
        <tr>

from your code.

See the corrected code here (You can not run it on codesandbox due to unsupported methods - but the code work on local setup)

https://codesandbox.io/s/extrarowexcelsheet-333cv?file=/src/App.js

import React from "react";
import XLSX from "xlsx";
import { useRef } from "react";


const Report = () => {
  // Data is just placeholder
  const [data, setData] = React.useState([["Hello"], ["Bye"]]);
  const myContainer = useRef(null);

  const exportFile = () => {
  
    const ws = XLSX.utils.table_to_sheet(myContainer.current);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
    /* generate XLSX file and send to client */
    XLSX.writeFile(wb, "sheetjs.xlsx");
  };

  return (
    <div>
      <h2> This is Demo for StackOverFlow Issue #68269850</h2>
      <p> Extra row appearing in generated excel </p>
      <button
        style={{ backgroundColor: "#4CAF50", padding: "10px" }}
        onClick={exportFile}
      >
        Press Me to Generate Excel Sheet{" "}
      </button>

      <hr />

      <table ref={myContainer}>
        <tbody>
          <tr>
            <td style={{ width: "200px", backgroundColor: "yellow" }}>
              Source Name:
            </td>
            <td>SOme cool report</td>
          </tr>
          <tr>
            <td>Report Name:</td>
            <td colSpan="6">02 Dummy</td>
          </tr>
          <tr />
          <tr>
            <td>Data Write:</td>
            <td>Append to Previous Data</td>
          </tr>
          <tr>
            <td>Download Date:</td>
            <td>19/04/2021 13:16</td>
          </tr>
          <tr>
            <td>SR Id:</td>
            <td>99931</td>
          </tr>
          <tr>
            <td>Data Period:</td>
            <td> 2021/3</td>
          </tr>
          <tr>
            <td>Report Period: </td>
            <td>Monthly </td>
          </tr>
          <tr>
            <td>sdfasdfasdf:</td>
            <td>sdfsdf</td>
          </tr>

          <tr>
            <td></td>
            <td colSpan="2">Less than 1</td>
            <td colSpan="2">{"1-4"}</td>
            <td colSpan="2">{"5-9"}</td>
            <td colSpan="2">{"10-14"}</td>
            <td colSpan="2">{"15-19"}</td>
            <td colSpan="2">{"20-24"}</td>
            <td colSpan="2">{"25-44"}</td>
            <td colSpan="2">{"45-64"}</td>
            <td colSpan="2">{"65+"}</td>
          </tr>
          <tr>
            <td>Dummy</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
          </tr>
          {Object.keys(data).map((d) => (
            <tr>
              <td>{d}</td>
              <td>{data[d]?.abc?.male}</td>
              <td>{data[d]?.abc?.female}</td>
              <td>{data[d]?.cde1?.male}</td> <td>{data[d]?.cde1?.female}</td>
              <td>{data[d]?.cde2?.male}</td> <td>{data[d]?.cde2?.female}</td>
              <td>{data[d]?.cde3?.male}</td>
              <td>{data[d]?.cde3?.female}</td>
              <td>{data[d]?.abcd1?.male}</td>
              <td>{data[d]?.abcd1?.female}</td>
              <td>{data[d]?.abcd2?.male}</td>
              <td>{data[d]?.abcd2?.female}</td>
              <td>{data[d]?.ere1?.male}</td>
              <td>{data[d]?.ere1?.female}</td>
              <td>{data[d]?.ere2?.male}</td>
              <td>{data[d]?.ere2?.female}</td>
              <td>{data[d]?.ou?.male}</td>
              <td>{data[d]?.ou?.female}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Report;
Related