Table data moving to next page (Blank page only with table header issue)



  • Hello All,

    I have a issue while using table in jsreport. Whenever data length is exactly same as remaining page size then data goes into next page and causing black page only with header issue.

    0_1619609369985_demo.png

    I have used thead of the table for repeating table header across the pages.

    If I add some more entries in EXP. fields then it is working fine also when I delete some entries from EXP. fields it's working fine. But at some amount of entries I got this issue. (Refer below image)
    0_1619609516226_upload-8d6527b7-3b6c-4947-8ae4-78dd0a42d6bd

    Can anyone help me out for this?


  • administrators

    hi! can you please share the example of this case on the playground?

    i think there is an easy fix for this but it is much better if you share your template, data in the playground so we can apply the solution directly there.

    thanks



  • Hello @bjrmatos
    Thanks for reply

    Here is example
    https://playground.jsreport.net/w/Heplinesss_17/6sgns2nj

    Can u please check this? I need to display data from first page, If data are long then they can display in another page

    Thanks!



  • Hello @bjrmatos @jan_blaha

    If you can check the issue once then that will be great.
    https://playground.jsreport.net/w/Heplinesss_17/6sgns2nj

    Thanks!


  • administrators

    hi!

    if i add the following css it works

    .unbreakable {
      page-break-inside: avoid;
    }
    

    https://playground.jsreport.net/w/bjrmatos/RhXrjfNP

    the table headers in the example are no longer being duplicated incorrectly



  • Hi @bjrmatos

    0_1620149103062_upload-59f00f46-0806-4dbb-98e3-accfda2e6e91

    Still there is a blank page at the top. It should not happen. The experience data should start from very first page.

    Thanks!


  • administrators

    I think the padding of tbody td was the problem, if I change that selector to td it works again, I have also changed the title and added it inside the table otherwise it does not work, because the unbreakable prevents the table to stay on first page if it encounters another element outside the table

    https://playground.jsreport.net/w/bjrmatos/RhXrjfNP



  • Hi @bjrmatos

    If we are removing just one company entry from experience

    <p class='experienceWrapper'>
    {{company}}
    </p>

    the issue is still happening.

    Can you please check after removing one 'tcs' entry?

    Thanks!


  • administrators

    the problem is that you are not creating rows correctly

    you have this

    <td>
                                 <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                                <p class='experienceWrapper'>
                                 {{company}}
                                </p>
                              
                              </td>
    

    which is just one big cell in the end, it should be changed to have the p in its own row and td

    https://playground.jsreport.net/w/bjrmatos/RhXrjfNP



  • Hi @bjrmatos

    Thanks for your help it's working for my blank page issue but it's causing another issue.
    when Education field is having more data at that time the thead is overlapping with the data. I have tried some solutions but unable to find solution can you please help me with that?
    https://playground.jsreport.net/w/Heplinesss_17/UU~UxlxO

    0_1620233284601_demo2.png

    Thanks!


  • administrators

    i don't know the exact details of why your design involves having child tables in cells but if we only consider the specific layout you are sharing then i can solve the issue by merging the arrays (position and educations into one) and then iterating just single array to fill the cells

    https://playground.jsreport.net/w/bjrmatos/yhOHoV6U



  • Thanks! @bjrmatos


Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.