Help: How To Wrap Table Headers and Footers Properly? (Repl Included)

[eldieco]

I've got these long reports that have to loop over lots of data and display them in table format.

How do I get the table header to not render by itself at the bottom of the page (with no item rows)? Page 1 demonstrates this as you'll see the table header rendered at the bottom of the page while the items that belong to that table get rendered on the next page. I don't want that. I want it so that if it can't render at least one item with the header, the table header will put itself on the next page.

Likewise, how do I prevent the table footer (with the totals) from rendering separately at the top of the next page without at least one item row above it? At the very top of Page 7 is a good example of this.

Link to Repl

[eldieco]

Well per usual, I got it working right after I ask for help. I could have sworn I had tried this already, but whatever. I added wrap={false} to the View component on line 1546 and that seems to have done the trick. These reports I'm building seem to be pushing the memory limits of my browser.

[jeetiss]

Else you can use minPresenceAhead property. We don't have a lot of information about it in docs 👉🏻 https://react-pdf.org/advanced#orphan-&-widow-protection, but it can help too

Link to fixed repl

[eldieco]

Thank you! Yeah, so wrap={false} doesn't help exactly because I do want it to wrap where possible, but this will just push the entire table to the next page. minPresenceAhead sounded potentially useful, but, like you said, there isn't much to go on in the docs. It does appear that your solution has achieved the desired result.

Let me ask you this now:

Is there a way to show the table header again at the top of the page if the rows are broken up between pages so that the user has better context of the column data?

In other words, if the table rows span two pages, I'd like to show the table header on both pages for that table. Does that make sense?

[Fahim-ju]

Had you found the answer? I am having same issue.

[dylnclrk]

I'm dealing with this same issue, I was wondering if you could provide the REPL link so I can take a look at how you structure your table in the fixed version?

FWIW, I can't seem to get minPresenceAhead to work as expected.

[jeetiss]

github cut out links that are bigger than 2k symbols

You can copy the link to REPL with this table here: https://github.com/jeetiss/react-pdf-repl/blob/main/README.md?plain=1#L26

[andreawyss]

@jeetiss this example shows how a new table will not start rendering at the bottom of a page but instead start on the next page.

