DATA OUTSIDE TABLE IS NOT PRINTED OR VIEWED IN PRINT PREVIEW

[Trikcode]

When i print, data inside the table is displayed in the print preview but data out side is not for example this line is not displayed <h2 style={{ color: "green" }}>Attendance</h2>

class ComponentToPrint extends React.Component {
  // get props
  render() {
    return (
      <div>
        <h2 style={{ color: "green" }}>Attendance</h2>
        <table>
          <thead>
            <th>S/N</th>
            <th>Name</th>
            <th>Email</th>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Njoku Samson</td>
              <td>samson@yahoo.com</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Ebere Plenty</td>
              <td>ebere@gmail.com</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Undefined</td>
              <td>No Email</td>
            </tr>
          </tbody>
        </table>
      </div>
    )
  }
}

 <div style={{ display: "none" }}>
  <ComponentToPrint
    ref={el => (componentRef = el)}
  />
</div>
<img width="725" alt="attach" src="https://github.com/gregnb/react-to-print/assets/73602565/a4b0057c-ae2a-43da-98e7-b0a00b3923bd">

[siaikin]

Hello, could you please complete the code snippet? I can only find limited information to identify the problem from this incomplete code snippet.

Of course, it would be best to provide a Codesandbox or stackblitz example.

[Trikcode]

Here is the code distribution in my two components

[Trikcode]

only data contained in the Table component is displayed on print preview, for the first screenshot i shared (i was testing on small table data and it was doing the same)

[Trikcode]

[Trikcode]

i don't think this was the best fix but it worked for me (wraping the component in a table tag

`

      </div>`

[siaikin]

Hi @Trikcode

I suspect that there is CSS in your project that hides elements that are not wrapped in a table element when printing. You can enable print preview mode in Chrome's console to help identify the problem (https://stackoverflow.com/a/29962072).