JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" cellspacing="0">
    <tr>
        <th>Sl.No</th>
        <th>Value 1</th>
        <th>Value 2</th>
        <th>Value 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>5</td>
        <td>0</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>7</td>
        <td>0</td>
        <td>4</td>
    </tr>
    <tr>
        <td>3</td>
        <td>1</td>
        <td>0</td>
        <td>10</td>
    </tr>
    <tr>
        <td>4</td>
        <td>8</td>
        <td>0</td>
        <td>3</td>
    </tr>
    <tr>
        <td>5</td>
        <td>13</td>
        <td>0</td>
        <td>6</td>
    </tr>
</table>
<br/>
<input type="button" value="Print Preview" onclick="printpage()" />

JavaScript

function printpage() {
    var data = '<table border="1" cellspacing="0"><tr><td colspan="4">Sample Report</td></tr>' + document.getElementsByTagName('table')[0].innerHTML + '</table>';
    data += '<br/><button onclick="window.print()"  class="noprint">Print the Report</button>';
    data += '<style type="text/css" media="print"> .noprint {visibility: hidden;} </style>';
    myWindow = window.open('', '', 'width=800,height=600');
    myWindow.innerWidth = screen.width;
    myWindow.innerHeight = screen.height;
    myWindow.screenX = 0;
    myWindow.screenY = 0;
    myWindow.document.body.innerHTML = data;
    myWindow.focus();
}