Bu while rendering out a table data in a pdf

I was trying to generate a pdf for my itinerary data, where my fourth column is a paragraph, but when the page ends and the space is insufficient for the paragraph, that paragraph moves on to the next page, which makes the pdf look kinda wierd!

Code:

pdf.js

import React from 'react'; import { PDFDownloadLink, Document, Page, StyleSheet, Text, View, Html } from '@react-pdf/renderer'; import pdf from '../../assets/Images/pdf.svg' // Define styles for the PDF const styles = StyleSheet.create({ page: { flexDirection: 'row', backgroundColor: '#ffffff', paddingVertical: 20, }, section: { margin: 10, padding: 10, flexGrow: 1, },

header: { marginBottom: 10, fontWeight: 'bold', backgroundColor: '#12c952', fontSize: 14, fontColor: 'white'

}, row: { flexDirection: 'row', borderBottomColor: '#cccccc', alignItems: 'flex-start', paddingVertical: 2,

}, cell: { padding: 5, flex: 1,

}, day: { width: '10px' }, wideCell: { paddingHorizontal: 5, flex: 2, // set the flex value to 2 to make it twice as wide }, wideCell2: { paddingHorizontal: 5, flex: 4, // set the flex value to 2 to make it twice as wide }, });

const Table = ({ data }) => {

return (

Day Time Place Name Info Cost

  {data.map((day, index) => (
    <View key={index}>
      {day.Itinerary.map((item, i) => (
        <View style={styles.row} key={i}>
          <Text style={[styles.cell, { fontSize: '10px' }]} >{day.Day}</Text>
          <Text style={[styles.cell, { fontSize: '10px' }]} >{item.Time}</Text>
          <Text style={[styles.cell, { fontSize: '10px' }]} >{item.Activity}</Text>
          <Text style={[styles.cell, { fontSize: '10px' }, styles.wideCell2]} >{item.Info}</Text>
          <Text style={[styles.cell, { fontSize: '10px' }]} >{item.AverageCost}</Text>
        </View>
      ))}
    </View>
  ))}

</View>

); };

// PDF document component const PdfDocument = ({ data }) => { return (

); };

// Download PDF button component const DownloadPDFButton = ({ data }) => {

return ( <PDFDownloadLink document={} fileName="itinerary.pdf"> {({ loading }) => (loading ? 'Loading...' :

    <img src={pdf} alt='' onClick={() => console.log("pdf")} />

  </div>)}
</PDFDownloadLink>

); };

export default DownloadPDFButton;

{ <DownloadPDFButton data={ itirenaryData.response.TravelData && itirenaryData.response.TravelData }

}

You can make use of react-pdf REPL to share the snippet

If the paragraph doesn't have sufficient space, the whole row should be moved to next page!

Browser: Chrome, Brave

diegomura / react-pdf

Bu while rendering out a table data in a pdf #2698