PDF generation - Keep table header with next (keepTogether)

Progress® KendoReact Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 07 Dec 2021 06:11 by ADMIN

Thomas

Created on: 06 Dec 2021 10:34

Category: KendoReact

Type: Feature Request

PDF generation - Keep table header with next (keepTogether)

Hi,

When a table overflows from one page to another, I have not been able to find a way to ensure the table header and the next row stay together.

I am looking to use the keepTogether property to achieve this, but as this takes in a CSS selector, I am unable to set one that encompasses both the 'thead' and first 'tr' within the 'tbody'. In other cases I can achieve this by wrapping with a 'div', but due to it being a table there is no suitable element that can group these together. Is there a solution to this problem?

As a result the table can split on the first row, which also causes the table widths to be different (as shown below).

3 comments

ADMIN

Stefan

Posted on: 07 Dec 2021 06:11

Hello, Thomas,

Thank you for the confirmation.

I have transferred this to an official public feature request.

We will monitor the interest in it and plan it accordingly.

I have also already added your vote for convenience.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Thomas

Posted on: 06 Dec 2021 15:01

Hello Stefan,

That is correct, it is to keep the header and first row, not the entire table.

I think this would be a very powerful feature, so please transfer this to a public feature request. For example, keeping a heading with the first paragraph, image with caption and so on. While some can be solved by wrapping in a parent div, a table cannot.

Then passing something like this into the keepTogether would be ideal:

<PDFExport
    keepTogether={["center", ["h1", "p"], ".keepTogether"]}
    title={name}
    ref={pdfExportComponent} 
    paperSize="a4"
    margin={{ top: 50, left: 50, right: 50, bottom: 70 }}
    scale={0.7}
>
    ...
</PDFExport>

Regards,

Thomas

ADMIN

Stefan

Posted on: 06 Dec 2021 14:51

Hello,

To ensure that we understand the requirement correctly, please confirm the following.

The requirement is to keep together only the header and the first row, not the header and the entire table? If this is the case, indeed the keepTogether functionality needs a specific element that does not have to be split. If you need to have a collection of elements, we can transfer this to an official public feature request to allow passing an array of selectors that will be kept together.

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.