Best way to debug?

[kdkavanagh]

Working on integrating this project into mine - Having trouble actually getting a table to render. With the following code lifted straight from the examples (with latest react-pdf and react-pdf-table), I can only see "Hello world", although if I remove the <Table> wrapper I can render the table header, but am unable to even manually generate table rows. Curious as to the recommended way to debug.

import * as React from "react";
import {Document, Page, View, Text, PDFViewer} from "@react-pdf/renderer";
import {DataTableCell, Table, TableBody, TableCell, TableHeader} from "@david.kucsai/react-pdf-table";

export class PdfContainer extends React.PureComponent {
    render() {
        return (
            <PDFViewer
                style={{
                    width: "100%",
                    height: "90vh"
                }}
            >
                <Document>
                    <Page
                        orientation='landscape'
                        size={this.props.pageSize ?? "A4"}
                        style={{
                            margin: 20,
                            paddingRight: 40
                        }}
                    >
                        {this.props.children}
                    </Page>
                </Document>
            </PDFViewer>
        )
    }
}

export class SimpleTable extends React.Component {
    state = {
        data: [
            {firstName: "John", lastName: "Smith", dob: new Date(2000, 1, 1), country: "Australia", phoneNumber: "xxx-0000-0000"}
        ]
    };

    render() {
        return (
            <PdfContainer>
                <View><Text>hello world</Text></View>
                <Table
                    data={this.state.data}
                >
                    <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>
            </PdfContainer>
        )
    }
}

[handlez36]

I'm having a similar issue just getting the table to render, with no errors thrown. Did you find a solution?

[kdkavanagh]

I have not unfortunately. If I can't figure it out soon, I'm gonna have to fallback to creating the table manually somehow, which sounds awful

[dmk99]

Hi,

Sorry for not replying for so long. I am attempting to replicate the issue that you're describing and am not able to. I understand if you've moved on from using this library, but if you haven't can you provide the exact versions of @react-pdf/renderer and @david.kucsai/react-pdf-table?

I've created a new project based off create-react-app. With the following in my dependencies:

  "dependencies": {
    "@david.kucsai/react-pdf-table": "^0.3.0",
    "@react-pdf/renderer": "^1.6.8",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },

I have also tried versions 1.6.9, 1.6.10 and 1.6.11 of the @react-pdf/renderer library. As well as a few of the 2.0.0-beta versions. And it appears to work.

If you're able to provide more information that'd be greatly appreciated.