https://react-pdf-repl.vercel.app/?cp_code=JYWwDg9gTgLgBAbzgZRgTwDYFNkAstYwA0cAIhAMYCuIWAdsXACpYAejAasFgO4kAKAQwDmWOAF84AMygQQcAOQABKFkEUYAWjAATKQHpVdHVlVQFAKAsUIdAM7wdgmILgBeOAG0LcRD99wGIIOAHKCtABcigAywTAKRP6-UsBQoeFYUQoAYqkOCUlwwDBYIHZR3gEBCIVVNiZZAAwAjADMACwFVVV0GVkAqnTAAG6mdsVocADyUnBcUMLAQ64AwoLDghjcacz4UCAQyKajcK0ATBAAXsw0AEbY5ondAQCO6FHNT89wYFDAFJk4M1GiCvs9bFs6ICYFAqFgwd0IUssABFd5AhG-cSYvzfOD1QEKRoAVmaxK6316kUUACkIFQoFDJhBZtlBMVcHBstBFicOIIhhggnAAEJqOhwNbGbAU55vNBRM443y_f6As7E0G1AJIqFRGFw5VwXWo9FK7XYwoAXQRMAgLgwaIVp1t9s2UzokNNztarodUygJigAEEDlQGFEAGwgxpfS2-GpVILpakKWL5BEpNIwMKp3LZ2VFEplCraxPfAlZVoggAchZ6fUUK3pDCgkxWuD-DhAwTgACUsKM0sB7mIAOLAKTwADqUEEYDgNLuEH7ECF9de6M-2pVfwBHxrWrxJv1sPhO-NnuRTo-OPjARthTtDpvGKfbowHq9r-3VWf7sDUxQxbGADyPCQvnLXxkxzRs0ziQssxTQl8wzQpilKcovDLC9K0UYFGk6I0qUJZAqGEQQoElCAIAAa24Mh6WEXAN18eVbwvVV9zgM4znA8Erz1OADXPY9BO9DjnnvKooO6PCiWBZpWLgEisiEMBTB4XAMLsUUqAwW47GU9i3zxLjAWaQ9YwvE9hLPI0TR_O8cVkuoIAaRQWjaZTVMUYMhWAGg4AnAV4H4BkwGwFB6DsZxgFsOBNDgYk9IMoyjRM39vnMxUYwc8TT0NGzxKci0EUfP8P1fABOP13RK9Favff1AJDMMIyBYlo2srFIMKGDc0JdN4kzPJYLzMbCwwktsOeVyAnkgilOIuCO0oNdnDEDtw1o6i6IY8hyJYjKtyNHKeL4nrvlskT8u_U6ypwvFFpBckVupAAiABZAAyL6FGQSUBR0bg7AAKj2-ixEO5iPpO50suec7eP4xECrsoqxPuhHnKeit3MJYlWk1Hy4P4cUqHgEVKZKKixUo9KL0ys69ws9pUaqG77OK7HJO6aS4AqgJ_0ddFfWa-reZdCXP1a4Dw1A5KrLjRIrQAbmsWwHB-WRhDneQPHLHkBWAS44tsKJZN8hRPBCYMvoAUStQswFwWxCU8fgAAkphCJ2KUtcQNc1-x4Dd2hZDkdxcWEtQKD2QasmQEAOQpPXBA8hRlosIOQ-1lEqGAVh7TEDwAAoAEp3AAPjgMv_AAHnIahaAYavCgboRRDgcZLiwNwPuwGBaY-40_noFwYHiugB6CYw7AoecsFHhxMH7hBPDAEQcHQbA7AAOludy0CtcR2-eBvUCoEwGADIMyJAHs2y9tQgx1iB05ANwEF-D_9ckcOpgaJfwQIAyOIBJD6HPt0S-SxhDYC9nIIBUcnAuG_qgwQkDoFVE7tvEIdwxhwCgR3fQXcsDQIbvoZuNAJ7twrsHGwocUBwIQUg8B0cy5IAwRIKubha7ln0PoaQwAMC02NJTH4lEp4UGAFvBgukeAchUiuaadh_CMO1lvWA_xZGhTsNODkABJYsukPAYP3ikURph65VDLlo6RuiGC8NrvYnRciYD71UfvbAdBhAwE5D9H6kjtEyPcf4ehVhfCqBgAyCUNiAgNy4LwbB1RXGhL0QY_xxjML7x7GAMudipFuNCiQYAziY7PGibEuuF5fCJO4DwOAtEsBoG_sAM-tSElMEEKOF-GdTBEJSXiH-RT0kME8SY3J84CnTRIAAK3KfNPEVTGQ1LxHiepvAe673Xp4Vee994uFHH2CAPBT5NJad_AABgAEgQNNfeBJxBXI6es9ZDcWDsE6W8_ZuzvlvO2WvA-W8dAg18UaAFARfnAtGY44g_yfk7IPkhGAKwsBCghQC0-CLuhDMhdUAAhHMnFeIAD8cBbkjJCXC7xcRBrYjgHctJNKUX0quSS74WQFDiA5XU_QnyYB4shR8tg8Bfnfz2Ui_eIKwXCBINCiZpRT7V3ucWR5BNxCUIFUKgFIr2CAuwBKhVMq4HyqlSRZVqrSj7xIpq_loqdVvL1WKnZRqpUmvBQarAwLWbKsaFqh1vK4DOq9W6oF0qM6yrNeG-UlqHnyjtdqoNIbxUb2NZG01XqD6xtefiuaDzHLoB5XmnB9r2COveQK0Nab3UZs9Qq6AQZ5YMD9QG8tyaq2psleGj1cqs3eORMqgA-iO0dI622Co7aK6t3aDm9ujQcr0w6x2jonRWjZnbXU1p7XWvtCql1nxXaustk6S3Bv0Ekng66AgRMheICuxbdWXpxV2jlCqjnYBOXwDlSyAVP0WHQJgEAwAfCume_9SwRT2jtCAKI1ZMVSQQw-R9bzr11M3WvMNByP1YD6UGNFGL-3MvccqtdOKU1btnd6w5PSEGv1MARjAC7qPTVIyetDwaMOGu3dh2juH6NQEY8xg-Fqz5kbzc6t9lGg3vr43hhj6KmMyfdazJDc0g2-CPq1IDIHTJnoCFpoMOnmwYGgFkOg7tlKQog4B4DURiRqeyrujgphpGbHs45qoAtIXYrzRx3wQGHTlHI-x8jAqpOYY3sp8NOH5OCcU55qFUr5SJYTBpuAhnTA6b5vpuANnsvJVSwEXtLmQnucK0G7zWKUMAv84gYjoVDlVSLSFpNEnwtntfbl2TvSBNCeiwclLQbf2Qsy1AAriN9P5bsxV3LKpnOuf-OVhzlXEu-fxXVqlDj3FNf9A1NANWnWhfa6KiL3HKj6Z63R_p8WMUDeo42oC7V4W5ZGwCsbE2iu-Gm7plbc3JGgrgaVtzGAPOrY5etyFdXGitcDSd_VXarv8Zu0J_tB7q7ifxZJzr0nutSti31hL92D5eiK29t5JR2D-WAMIOgWQ_jMRGulj7M2wP6ZZ2AEzZnFAAGIpD86s3-yiAGCt_bmyVxbi9Qezf01Vt5kPauY-FR1ktXXLv47k4Tu7ePw2k-G8zx743WdfYy4b4za5ucKD5wLk3P2wf_Yl2V6XYuz1y_WQr1DHKblHth-24VF6GkVsoZenVt7-YPpISH8JGtc553gN03rN2OHlPiZsxpqakdxckCnOg_BVB2HoACYM-AM7f01Lm9Dp3nhq-rxrxP-Gid4nTYD8FF503UvcUaBVKL-tN7r9doMIp1C0T1i2HQOIFd4qvjfGAJC2tdKr90GvS_-_I4b9r74zeo1t6lbMnfMXNc3aHxQEfshwzj-1JP7U2SQBz7hwvr5tfIsXaf7x-vCmN-v-o_O_fBySJd9Xzi2P1PzHwnxqzxVIG9QoD-DACnlsDvz9wf1ny_wlV_2owJxR0b031rRbzlTQJ9TVAAIP3fygGANH3PzAMKDxTzzVAQNPSQO1GXyqEzy1yUz7x3VwKIMG3QC4PQMP0H2H3IOMEoKqDxSdDoJSWxxX2f3wJoxIN72wI4O33YIORNF4IPgwIEJPyEIv2eCv2eC_GRAkI7hV2YNx0ULfwHw_zYIsO_13XUP3kN2bRe1sI0P4NMDILP2EMv3AO1EC02GMJwVMKSxkJUL4PkKwK_xhU4NkL1zCLcJIM8NAJ8KoO1AHHgHENLXn0r0f2kPO1kM0OsIcJ_3iIHShAcMKNIMEK8N0O6H0O6BCEIDgEyISWOwYJQKi1KMqIUKiIjRiNKLiNcNpQcB6LyPCKsKqO0JqJEICDxUaPgFDGQNaPn2D0DwsAiTjxQBiRnzvlMAfifjQDiw4SQF_k_hIDAWAR4Rrhjg0XgBKHUATgyGjguLkEOTjkeNoDgAAB8vjFAFANYolCBql4k6lL1q0FUS8gxJAUhWAsAdA8U08Z131ihsBlULxnUK1p8J5phWoUAaADjOkEB7j45TBBo4BAkKU4BAAUAkZSJPeNJIyGeUO2WPv1LSjwvjBK7SQEUR0H8SyHZgAFIEhpBsBWAxxZAeAohYxY4qcthad6cadcB4gJA0SN1WTvgKNn990el0VlVkB44aIMA4BE5z1sjvgf5dZ9ZHCFgTYzY4C6AbVGT0S2iL4zTXTp1EcpUghbhdSz59S3Y1w4BDFSAogldzTTirTjYhg7Tp5pU3YoRmS-U3Tz12TWjUyIlY9bi4AyF8EQAfSdhy5Fl_AVk4kTDF8zDIst5RBcz8zUBw1NgMBmSjAgxv5OFJFqyCEoASARYyFdJ70a4LwrkyFaSqysAazTBJAWRaSezt47BnkLRtQYS4TChiFfAMyNYszRy6y95o5tycB8BCBHlVBNpOF_Aj4dBnRZIbMpSERe0CtIwXcAdZUoNh45B7M2de1EE_hLhbAHQ4M2cvQX5FTFZmh95xYqgpBfy2QU4MBnQFAX4MBRg3NEJfzkBTZAQmpep_BRzLZChbhqix8ucoAshrcpBEJRTSBUgsANBp4sgbAMAaA6BCxNgac6BmwGAJ4sgpBRTNAHApEA4vgp4YBsBcKILfzpwsBgKogAB2VGSChgNCvuD4SMTMKC8IEROChCpCpbTQKDDAHQAS_wAvGii2CpPLYXJYLIYEMAVgOARoF2XdKyxoGyniZy1gcitgcU05Pme8RhEoDqWSXtLIPiU4ey1ShS9C0DFWfwSEuBUShaC3Yi3naqFKwsSnGAJgOcewSC_YLIKgMADSKAReAvFCiKpSoESbO3IENneSmAaCjSrILSwgHSvSgy6K-9BhLWF1IFXcnZPAAgDxaAtQEoU8-bXA-Ksa2Ve3CCGKgTCakUtgSi1QEyunRQCUhy3Al8mDKKvCw3Lat8niW8iAcYe0rIHpOwNcSmLANKmbeDfqLAKcf86K3wOwKgW4OLea7ixaqila-nU5QsOZKgBwScNAdi_yxWBQOwLeAETQH0mAHgAgJihEGzfa2Daq564SFEwEWSWqiSqSuAWSmqtSmCzS9FbSxeXStcNqwoWqxSiyFSwoHkvkxQaMIUjG3-HQKgDQT6iin606ta_6jG709FT68SySxnGSuS4mhqxQJqtzSm_Swy3wHDeaqqq6e8Sonm765a_mhQdahEMbVGnLcyhYSDaDA6sXDW9w27aXHGsW_Gwm8Kuq9S2Cxqsm5qim1qjysUiU42li2nI4DAKQLini-gamrC5W62pI8_ea_CqYwixKkiqQRoZO5OpW4SPjL9LW1gJa6i3W_W_wK20cRjeaz86AU2X85bW8hbJ3Hyr4HvRTUu3daIB6xWdWr4GCEusy3tPsfG9u7C2FdxLOsyjnY2u8mbYEdmwe0Keapm3AZStndK6neUxQbAKcb2ryyUuyjG6aWe4AXk-euAdmTMUUzem8p8UVZe1ahQNepnCOlSRsWSOexUM4GsW0S-uU6-2-je327ewur4EyJ-_e5mjUd-2U1iuiieUwH-7yv---2yIBg-qIY-i-8BlehQAEDix4Gm0-3-_u3cNUPepBo-xej-iB1e1umBre_BseJtZ7Ih5m6MMBmAK-hUxnDa2VXuiWmXe8L0Bhw-zUE-zyvB5h1hta4CwyjqqwTcvBTsvc0xLYtefqw8oak88sBs0u464oWixQc6y6koUqmAOmnaqoI-V8tGu6pMVu8-qoBnJUp61Blhz-thpUyRjYtgSAWAOAEwKQQQfSDIwuYuEoOADWIAA&modules=true

But the question is:

When one has a single table with hundreds of rows, how can one split this table onto multiple pages where each page renders the table header, the max number of table body rows that fit on that page and table footer on each page until all rows are rendered.

Note that the first page may have less available height then the following pages which have the full page height of the selected size (LETTER or A4)

[RichMatthews]

@andreawyss I am also hoping for an answer to that question. Where a table spills on to a second page, I need the header to be at the top again, did you manage to work it out?

[t-gomez]

@RichMatthews you can achieve this by adding fixed to the table header