@david.kucsai/react-pdf-table

This library is 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 "@david.kucsai/react-pdf-table"

On Windows you must escape the '.':

npm install "@david`.kucsai/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:

yarn storybook

Compile to typescript:

yarn recompile

Build (Clean & Compile):

yarn build

Run tests:

yarn test