Print a table with pagenumbers

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>
  <table class="SetupMainTable" border='1px thin grey' style='border-collapse:collapse;'>
    <thead>
      <tr>
        <th colspan="4">Company Name</th>
        <th colspan="5" class="right" style="font-size:25px;">Daily Time Ticket</th>
        <th colspan="1">
          <div class="page-number"></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="5">123</td>
        <td colspan="5">abc</td>
      </tr>
      <tr>
        <td colspan="5">456</td>
        <td colspan="5">def</td>
      </tr>
      <tr>
        <td colspan="5">789</td>
        <td colspan="5">ghi</td>
      </tr>
      <tr>
        <td colspan="5">101112</td>
        <td colspan="5">jkl</td>
      </tr>
      <tr>
        <td colspan="5">131416</td>
        <td colspan="5">mno</td>
      </tr>
      <tr>
        <td colspan="5">171819</td>
        <td colspan="5">pqr</td>
      </tr>
      <tr>
        <td colspan="5">202122</td>
        <td colspan="5">stu</td>
      </tr>
      <tr>
        <td colspan="5">132435</td>
        <td colspan="5">vwx</td>
      </tr>
      <tr>
        <td colspan="5">1325125123</td>
        <td colspan="5">yza</td>
      </tr>
      <tr>
        <td colspan="5">xy2532351235z</td>
        <td colspan="5">bcd</td>
      </tr>
      <tr>
        <td colspan="5">12351235125</td>
        <td colspan="5">efg</td>
      </tr>
      <tr>
        <td colspan="5">1253251235</td>
        <td colspan="5">hij</td>
      </tr>
      <tr>
        <td colspan="5">2315346</td>
        <td colspan="5">klm</td>
      </tr>

    </tbody>
  </table>
  <template id="tables">
  <table class="SetupMainTable templateTable">
    <thead>
      <tr>
        <th colspan="4">Company Name</th>
        <th colspan="5" class="right" style="font-size:25px;">Daily Time Ticket</th>
        <th colspan="1">
          <div class="page-number"></div>
        </th>
      </tr>
    </thead>
  </table>
</template>

</body>
</html>

@media print {
  body {
    counter-reset: page;
    color: red;
  }
  .page-number:before {
    counter-increment: page;
    content: "Page "counter(page);
  }
  table {
    break-after: page !important;
  }
  /*This height is just for testing purposes. It can be dynamic if you want*/
  tr {
    height: 100px;
  }
  .templateTable {
    display: table;
  }
}

@media screen {
  body {
    counter-reset: page;
  }
  .page-number {
    text-align: center;
  }
  thead {
    display: table-header-group;
  }
  .page-number:before {
    counter-increment: page;
    content: "Page "counter(page);
  }
  .templateTable {
    display: none;
  }
}

//alter the dom to print the elements
window.addEventListener('beforeprint', (event) => {
  //specify the number of rows in the tBody per page
  
  //You can either hardcode this number or change it for every page with code
  let rowsPerPage = 4;
  var table = document.getElementsByClassName("SetupMainTable")[0];
  table.style.display = "none";
  printTableData(table, rowsPerPage);


});



function printTableData(table, rowsPerPage) {
  //initialise the table to get the data from
  var table = table.querySelectorAll("tbody")[0];
  var tBody;
  //get the template table
  let temp = document.getElementsByTagName("template")[0];
  //get the number of element for the last page
  let rowsOnLastPage = table.rows.length % rowsPerPage;

  for (var i = 0, row; row = table.rows[i]; i++) {

    if (i % rowsPerPage === 0 && table.rows.length - 1 != i) {
      //if it is the first element and not the only element on the last page
      //create new tBody
      tBody = document.createElement("tbody");
      var firstEl = row.cloneNode(true);
      tBody.appendChild(firstEl);
    } else if ((i + 1) % rowsPerPage === 0 || table.rows.length - 1 == i) {
      //if it is the last element for a page or the last element on the last page

      if (tBody == null) {
        //if there's only one element on the last page, create a new tBody
        tBody = document.createElement("tbody");
      }

      //clone the template
      var clon = temp.content.cloneNode(true);
      //clone the row to append to the tbody
      var cloneRow = row.cloneNode(true);
      //get the table element in the template
      var cloneTable = clon.querySelectorAll("table")[0];
      //append it all togehter
      tBody.appendChild(cloneRow);
      cloneTable.appendChild(tBody);
      //append the table to the page
      document.body.appendChild(clon);

      //reset the tBody
      tBody = null;
    } else {
      //clone a row and append it to the tBody
      var cloneRow = row.cloneNode(true);
      tBody.appendChild(cloneRow);
    }
  }
}

//reset the dom to the state before print
window.addEventListener('afterprint', (event) => {
  var table = document.getElementsByClassName("SetupMainTable");
  table[0].style.display = "table";
  //remove all the cloned tables
  var cloneTables = document.getElementsByClassName("templateTable");
  while (cloneTables.length > 0) {
    cloneTables[0].parentNode.removeChild(cloneTables[0]);
  }

});