is there any way to add table in "react-pdf"?

user_11576713 0
Viewed 4981

I'm downloading a pdf file in react and I want to add a table into the pdf. However, I am unable to do that. I'm using the react-pdf library but I cannot get the desired result.

import {
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  } from 'material-ui/Table';

 <Document>
              <Page style={styles.body}>
            <Text style={styles.header} fixed>

            </Text>

            <Table>
  <TableHeader>
    <TableRow>
     <TableHeaderColumn>ID</TableHeaderColumn>
     <TableHeaderColumn>Name</TableHeaderColumn>
     <TableHeaderColumn>Status</TableHeaderColumn>
  </TableRow>
</TableHeader>
 <TableBody>
  <TableRow>
    <TableRowColumn>1</TableRowColumn>
    <TableRowColumn>John Smith</TableRowColumn>
    <TableRowColumn>Employed</TableRowColumn>
  </TableRow>
</TableBody>
</Table>
react-pdf reactjs
1 Answers

React-pdf library is not supported any other components if you downloading pdf. In case you wanted use tables more then once, you can create your own conponent Table, for example as here

<Page style={styles.page} size="A4" wrap>
    <View style={styles.table}>
          <View style={[styles.row, styles.header]}>
              <Text style={[styles.headerText, styles.cell]}>Column 1 Header</Text>
              <Text style={[styles.headerText, styles.cell]}>Column 2 Header</Text>
              <Text style={[styles.headerText, styles.cell]}>Column 3 Header</Text>
              <Text style={[styles.headerText, styles.cell]}>Column 4 Header</Text>
          </View>
          <View style={[styles.row]}>
            <Text style={[styles.cell]}>Column 1 Row 1</Text>
            <Text style={[styles.cell]}>Column 2 Row 1</Text>
            <Text style={[styles.cell]}>Column 3 Row 1</Text>
            <Text style={[styles.cell]}>Column 4 Row 1</Text>
          </View>
    </View>
</Page>

or if you need more dynamic data,

const styles = StyleSheet.create({
    em:{
    fontStyle: 'bold'
}, 
table: {
    width: '100%',
    borderWidth: 2,
    display: 'flex',
    flexDirection: 'column',
    marginVertical: 12
},
tableRow:{
    display: 'flex',
    flexDirection: 'row',
},
cell: {
    borderWidth: 1,
    display: 'flex',
    justifyContent: 'center',
    alignContent: 'center',
    textAlign: 'center',
    flexWrap: 'wrap'
}
    })   

    const Table = ({children, col, th}) => (
        <View style={styles.table}>
            {children.map((row, ind) =>
                <View key={ind} style={[styles.tableRow, th && ind === 0 ? styles.em: {}]}>
                    {row.map((cell, j) =>
                        <View key={j} style={[styles.cell, {width:col[j], height: 40}]}>
                            {
                                typeof(cell) === 'string' || typeof(cell) === 'number' ? 
                                <Text>{cell}</Text> : cell
                            }
                        </View>
                    )}
                </View>
            )}
        </View>
    )

//using like this
<Table
    th
    col={['20%', '60%', '20%']}
    children={[
      ['TH1', 'TH2, 'TH3'],
      ['1', '2', '3'],
      ['4', '5', 6'],
      ['7', '8', '9']
    ]} />
user_137812080
Related