Printing with headers inside a thead element

posted on April 14th, 2025

Answered

leandro f asked on April 14, 2025

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:

<tr>

<td class='filterHeaderCell level0' style='width:100px;'>Order Date</td>

</tr>

<tr>

<td class='rowHeaderCell level0 level0' style='width:100px;'>Country</td>

<td class='columnHeaderCell' style='width:121px;'>Total Sum of Price</td>

</tr>

<tr><td class='rowHeaderCell level0' style='width:100px;'>Australia</td>

</tr>

....

What would be ideal:

<thead>

<tr>

<td class='filterHeaderCell level0' style='width:100px;'>Order Date</td>

</tr>

<tr>

<td class='rowHeaderCell level0 level0' style='width:100px;'>Country</td>

<td class='columnHeaderCell' style='width:121px;'>Total Sum of Price</td>

</tr>

</thead>

<tr><td class='rowHeaderCell level0' style='width:100px;'>Australia</td>

</tr>

....

Thanks

5 answers

Public

Solomiia Andrusiv ⋅ Flexmonster ⋅ April 15, 2025

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

Public

leandro f ⋅ April 15, 2025

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?

Public

Solomiia Andrusiv ⋅ Flexmonster ⋅ April 16, 2025

Hello, Leandro!

Thank you for your quick response.

Our team agrees that having more detailed syntax for HTML export makes sense for some use cases. Kindly note that the destination: 'plain' feature in Flexmonster was created exactly for such cases, allowing developers to add the specific functionality they need.

Regarding the example we provided for reference, you are welcome to improve it to include all the necessary lines in the <thead> area. For example, you can add a selector for the <tr> with columnHeaderCell class and find the biggest index.

Hope it helps.

Kind regards,
Solomiia

Public

leandro f ⋅ April 16, 2025

Hello, thanks for the reply.

I understand, but I can't select all the headers, because I didn't find a specific class that is applied only to headers. For example, this is the table row that goes into your if and increments the variable "theadEndIndex":

But in fact the tr that goes into the thead is another one.

How could I create a script that in this example would put the first 3 tr inside the thead?

Public

Solomiia Andrusiv ⋅ Flexmonster ⋅ 6 days ago

Hello, Leandro!

Thank you for your response.

Kindly note that we use the columnHeaderCell class to highlight all column header cells with members, which can be used as a selector.
Depending on the slice, there can be a layout when there are no members in the header cells(e.g., more fields in rows than in columns), so it is better to look for the index of the last row with the specified class, rather than to count all the rows.
We have modified the provided example to include this use case in the solution: https://jsfiddle.net/flexmonster/vyxbL0ap/.

Hope it helps.

Kind regards,
Solomiia

Changes to Flexmonster Software License Agreement

Printing with headers inside a thead element

5 answers

Please login or Register to Submit Answer