Print window prints only the first page. No scroll visible on print preview in jQuery Datatables in angular 7

I am using Jquery Datatable in angular 7 so as to open the table contents in Print Preview window as given in example Datatable. I am able to get the data but when I click on Print button to open the print preview screen It opens but only first page is displayed as my table contains 50+ rows. The outer scroll is not visible as in the example Datatable.

 <table id="tblDetails" class="stripe  responsive no-wrap" style="width:100%">
       <thead>
           <tr>
            <th>TRANSACTION DATE</th>
            <th>DESCRIPTION</th>
            <th>DEBIT</th>
            <th>CREDIT</th>
            <th>CURRENT BALANCE</th>
            </tr>
       </thead>
</table>

In My component.ts

 $("#tblStatementDetails").DataTable({
      data: this.statementDetails,
      retrieve: true,
      border: false,
      className: "",
      orderClasses: false,
      responsive: true,
      scrollX: true,
      paging: false,
      dom: "Bfrtip",
      buttons: [
        {
          extend: "print",
          title: "",
          customize: function (win) {
            debugger;


            $(win.document.body)
              .find("table").addClass('compact');

          }
        }
      ],

      columns: [
        { data: "dtCaptureDate", className: "text-center ", width: "7%", border: "none", color: "#8a807f !important", },
        { data: "szTransactionDescription", className: "text-center", width: "15%", border: "none", color: "#8a807f !important" },
        { data: "Debits", className: "text-center", width: "7%", border: "none", color: "#8a807f !important" },
        { data: "Credits", className: "text-center", width: "7%", border: "none", color: "#8a807f !important" },
        { data: "szRedCapital", className: "text-center", width: "7%", border: "none", color: "#8a807f !important" },
      ]
    });

in my angular.json

"src/assets/datatable/js/jquery.dataTables.min.js",
"src/assets/datatable/js/dataTables.buttons.min.js",
"src/assets/datatable/js/buttons.flash.min.js",
"src/assets/datatable/js/jszip.min.js",
"src/assets/datatable/js/pdfmake.min.js",
"src/assets/datatable/js/vfs_fonts.js",
"src/assets/datatable/js/buttons.html5.min.js",
"src/assets/datatable/js/buttons.print.min.js"

In index.html I have added

  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />

  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" />