enescang / react-pdf-table

Simple table generator for @react-pdf/renderer
https://www.npmjs.com/package/react-pdf-table
13 stars 3 forks source link
pdf-table react-components react-pdf react-pdf-table reactjs

React PDF Table Generator

🏁 Getting Started

react-pdf-table is super simple table generator for @react-pdf/renderer

✔️ Install

npm install react-pdf-table --save

📒Usage

This package has only 2 main component for creating table. These are TableRow and TableCell.

Import

import ReactPdfTable from "react-pdf-table";

Create Simple Row

Any number of cells can be created in a row.

    ...
    <ReactPdfTable.TableRow>
        <ReactPdfTable.TableCell  text="Cell 1"  align="right" />
        <ReactPdfTable.TableCell  text="Cell 1"  align="center" />
        <ReactPdfTable.TableCell  text="Cell 1"  align="left" />
    </ReactPdfTable.TableRow>
    ...

Actually, that's all. Also react-pdf-table is supporting nested tables.

Nested Table

<ReactPdfTable.TableRow>
    <ReactPdfTable.TableRow width={70} disableMargin={true}>
        <ReactPdfTable.TableCell text="1" align="center" width={57}  />
        <ReactPdfTable.TableCell text="2" align="center" />
        <ReactPdfTable.TableCell text="3" align="right" />
    </ReactPdfTable.TableRow>
<ReactPdfTable.TableCell text="Name1" align="center"  />
<ReactPdfTable.TableCell text="Name2" align="right"  />
<ReactPdfTable.TableCell text="Name3" align="right"  />
</ReactPdfTable.TableRow>

//Rest of document will be ready ASAP.

Written with StackEdit.