const data = { id: "5df3180a09ea16dc4b95f910", items: [ { sr: 1, desc: "desc1", xyz: 5, }, { sr: 2, desc: "desc2", xyz: 6, }, ], };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;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;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;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;