crustyratfink / react-pdf-table

Storybook Available

@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