@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><Tabledata={[{firstName: "John",lastName: "Smith",dob: newDate(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><DataTableCellgetContent={(r)=>r.firstName}/><DataTableCellgetContent={(r)=>r.lastName}/><DataTableCellgetContent={(r)=>r.dob.toLocaleString()}/><DataTableCellgetContent={(r)=>r.country}/><DataTableCellgetContent={(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><Tabledata={[{firstName: "John",lastName: "Smith",dob: newDate(2000,1,1),country: "Australia",phoneNumber: "xxx-0000-0000"}]}><TableHeadertextAlign={"center"}><TableCellweighting={0.3}>
First Name
</TableCell><TableCellweighting={0.3}>
Last Name
</TableCell><TableCell>
DOB
</TableCell><TableCell>
Country
</TableCell><TableCell>
Phone Number
</TableCell></TableHeader><TableBody><DataTableCellweighting={0.3}getContent={(r)=>r.firstName}/><DataTableCellweighting={0.3}getContent={(r)=>r.lastName}/><DataTableCellgetContent={(r)=>r.dob.toLocaleString()}/><DataTableCellgetContent={(r)=>r.country}/><DataTableCellgetContent={(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