@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"
Documentation
Refer to API Documentation for the type definitions.
Notes
- Layout uses
flexbehind the scenes. - If
weightingis not defined for a table cell then it will default to the remaining unassigned weightings.weightingshould 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
TableCellandDataTableCellmust either evaluate to astringor a@react-pdf/renderercomponent e.g.View,Textetc. If the content is astringit will be wrapped with aTextelement. TableCells andDataTableCells 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent