I've built a simple example that shows how to implement a Table. It's pretty straightfoward, check it out: https://github.com/Chagall/react-pdf-table-example

Flex can be helpful, you should have a look on https://medium.com/@snowleo208/how-to-create-responsive-table-d1662cb62075

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