@propra/react-pdf-table

This library is a fork of the excellent work by David Kucsai (@dmk99)and other contributors, designed to be used with @react-pdf/renderer.

The goal behind this library is to provide a declarative way of defining tables in a PDF.

To get started run:

 npm install "@propra/react-pdf-table"

Documentation

Refer to API Documentation for the type definitions.

Notes

• Layout uses flex behind the scenes.
• If weighting is not defined for a table cell then it will default to the remaining unassigned weightings.
  • weighting should be between 0..1. Preferably adding up to <= 1.
• If you have lots of rows to display it's recommended to batch up the rows and render them on separate pages to ensure that values are not cut off.
• Content in TableCell and DataTableCell must either evaluate to a string or a @react-pdf/renderer component e.g. View, Text etc. If the content is a string it will be wrapped with a Text element.
• TableCells and DataTableCells can override a lot of the configuration passed to them.

Examples

Simple Example

This example will render a header and one row using the default styling.

<PDFViewer>
    <Document>
        <Page>
            <Table
                data={[
                    {firstName: "John", lastName: "Smith", dob: new Date(2000, 1, 1), country: "Australia", phoneNumber: "xxx-0000-0000"}
                ]}
            >
                <TableHeader>
                    <TableCell>
                        First Name
                    </TableCell>
                    <TableCell>
                        Last Name
                    </TableCell>
                    <TableCell>
                        DOB
                    </TableCell>
                    <TableCell>
                        Country
                    </TableCell>
                    <TableCell>
                        Phone Number
                    </TableCell>
                </TableHeader>
                <TableBody>
                    <DataTableCell getContent={(r) => r.firstName}/>
                    <DataTableCell getContent={(r) => r.lastName}/>
                    <DataTableCell getContent={(r) => r.dob.toLocaleString()}/>
                    <DataTableCell getContent={(r) => r.country}/>
                    <DataTableCell getContent={(r) => r.phoneNumber}/>
                </TableBody>
            </Table>
        </Page>
    </Document>
</PDFViewer>

Formatting Example - Aligning Text and Weightings for columns

This example will render a header and one row using the default styling.

<PDFViewer>
    <Document>
        <Page>
            <Table
                data={[
                    {firstName: "John", lastName: "Smith", dob: new Date(2000, 1, 1), country: "Australia", phoneNumber: "xxx-0000-0000"}
                ]}
            >
                <TableHeader textAlign={"center"}>
                    <TableCell weighting={0.3}>
                        First Name
                    </TableCell>
                    <TableCell weighting={0.3}>
                        Last Name
                    </TableCell>
                    <TableCell>
                        DOB
                    </TableCell>
                    <TableCell>
                        Country
                    </TableCell>
                    <TableCell>
                        Phone Number
                    </TableCell>
                </TableHeader>
                <TableBody>
                    <DataTableCell weighting={0.3} getContent={(r) => r.firstName}/>
                    <DataTableCell weighting={0.3} getContent={(r) => r.lastName}/>
                    <DataTableCell getContent={(r) => r.dob.toLocaleString()}/>
                    <DataTableCell getContent={(r) => r.country}/>
                    <DataTableCell getContent={(r) => r.phoneNumber}/>
                </TableBody>
            </Table>
        </Page>
    </Document>
</PDFViewer>

Running Locally

To run the storybook:

pnpm storybook

Compile to typescript:

pnpm recompile

Build (Clean & Compile):

pnpm build

Run tests:

pnpm test