React-pdf: Table examples for newbies

Created on 12 Feb 2019 · 26Comments · Source: diegomura/react-pdf

Most of the Automated PDFs that i have come across contain lot of Tables. I know i can't use HTML Tables in this. Given the power of flex boxes this should be very much achievable.

It would be really helpful especially for newbies like me if you add examples for like a data PDF sheet which contain multiple tables.

new feature

Source

kishaningithub

👍22

Most helpful comment

Cleaned up the example from the comment above.

Here is another example with a bit more styling around the header.

And another example with adjustable first column width.

hutch120 on 31 May 2019

👍29 ❤22 🎉6

All 26 comments

Thanks @kishaningithub !
I've been wanting to do this for awhile now. Thanks for submitting a ticket.
I'll try to find time soon to do this.

diegomura on 12 Feb 2019

👍13 👀1

Attaching sample PDFs that can be used as examples. I have pulled these out from here and here

Basic

Killer

Medical Report Template Free.pdf

kishaningithub on 13 Feb 2019

👍4

@diegomura If table support is implemented i would love to contribute several examples

kishaningithub on 19 Feb 2019

👍2

Hi,

i created a Table using the following

edit: don't know how to style the code here so it will be displayed properly

import { Text, StyleSheet, View } from "@react-pdf/renderer";

table: { display: "table", width: "auto", borderStyle: "solid", borderWidth: 1, borderRightWidth: 0, borderBottomWidth: 0 }, tableRow: { margin: "auto", flexDirection: "row" }, tableCol: { width: "25%", borderStyle: "solid", borderWidth: 1, borderLeftWidth: 0, borderTopWidth: 0 }, tableCell: { margin: "auto", marginTop: 5, fontSize: 10 }

<View style={styles.table}> {/* TableHeader */} <View style={styles.tableRow}> <View style={styles.tableCol}> <Text style={styles.tableCell}>Product</Text> </View> <View style={styles.tableCol}> <Text style={styles.tableCell}>Type</Text> </View> <View style={styles.tableCol}> <Text style={styles.tableCell}>Period</Text> </View> <View style={styles.tableCol}> <Text style={styles.tableCell}>Price</Text> </View> </View> {/* TableContent */} <View style={styles.tableRow}> <View style={styles.tableCol}> <Text style={styles.tableCell}>React-PDF</Text> </View> <View style={styles.tableCol}> <Text style={styles.tableCell}>3 User </Text> </View> <View style={styles.tableCol}> <Text style={styles.tableCell}>2019-02-20 - 2020-02-19</Text> </View> <View style={styles.tableCol}> <Text style={styles.tableCell}>5€</Text> </View> </View> </View>

skelchie on 20 Feb 2019

👍10

