CODEWITHSUNDEEP
htmlcssangular
Hienz
Hienz

Reputation: 718

Angular material table print view

I'm using angular material version 9.2.4 and created a data table with pagination. I want my users to be able to print this table, I already removed every unnecessary element from the page with @media print, but the table's behavior is weird. I want my table rows to break to a new page if it cannot fit the page because of the number of rows, but it just skips the remaining data.

What I've tried so far:

  1. Adding this to my css:

    table {
  page-break-inside: auto;
}
tr {
  page-break-inside: avoid;
  page-break-after: auto;
  display: inline-block;
}
thead {
  display: table-header-group;
}
tfoot {
  display: table-footer-group;
}

  2. Wrapping all table elements inside div, because I've read that the above CSS properties can ignore non-block-displayed elements.

    $(document).ready(function(){$("table tbody th, table tbody td").wrapInner("<div></div>");});

Any other ideas?

Upvotes: 2

Views: 4152

Answers (1)

JerMah
JerMah

Reputation: 763

I had the same problem but this has nothing to do with mat-table. This solution is highly specific to the rest of your page but this worked for me. I have a sidenav component with perfect-scrollbar and this caused the height to be limited.

I added this to master-layout.component.scss

@media print {
  .mat-drawer-content {
    height: auto !important;
  }
  .mat-drawer-container {
    overflow: inherit !important;
  }
  perfect-scrollbar {
    height: auto;
    max-height: none;
  }
  mat-sidenav-container {
    overflow: inherit !important;
  }
}

More usefull will probably be the way I came to this. Open the DevTools of your browser and enable "Emulate CSS media Type", set it to "print". You can now inspect your page and the @media print tags will be enabled.

Now go over the elements and look at the renedered height. It should be larger than your window. If it's not, it must be limited by overflow: hidden, height: 100% or max-height: 100%. Adjust CSS so these are set to auto or inherit. Go up the elements untill none of the heights are limited to the window size.

Upvotes: 1

Related Questions