How can i create a table using the react-pdf library for generation pdf report?

Question

As the react-pdf library offering some limited component and no html tag is allowed to render in reactpdfrenderer.So i am in a trouble to make table using this library? Can any one please help me how can i create a table using this react-pdf library components?

Answer 1

Thanks goes to Yash for the detailed answer given. This is what I ended up creating after seeing your example.

The main trick to create a "table" is to use fixed width columns on each row.

Note: Make the parent container width: '100%' (table in this case) if you want to have your rows add up beyond 100% without overflowing/growing the parent. I would still recommend you try to have your total width add to 100% though, but the example below shows otherwise.

import { StyleSheet, Text, View } from '@react-pdf/renderer'
import PropTypes from 'prop-types'

const styles = StyleSheet.create({
  table: {
    width: '100%',
  },
  row: {
    display: 'flex',
    flexDirection: 'row',
    borderTop: '1px solid #EEE',
    paddingTop: 8,
    paddingBottom: 8,
  },
  header: {
    borderTop: 'none',
  },
  bold: {
    fontWeight: 'bold',
  },
  // So Declarative and unDRY 👌
  row1: {
    width: '27%',
  },
  row2: {
    width: '15%',
  },
  row3: {
    width: '15%',
  },
  row4: {
    width: '20%',
  },
  row5: {
    width: '27%',
  },
})

const ReportTable = ({ data, maximumDays }) => {
  return (
    <View style={styles.table}>
      <View style={[styles.row, styles.bold, styles.header]}>
        <Text style={styles.row1}>Name</Text>
        <Text style={styles.row2}>Start Date</Text>
        <Text style={styles.row3}>End Date</Text>
        <Text style={styles.row4}>Days</Text>
        <Text style={styles.row5}>Info</Text>
      </View>
      {data.map((row, i) => (
        <View key={i} style={styles.row} wrap={false}>
          <Text style={styles.row1}>
            <Text style={styles.bold}>{row.lastName}</Text>, {row.firstName}
          </Text>
          <Text style={styles.row2}>{row.startDate}</Text>
          <Text style={styles.row3}>{row.endDate}</Text>
          <Text style={styles.row4}>
            <Text style={styles.bold}>{row.days}</Text> of{' '}
            {maximumDays}
          </Text>
          <Text style={styles.row5}>{row.info}</Text>
        </View>
      ))}
    </View>
  )
}

ReportTable.propTypes = {
  data: PropTypes.array.isRequired,
  maximumDays: PropTypes.number.isRequired,
}

export default ReportTable

Answer 2

You can use as @David-Kucsai told in comment @david.kucsai/react-pdf-table

or without using

Example

Data

const data = {
  id: "5df3180a09ea16dc4b95f910",
  items: [
    {
      sr: 1,
      desc: "desc1",
      xyz: 5,
    },
    {
      sr: 2,
      desc: "desc2",
      xyz: 6,
    },
  ],
};

app.js

import React, { Component, Fragment } from "react";
import { PDFViewer } from "@react-pdf/renderer";
import Table from "./components/reports/Table";
import data from "./data";

class App extends Component {
  render() {
    return (
      <Fragment>
        <PDFViewer width="1000" height="600">
          <Table data={data} />
        </PDFViewer>
      </Fragment>
    );
  }
}

export default App;

Table.js

import React from "react";
import { Page, Document, StyleSheet } from "@react-pdf/renderer";
import ItemsTable from "./ItemsTable";

const styles = StyleSheet.create({
  page: {
    fontSize: 11,
    flexDirection: "column",
  },
});

const Table = ({ data }) => (
  <Document>
    <Page size="A4" style={styles.page}>
      // ...
      <ItemsTable data={data} />
      // ...
    </Page>
  </Document>
);

export default Table;

ItemsTable.js

import React from "react";
import { View, StyleSheet } from "@react-pdf/renderer";
import TableRow from "./TableRow";

const styles = StyleSheet.create({
  tableContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
  },
});

const ItemsTable = ({ data }) => (
  <View style={styles.tableContainer}>
    {/*<TableHeader />*/}
    <TableRow items={data.items} />
    {/*<TableFooter items={data.items} />*/}
  </View>
);

export default ItemsTable;

TableRow.js

import React, { Fragment } from "react";
import { Text, View, StyleSheet } from "@react-pdf/renderer";

const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    alignItems: "center",
  },
  description: {
    width: "60%",
  },
  xyz: {
    width: "40%",
  },
});

const TableRow = ({ items }) => {
  const rows = items.map((item) => (
    <View style={styles.row} key={item.sr.toString()}>
      <Text style={styles.description}>{item.desc}</Text>
      <Text style={styles.xyz}>{item.xyz}</Text>
    </View>
  ));
  return <Fragment>{rows}</Fragment>;
};

export default TableRow;

For more information check Generate Dynamic PDF Invoices Using React and React-PDF