React-Pdf Table

@react-pdf/renderer is a React renderer for creating PDF files on the browser and server. With react-pdf-table, create custom tables and add them to your pdf content.

How to install

Add the package, whether with yarn or npm :

• npm install react-pdf-table
• yarn add react-pdf-table

How to use

Using an import, add the Table component to your file.

1import Table from 'react-pdf-table'

Make sure to have a dataset, with either rows or columns

1const data = {
2  title: 'Table title',
3  headers: ['head 1', 'head 2', 'head 3'],
4  rows: [
5    ['in head 1 - 1', 'in head 2 - 1', 'in head 3 - 1'],
6    ['in head 1 - 2', 'in head 2 - 2', 'in head 3 - 2'],
7    ['in head 1 - 3', 'in head 2 - 3', 'in head 3 - 3']
8  ],
9  footer: 'footer'
10}

Call it with your data, following react-pdf's architecture ( Can be found on https://react-pdf.org/ ).

Here is a basic example :

1<PDFViewer width={'100%'} height={'800px'}>
2  <Document>
3    <Page size="A4">
4      <Table data={data} />
5    </Page>
6  </Document>
7</PDFViewer>

Style

This library is provided with custom styling options. All CSS properties can be found on https://react-pdf.org/styling#valid-css-properties.

1<Table
2  data={data}
3  style={{
4    container: { backgroundColor: 'tomato' },
5    cell: {
6      textAlign: 'center',
7      color: 'white'
8    }
9  }}
10/>

Custom styling is enabled on :

• container
• title
• table
• header
• cell
• footer