@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. TableCell
s and DataTableCell
s 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