Airthium / react-pdf-table

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.

import Table from 'react-pdf-table'

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

const data = {
  title: 'Table title',
  headers: ['head 1', 'head 2', 'head 3'],
  rows: [
    ['in head 1 - 1', 'in head 2 - 1', 'in head 3 - 1'],
    ['in head 1 - 2', 'in head 2 - 2', 'in head 3 - 2'],
    ['in head 1 - 3', 'in head 2 - 3', 'in head 3 - 3']
  ],
  footer: 'footer'
}

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

Here is a basic example :

<PDFViewer width={'100%'} height={'800px'}>
  <Document>
    <Page size="A4">
      <Table data={data} />
    </Page>
  </Document>
</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.

<Table
  data={data}
  style={{
    container: { backgroundColor: 'tomato' },
    cell: {
      textAlign: 'center',
      color: 'white'
    }
  }}
/>

Custom styling is enabled on :

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