asked 2 days ago
Hello,
We are using the exportTo method for html with destinationType: html, and we would like the report headers to be wrapped in a "thead" element, would that be possible?
This would greatly help reports with many records that generate pages, since by default the browser repeats and fixes "thead" at the top of each page when printing.
What the currently generated HTML looks like:
<table class='grid'>
<tr>
<td class='cell'></td>
<td class='filterHeaderCell level0' style='width:100px;'>Order Date</td>
<td class='cell'></td>
<td class='cell'></td>
</tr>
<tr>
<td class='rowHeaderCell level0 level0' style='width:100px;'>Country</td>
<td class='columnHeaderCell' style='width:100px;'>2018</td>
<td class='columnHeaderCell' style='width:100px;'>2019</td>
<td class='columnHeaderCell' style='width:121px;'>Total Sum of Price</td>
</tr>
<tr><td class='rowHeaderCell level0' style='width:100px;'>Australia</td>
<td class='totalCell' style='text-align:right;width:100px;'>22 267</td>
<td class='totalCell' style='text-align:right;width:100px;'>60 493</td>
<td class='grandTotalCell' style='text-align:right;width:121px;'>82 760</td>
</tr>
....
What would be ideal:
<table class='grid'>
<thead>
<tr>
<td class='cell'></td>
<td class='filterHeaderCell level0' style='width:100px;'>Order Date</td>
<td class='cell'></td>
<td class='cell'></td>
</tr>
<tr>
<td class='rowHeaderCell level0 level0' style='width:100px;'>Country</td>
<td class='columnHeaderCell' style='width:100px;'>2018</td>
<td class='columnHeaderCell' style='width:100px;'>2019</td>
<td class='columnHeaderCell' style='width:121px;'>Total Sum of Price</td>
</tr>
</thead>
<tr><td class='rowHeaderCell level0' style='width:100px;'>Australia</td>
<td class='totalCell' style='text-align:right;width:100px;'>22 267</td>
<td class='totalCell' style='text-align:right;width:100px;'>60 493</td>
<td class='grandTotalCell' style='text-align:right;width:121px;'>82 760</td>
</tr>
....
Thanks
⋅ 1 day ago
Hello, Leandro!
Thank you for reaching out to us.
Kindly note that it is possible to customize HTML export in Flexmonster and add all the necessary tags using destinationType: plain in exportTo() API call as follows:
flexmonster.exportTo(
"html",
{
destinationType: "plain",
},
(html) => {
// html.data will return the stringified html
// so you can add your customizations here
}
);
You can read more about exporting in our guide: https://www.flexmonster.com/doc/export-report/#html.
We have also prepared a JSFiddle illustrating how to add <thead> into the exported HTML: https://jsfiddle.net/flexmonster/hfzy2610/.
Hope you will find our answer helpful.
Kind regards,
Solomiia
⋅ 22 hours ago
Hello, thanks for the feedback.
We are doing it this way today. However, we are having difficulty selecting all the headers. In your example, these are the elements that were inside the "thead" and will be fixed at the top:
However, I understand that the line "City - 2018 - 2019 - Grand total" should also be in the "thead", right?
Since I understand that this is a feature that improves the printing experience for everyone, I believe it could be in the core lib, does that make sense?
