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

React-pdf library is not supported any other components if you downloading pdf. In case you wanted use tables more then once, you can create your own conponent Table, for example as here

<Page style={styles.page} size="A4" wrap>
    <View style={styles.table}>
          <View style={[styles.row, styles.header]}>
              <Text style={[styles.headerText, styles.cell]}>Column 1 Header</Text>
              <Text style={[styles.headerText, styles.cell]}>Column 2 Header</Text>
              <Text style={[styles.headerText, styles.cell]}>Column 3 Header</Text>
              <Text style={[styles.headerText, styles.cell]}>Column 4 Header</Text>
          </View>
          <View style={[styles.row]}>
            <Text style={[styles.cell]}>Column 1 Row 1</Text>
            <Text style={[styles.cell]}>Column 2 Row 1</Text>
            <Text style={[styles.cell]}>Column 3 Row 1</Text>
            <Text style={[styles.cell]}>Column 4 Row 1</Text>
          </View>
    </View>
</Page>

or if you need more dynamic data,

const styles = StyleSheet.create({
    em:{
    fontStyle: 'bold'
}, 
table: {
    width: '100%',
    borderWidth: 2,
    display: 'flex',
    flexDirection: 'column',
    marginVertical: 12
},
tableRow:{
    display: 'flex',
    flexDirection: 'row',
},
cell: {
    borderWidth: 1,
    display: 'flex',
    justifyContent: 'center',
    alignContent: 'center',
    textAlign: 'center',
    flexWrap: 'wrap'
}
    })   

    const Table = ({children, col, th}) => (
        <View style={styles.table}>
            {children.map((row, ind) =>
                <View key={ind} style={[styles.tableRow, th && ind === 0 ? styles.em: {}]}>
                    {row.map((cell, j) =>
                        <View key={j} style={[styles.cell, {width:col[j], height: 40}]}>
                            {
                                typeof(cell) === 'string' || typeof(cell) === 'number' ? 
                                <Text>{cell}</Text> : cell
                            }
                        </View>
                    )}
                </View>
            )}
        </View>
    )

//using like this
<Table
    th
    col={['20%', '60%', '20%']}
    children={[
      ['TH1', 'TH2, 'TH3'],
      ['1', '2', '3'],
      ['4', '5', 6'],
      ['7', '8', '9']
    ]} />