How to paginate table rows in React-PDF while keeping other components fixed?

Question

Certainly, here's the revised question you can use to ask on Stack Overflow:

Title: How to paginate table rows in React-PDF while keeping other components fixed?

Question:

I'm working on a project using React-PDF where I need to generate a PDF document that includes a table with potentially many rows. I want to paginate the table rows to ensure that they continue on a new page when they exceed a certain limit, but I also need to keep other components fixed, such as a title section, that should appear on each page.

In my PDF document, I have the following components:

1.A Title section. 2.A Table with rows of data.

I've been able to create the Title section and the Table, but I'm struggling to figure out how to paginate the table rows while keeping the Title fixed on each page.

Here's a simplified structure of my components:

**table.js**

import React from 'react'
import { View, Text, StyleSheet } from '@react-pdf/renderer'

const styles = StyleSheet.create({
  table: {
    display: 'table',
    width: 'auto',
    borderStyle: 'solid',
    textAlign: 'left',
  },
  tableRow: {
    margin: 'auto',
    flexDirection: 'row',
  },
  tableCol: {
    borderStyle: 'solid',
    borderWidth: 1,
    borderLeftWidth: 0,
    borderTopWidth: 0,
  },
  tableCell: {
    marginTop: 5,
    fontSize: 10,
  },
})

const Table = () => {
  const tableData = [
    {
      sno: 0,
      hsn: 30049061,
      mfg: 'MIC',
      productName: 'DOLO 650',
      pack: 15,
      batchNo: 'TESTNEW',
      expiry: '02/2025',
      qty: 1,
      free: '',
      rate: 24.0,
      amount: 24.0,
      mrp: 31.0,
      disc: 12,
      gst: 12,
    },
  ]

  return (
    <View>
      <View style={styles.table}>
        <View style={{ ...styles.tableRow, backgroundColor: '#c0c0c0' }}>
          <View style={{ ...styles.tableCol, width: '4%' }}>
            <Text style={styles.tableCell}>S.No</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '8%' }}>
            <Text style={styles.tableCell}>HSN</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '4%' }}>
            <Text style={styles.tableCell}>MFG</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '28%' }}>
            <Text style={styles.tableCell}>Product Name</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '4%' }}>
            <Text style={styles.tableCell}>Pack</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '8%' }}>
            <Text style={styles.tableCell}>Batch No</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '6%' }}>
            <Text style={styles.tableCell}>Expiry</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '4%' }}>
            <Text style={styles.tableCell}>Qty</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '6%' }}>
            <Text style={styles.tableCell}>Free</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '5%' }}>
            <Text style={styles.tableCell}>Rate</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '5%' }}>
            <Text style={styles.tableCell}>Amount</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '4%' }}>
            <Text style={styles.tableCell}>MRP</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '7%' }}>
            <Text style={styles.tableCell}>Disc%</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '7%' }}>
            <Text style={styles.tableCell}>GST%</Text>
          </View>
        </View>
        {tableData.map((data, index) => (
          <View style={styles.tableRow} key={index}>
            <View style={{ ...styles.tableCol, width: '4%' }}>
              <Text style={styles.tableCell}>{data.sno}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '8%' }}>
              <Text style={styles.tableCell}>{data.hsn}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '4%' }}>
              <Text style={styles.tableCell}>{data.mfg}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '28%' }}>
              <Text style={styles.tableCell}>{data.productName}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '4%' }}>
              <Text style={styles.tableCell}>{data.pack}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '8%' }}>
              <Text style={styles.tableCell}>{data.batchNo}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '6%' }}>
              <Text style={styles.tableCell}>{data.expiry}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '4%' }}>
              <Text style={styles.tableCell}>{data.qty}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '6%' }}>
              <Text style={styles.tableCell}>{data.free}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '5%' }}>
              <Text style={styles.tableCell}>{data.rate}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '5%' }}>
              <Text style={styles.tableCell}>{data.amount}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '4%' }}>
              <Text style={styles.tableCell}>{data.mrp}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '7%' }}>
              <Text style={styles.tableCell}>{data.disc}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '7%' }}>
              <Text style={styles.tableCell}>{data.gst}</Text>
            </View>
          </View>
        ))}
      </View>
    </View>
  )
}

export default Table

**App.js**

import React from 'react'
import Title from './components/Title'
import { PDFViewer, Page, Document, View, Text } from '@react-pdf/renderer'
import Table from './components/Table'

const App = () => {
  return (
    <PDFViewer style={{ width: '100%', height: '100vh' }}>
      <Document>
        <Page orientation="landscape">
          <View style={{ border: 1, margin: 20 }}>
            <Title />
            <Table />
          </View>
        </Page>
      </Document>
    </PDFViewer>
  )
}

export default App

for your better understading i will also provide my title.js file

**title.js**

import React from 'react'
import { View, Image } from '@react-pdf/renderer'
import { StyleSheet } from '@react-pdf/renderer'
import smartpharma from '../smartpharma360.jpg' // Import the image
import From from './From'
import TaxInvoice from './TaxInvoice'
import To from './To'

const styles = StyleSheet.create({
  titleFlex: {
    flexDirection: 'row',
  },
  titleImage: {
    width: 80,
    height: 80,
    border: 1,
  },
})

const Title = () => (
  <View fixed>
    {/* what if you want to wrap pages but also be able to render a component on all pages? This is where the fixed prop comes into play. */}
    <View style={styles.titleFlex}>
      <Image src={smartpharma} style={styles.titleImage} />
      <From />
      <TaxInvoice />
      <To />
    </View>
  </View>
)

export default Title

Answer 1

After some thorough investigation and experimentation, I've implemented a solution that seamlessly paginates the table rows while ensuring the Title section remains constant on each page.

For those facing a similar challenge, I've made the solution available in a public repository: https://github.com/taiyebnirjhar/Painful-PDF

You can also experience the solution live through the deployed demo: Live Demo : https://painfulpdf.web.app/