@skelchie Nice approach!! You can style code by wrapping your code with ```

kishaningithub on 25 Feb 2019

@skelchie I also think this can be mixed with styled components to create individual <table>, <tr> and <td> components. Will try this approach and post my results here.

kishaningithub on 25 Feb 2019

@diegomura @skelchie I was able to render table by using style sheets but the same is not working using styled components. I tried this using the REPL here. Any help to make this work would be awesome.

Also as @DuncanMacWeb mentioned here it would be great to have a library/toolbox of styled components inside @react-pdf/styled-components

kishaningithub on 26 Feb 2019

@kishaningithub seems like the styled components don't like '' or "".

Try this REPL

skelchie on 26 Feb 2019

👍5

Cleaned up the example from the comment above.

Here is another example with a bit more styling around the header.

And another example with adjustable first column width.

hutch120 on 31 May 2019

👍29 ❤22 🎉6

Thank you for working examples of table layout!

It seems that width is needed for each columns, which is why I never made it work.

jp06 on 20 Jun 2019

@diegomura kindly add this to the example section and to the readme of the project. I personally think that this issue can't be closed until that is done.

kishaningithub on 22 Jun 2019

No problem! I'll try to add it but I don't have much time lately. Do you mind submitting a PR?

diegomura on 24 Jun 2019

I am trying to render tables which span pages and has page header and footer....
Here is the repl code

Can someone help suggest write styles / fixes ?... sometimes even the headers of the table disappear too...

ubreddy on 4 Jul 2019

👍1

How does anyone actually make the font-weight property work? I just noticed that it never worked for the examples above at least. And I can't get it to work last time I tried, I just resorted to changing the color of the header.

Edit: Was it actually meant to register different font files with different weight? I just thought it would be possible to change the font-weight of the registered font in the stylesheets. Too bad, I wanted to use Average Sans but it only has one style. I thought I would be able to freely change its font-weight like when I was trying to tweak it in the browser dev tools.

jp06 on 5 Jul 2019

try this.. its a similar concept you guys exploring here.. but @diegomura - it would be better if we get a Clean component for table with styles like nested and simple.

https://github.com/dmk99/react-pdf-table

gmmurugan on 24 Jul 2019

👍4 👀3 🎉3

Hi all, Is there a way to have rowSpan/colSpan here?

The table I need is a bit more complex and should have rowSpan for sure. Looking at those example I can't determine how to handle it...

koshkarov on 28 Jul 2019

mark

America-first-melon on 14 Aug 2019

👎3

PR #668 seems to addresses this issue

kishaningithub on 22 Oct 2019

Here is what I came up with to display tables:

const sanitize_block = (block) => {
    if (typeof(block) === 'string' || typeof(block) === "number") {
        return <Text>{block}</Text>
    } else {
        return block
    }
}

const tstyles = StyleSheet.create({
    table: {
        display: "table",
         width: "auto",
    },
    row: {
        flexDirection: "row",
    },
    cell: {
        // padding: '3px'
      }
});


export const Table = ({data,
                       style_function=(() => {}),
                       style={}}) => {

    return (
        <View style={[tstyles.table, style]}>
          {
              data.map(
                  (row, row_index) =>
                      <View key={row_index} style={tstyles.row}  wrap={false}>
                        {
                            row.map( (cell, col_index) =>
                                     <View key={col_index}
                                           style={[tstyles.cell, style_function(row_index, col_index, data)]}>
                                       {sanitize_block(cell)}
                                     </View>
                                   )
                        }
                      </View>
              )
          }
        </View>
    )
}

To use it, pass an array of arrays as data, and a function that calculates the style for each cell as style_function. For example, you can set a border like so:

const my_data = [
   ['col1', 'col2', 'col3'],
   [1, 2, 3],
   [4,5,6]
]
const cell_style = (row_index, col_index) => {
        const borderLeftWidth = (col_index === 0) ? 1 : 0
        const borderTopWidth = (row_index === 0) ? 1 : 0
        const borderRightWidth = 1
        const borderBottomWidth = 1

        return {
            fontFamily: 'Arial', width: '33%',
            borderLeftWidth, borderRightWidth,
            borderTopWidth, borderBottomWidth,
            borderStyle: "solid",
        }
    }

const style_fun = (row_index, col_index) => {


}

This methods is extremely flexible, you can easily apply the style you want.

sapristi on 18 Feb 2020

Thanks a lot @hutch120 for providing nice table examples, it really helped a lot, I suggest @diegomura please consider placing @hutch120 table examples right in the documentation. It will save time and make the library more beginner user friendly. Thanks for the great library!

DeepakKapiswe on 19 Mar 2020

👍2

Thank you, great examples.
Do you have any idea how to implement rowspan and colspan?

rafanleme on 20 Jul 2020

👍1

Question: Does anyone have an example how to create a double row for 2 header cells, like it's in this example (columns with "Ultimate tensile strength" text above) ???

Please share your example if you know how to do it, thanks a lot.

mvershinin-chwy on 22 Aug 2020

👍1

Cleaned up the example from the comment above.

Here is another example with a bit more styling around the header.

And another [example](

https://react-pdf.org/repl?code=3187b0760ce02e00404207901280440a2483e818410196460178601c8062008c0331a6d20285125915434c065005404d3cd3132104001b0096004d1b3683171e008c9803a804914dc00490802c00189b8390a01caa8dda8400a45fbf4c00b4f3f32f59ab404a1801e86006623161868004f51005308214e287088ce000b0888a8003a6000270880432808eb006f0618184a104950802e1862d2d280071cc949713000731abb1298005f001a1ea81cca489ac2981ed2d68806d11cea98002261d188a5fec9fa9800772928449aa59c805728100dadfaf2ccc908ccd8f89ab6742c1e7e344da9b2905bfbec312fd9ec8578e1f0c841b6c6e774c8a9f68718228be50df8c290e276a24a070c901c6afa6475d51f738080a0e7002d8e2f130070f4065755a4490201db8caea50a4e532ed3691d4ee74bb7da89100078a1c4d960141c4e023a65594b2b832862348803448a2d2e461ecef9ed7108851b92c3a003519000a4a442695a1f74798de0208e3bc04b69f9fd321aa073bd85805043bef6cca93c9200a4fb32350a3d9f436e0f1361f0ae87a437808b51b129da5a693dc10035a908c329419db555ac35dae6bdcf5db034d2cc160f0c02d4b4b50a515ec744581feae1f1dd1ccf4c2a3fdd06069090a257ac394f1d91c87184f7661c5d4c8fd399ece1bf179af4168b39d2df536a54afaac48a7afd51b46d70b6ac16d235a0f30dec4f5d43cf96e938b9783829c673b4930dd1177dee0ccb3702093fd0f42d60e55cf464d5088355bd4a7bc6a66ddc67d964ed20878e227500b787f2220097403705a744cbd7029178261683771a4e0fa26123c90fa509265d0889445106b5d56a6f8b91e4f918000560f5a8700a04e1c4000bcfb444002610260792c06c4220c4b11a9a4fb1788bd4a7e3b0413444c260093793008cb9214a5354ae8e932c185e93c001b818208e4001144e71145324221b1bc220003e181ac1e8001e140406004e0a4225d2a2ef9e28001472769c2b09222210a42aa2349ca4a97a4cbb6529e2800d5c408876108488898ad2a20349f8aaa476d9eac6b9ad2bdad6b3afe2591d87aef86a981faa6a5af8986f8946b42352d4757b926e9ba6f8bb8089455808692a46aea56ab2448daa2eca154904e695e29f176fda62a9a6afba1aa6b9eadbea59b06d6b16c8996aacc473b324dabeefb1e83afea3a9693aab33bd6d06a2ee142068227bb21cfbc1b7a06ac6be9fbe6a2a61806e1abd84c46c1f0666c8709b6b89b2a2c8476b247b2fb96549031bdaa03c6b69c63edeb5ef7b7e85be9c06c990729ec669c3a3ad2604a1225cbb32711807461eae679eda7c21735efbb5dc65edaa85da7fe866d0f1b25edb8d9978e8b3af4b779e97a1d9719a12aaa41726951c6ca50000c539a7a05bebf5fe70defbade776d95ac4077b6a76459774eb76a2ff003ee683bd6758ce8d81a4dd16e58d4aab0efaf8e89c4fe1e4fd4fd114001391c7d1d4c70aba70602aeabfaf1bdaed3dd7839d78b99a2384ea3a074458f5ed2ee9f2fd52b2aae93001a826efb399a439d87be5eb3b0e099b761b1b5931e73b9bb7926edcd5f7886b9bcea7f9747a8a0041300c964932180151d917feef9d5e97adf239dfa39be97ad509ea6cc5b5f2aad8072034000b75004e288100300d40d420ae14a02643c8390601dc180f3060330568c01c400067b00301420c0088000adee210c21082ee2886d239029080110301121481c8a21da020940690c3905710942c2960f0ab82002c8e4300c01120e477e54d3f9af03ec2ccbb0f32645ca99008be47ccd8571be55d6bbd76924dc1c33836efa1eb800764705ddd5a070fe2bdaab6341eaa2ff88f33e5a3f6a5f351602a2ba979ef23b1a388ce8a2be8bd4515947c2e57ca4e3ee92514a694328301f27e43d8e46943ed7d9a46c86006135878a82342be45f05147c9000) with adjustable first column width.

I've tried opening all those links but they seem to be overwritten/expired. All I see is the default "Quixote" example that is on the playground section of react-pdf.org.

Does anyone have code that they can share?

a7medpa on 4 Sep 2020

👍9

@a7medpa REPL seems to be currently broken on the decoding part of the URL. The long part after code= is the encoded code. If you look in the REPL source code it shows you it debugs and you can debug it manually in javascript.
That's how I'm currently doing it.

coldreactor64 on 17 Sep 2020

still broken :(

flmuel on 28 Sep 2020

👍2

Cleaned up the example from the comment above.
Here is another example with a bit more styling around the header.
And another example with adjustable first column width.

I've tried opening all those links but they seem to be overwritten/expired. All I see is the default "Quixote" example that is on the playground section of react-pdf.org.

Does anyone have code that they can share?

const BORDER_COLOR = '#bfbfbf'
const BORDER_STYLE = 'solid'
const COL1_WIDTH = 40
const COLN_WIDTH = (100 - COL1_WIDTH) / 3
const styles = StyleSheet.create({
  body: {
    padding: 10
  },
  table: { 
    display: "table", 
    width: "auto", 
    borderStyle: BORDER_STYLE, 
    borderColor: BORDER_COLOR,
    borderWidth: 1, 
    borderRightWidth: 0, 
    borderBottomWidth: 0 
  }, 
  tableRow: { 
    margin: "auto", 
    flexDirection: "row" 
  }, 
  tableCol1Header: { 
    width: COL1_WIDTH + '%', 
    borderStyle: BORDER_STYLE, 
    borderColor: BORDER_COLOR,
    borderBottomColor: '#000',
    borderWidth: 1, 
    borderLeftWidth: 0, 
    borderTopWidth: 0
  },     
  tableColHeader: { 
    width: COLN_WIDTH + "%", 
    borderStyle: BORDER_STYLE, 
    borderColor: BORDER_COLOR,
    borderBottomColor: '#000',
    borderWidth: 1, 
    borderLeftWidth: 0, 
    borderTopWidth: 0
  },   
  tableCol1: { 
    width: COL1_WIDTH + '%', 
    borderStyle: BORDER_STYLE, 
    borderColor: BORDER_COLOR,
    borderWidth: 1, 
    borderLeftWidth: 0, 
    borderTopWidth: 0 
  },   
  tableCol: { 
    width: COLN_WIDTH + "%", 
    borderStyle: BORDER_STYLE, 
    borderColor: BORDER_COLOR,
    borderWidth: 1, 
    borderLeftWidth: 0, 
    borderTopWidth: 0 
  }, 
  tableCellHeader: {
    margin: 5, 
    fontSize: 12,
    fontWeight: 500
  },  
  tableCell: { 
    margin: 5, 
    fontSize: 10 
  }
});

const Quixote = () => (
  <Document>
    <Page style={styles.body}>
      <View style={styles.table}> 
        <View style={styles.tableRow}> 
          <View style={styles.tableCol1Header}> 
            <Text style={styles.tableCellHeader}>Product</Text> 
          </View> 
          <View style={styles.tableColHeader}> 
            <Text style={styles.tableCellHeader}>Type</Text> 
          </View> 
          <View style={styles.tableColHeader}> 
            <Text style={styles.tableCellHeader}>Period</Text> 
          </View> 
          <View style={styles.tableColHeader}> 
            <Text style={styles.tableCellHeader}>Price</Text> 
          </View> 
        </View>
        <View style={styles.tableRow}> 
          <View style={styles.tableCol1}> 
            <Text style={styles.tableCell}>React-PDF</Text> 
          </View> 
          <View style={styles.tableCol}> 
            <Text style={styles.tableCell}>3</Text> 
          </View> 
          <View style={styles.tableCol}>
            <Text style={styles.tableCell}>2019-02-20 - 2020-02-19</Text> 
          </View>
          <View style={styles.tableCol}> 
            <Text style={styles.tableCell}>5€</Text> 
          </View> 
        </View> 
        <View style={styles.tableRow}> 
          <View style={styles.tableCol1}> 
            <Text style={styles.tableCell}>Another row</Text> 
          </View> 
          <View style={styles.tableCol}> 
            <Text style={styles.tableCell}>Capítulo I: Que trata de la condición y ejercicio del famoso hidalgo D.
        Quijote de la Mancha</Text> 
          </View> 
          <View style={styles.tableCol}>
            <Text style={styles.tableCell}>2019-05-20 - 2020-07-19</Text> 
          </View>
          <View style={styles.tableCol}> 
            <Text style={styles.tableCell}>25€</Text> 
          </View> 
        </View>        
      </View>
    </Page>
  </Document>
);

ReactPDF.render(<Quixote />);