dmk99 / react-pdf-table Goto Github PK

I have to position the table in a given position in the PDF. When i do absolute positioning, the table style including table borders completely disappears.

<PDFViewer>
    <Document>
        <Page>
            <View style={{ position: "absolute", left: 0, top: 0 }}>        
                <Table
                    data={[
                        {firstName: "John", lastName: "Smith", dob: new Date(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>
                        <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>
            </View>
        </Page>
    </Document>
</PDFViewer>

There is a way to design a striped table ?
This may be simple but can't find any documentation about this.

I'm currently using this to generate an invoice, and it works great, however, the table rows are all evenly sized by default, is there a way I can override the width for a certain row?

We have a GST row that will never have more than 3 characters in the header item/cell item, so the size it is by default is quite large.

I would love to reduce just that section to allow for text in the first row to be larger. Similar to how react row/col allows md={4} for example. Overriding the width via custom style doesn't seem to work.

Hi, thanks for your repo. I am trying to create a table with multiple rows but the TableRow Component doesn't seem to work properly. Below code:

`

<TableRow>
    <DataTableCell weighting={0.3} getContent={() => 'First'}/>
    <DataTableCell weighting={0.3} getContent={() => 'First'}/>
    <DataTableCell getContent={() => 'First'}/>
    <DataTableCell getContent={() => 'First'}/>
    <DataTableCell getContent={() => 'First'}/>
</TableRow>
<TableRow>
    <DataTableCell weighting={0.3} getContent={() => 'First'}/>
    <DataTableCell weighting={0.3} getContent={() => 'First'}/>
    <DataTableCell getContent={() => 'First'}/>
    <DataTableCell getContent={() => 'First'}/>
    <DataTableCell getContent={() => 'First'}/>
</TableRow>

`

renders this result:

that is, both rows one on top of the other instead of below. Any help? Thanks!

The current version is not working with yarn and even windows installing command with escape character is not working (But it can be installed through the first command). It would be great if you enhance this to support yarn install since create-react-app uses yarn as the default package manager.

As the summary says, I'd wish to be able to use Colspan and Rowspan.

I have not checked documentation in detail, hence please point out if I've missed any part documenting colspan usage. Thanks

Hey, thanks for this, I like the syntax, good work :)

I can't work out how to style the components though? I've tried composing with styled components...

import styled from '@react-pdf/styled-components'
import { Table as TableOrig } from '@david.kucsai/react-pdf-table'
const Table = styled(TableOrig)`/* stuff */`

... and also regular ...

<Table style={{ foo: 'bar' }}>

... and none of this seems to work. Am I doing something dumb?

Hi, thanks for your work.

I've been fiddling with the library today, and was trying to zebra-color rows in my table, but I've not found how to do it... I use DataTableCells to display info, and even if I can style each row, I can't seem to find a way to style it depending if it is even or odd.

I was thinking it could be useful the DataTableCell component can have access to each row not only to get content to display, but to get the styling also, which would make the styling more powerful. Don't know if you have came accross something like this, and if you have thought about a way to solve it.

Thanks again, I could also try to help with this, if the project is accepting collaborations.

I paste a sample of what I need:

npm ERR! Host key verification failed.
npm ERR! fatal: Could not read from remote repository.

node_modules/@david.kucsai/react-pdf-table/lib/TableCell.d.ts(11,39): error TS2724: 'ReactPDF' has no exported member named 'Style'. Did you mean 'Styles'?

I have the case where a table is split on multiple pages and I couldn't find a way to repeat the header on the needed pages.

Hi, is there a possibility to include @react-pdf/renderer ^2.0.0 in peerDependencies?

also react ^17.0.0 and ^18.0.0

I currently can't seem to get the table to abide by the padding set in the parent view.

Basically, the table is surrounded by a border (A view with custom styling), but the table just ignores that.
Every other component I put within the scope of that View does abide by the padding set.
Was there any way to style the table directly/apply custom styles?

I got hung up on trying to use "style" property like we do with react-pdf components, but in react-pdf-table components you need to use "styles".

Is this intentional to use styles rather than style?

If possible it seems like it would be better to match react-pdf.

So currently this works

<TableCell styles={styles.headerCell}>Week Start</TableCell>

but I'm thinking it would be better to match react-pdf so it's not as confusing when switching between them and not realizing why it isn't working.

<TableCell style={styles.headerCell}>Week Start</TableCell>

https://react-pdf.org/styling

Hi
I want to achieve side by side in a single page and also the data should start where its ending on the left table.
i.e. I want data continuing from the end of the left table

Im trying to insert data from an api but only get the first row. How to proceed here?

`

                <TableHeader>
                    <TableCell>
                        Nome
                    </TableCell>
                    <TableCell>
                      Sexo
                    </TableCell>

                    <TableCell>
                        Apelido
                    </TableCell>
                   
                </TableHeader>
                {People.attributes.map((details) => (
                
                <TableBody data={[
                  {firstName:  details.attributes.filter(
                    (x) => x.displayName === "First name"
                  )[0].value, 
                  lastName: details.attributes.filter(
                    (x) => x.displayName === "Last name"
                  )[0].value, 
                  country: details.attributes.filter(
                    (x) => x.displayName === "Country"
                  )[0].value},
              
              ]}>
               
                    <DataTableCell getContent={(r) => r.firstName}/>
                    <DataTableCell getContent={(r) => r.lastName}/>
                    <DataTableCell getContent={(r) => r.country}/> 
                    
                </TableBody> 
                ))}   
            </Table> `

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>
        )
    }
}

How can I map data, I have this code but in the pdf it only shows me the header and not the data:

I want to make Table like this. How can I do it ????

import {
Table,
TableCell,
TableHeader,
TableBody,
DataTableCell
} from '@david.kucsai/react-pdf-table'

For react-pdf added font register:
Font.register({ family: 'Arial', src: '/fonts/Arial-Regular.ttf' });
Font.register({ family: 'Arial-Bold', src: '/fonts/Arial-Bold.ttf' });

Hi there,
Did You consider adding it to react-pdf?
This would help a lot because many users are looking for tables support.

BTW awesome work 😁

While searching npm for a library that renders tables using @react-pdf/renderer, our team noticed several (12!) very similar packages. We identified that most need more maintenance, testing, or support. To address this, we released @ag-media/react-pdf-table, which we are committed to supporting as we actively use it in our commercial projects.

It's fantastic to see the different approaches and functionalities each package brings to the table. Our community thrives on innovation, and it's inspiring to witness the variety of solutions available.

However, we believe that merging our efforts and packages into a single, more flexible, comprehensive tool would greatly benefit developers. By consolidating our packages, we can eliminate confusion and provide a reliable solution with a stronger community. Let's work together to consolidate our packages, ensuring that developers can easily find the right solution without searching through multiple repositories.

Please share your thoughts, and let's discuss the details of merging our packages, including adding additional guides, examples or tests. Together, we can create a package that simplifies the developer experience and benefits the entire community.

We are looking forward to your response and the possibility of joining forces!

I want to know, how can I add table header in every page beginning?

I have lots of rows to display in PDF. Table design is working except the collapse Table border in some rows .it show some spaces between joining the rows.

When I put TableCelll in TableHeader or DataTableCell in TableBody it throws an error

Hello, can we remove the border table with props style? I tried but not work.

<Table
                    style={{border:"none"}}
                    data={[
                        {firstName: "John", lastName: "Smith", dob: new Date(2000, 1, 1), country: "Australia", phoneNumber: "xxx-0000-0000"},
                        {firstName: "John", lastName: "Smith", dob: new Date(2000, 1, 1), country: "Australia", phoneNumber: "xxx-0000-0000"},
                        {firstName: "John", lastName: "Smith", dob: new Date(2000, 1, 1), country: "Australia", phoneNumber: "xxx-0000-0000"},                        
                    ]}
                >
                    <TableHeader styles={{border:"none"}}>
                        <TableCell style={{border:"none", color:"red",includeTopBorder:false,includeBottomBorder:false,includeLeftBorder:false,includeRightBorder:false}} >
                            First Name
                        </TableCell>
                        <TableCell>
                            Last Name
                        </TableCell>
                        <TableCell>
                            DOB
                        </TableCell>
                        <TableCell>
                            Country
                        </TableCell>
                        <TableCell>
                            Phone Number
                        </TableCell>
                    </TableHeader>
                    <TableBody styles={{border:"none"}}>
                        <DataTableCell getContent={(r) => <Link src="https://www.google.com">{r.firstName}</Link> }/>
                        <DataTableCell getContent={(r) => r.lastName}/>
                        <DataTableCell getContent={(r) => r.dob.toLocaleString()}/>
                        <DataTableCell getContent={(r) => r.country}/>
                        <DataTableCell getContent={(r) => r.phoneNumber}/>
                    </TableBody>
                </Table> 

Is there a way of rendering the TableHeader on the following pages

<DataTableCell getContent={(r) => 123}/>

will cause an error to occur during the rendering of the table.

Once the component prop function "getContent" is changed to return a string:

<DataTableCell getContent={(r) => "123"}/>

the problem is fixed.

A Pretty easy workaround for a dynamic value would be

<DataTableCell getContent={(r) => `${r.value}`}/>

But I figured I would bring this to your attention.

Hello team,
can u please detail description how to use this pakage... or any small sandbox example.
I really need this ,thanks in advance

Hi is there a way to add a footer to a table lets say a Total Count? I tried this but does not work:

<Table data={this.state.LstEntities}>
                               <TableHeader>
                                    <TableCell weighting={0.6}>
                                        Entity
                                    </TableCell>
                                    <TableCell weighting={0.4}>
                                        Count
                                    </TableCell>
                                </TableHeader>
                                <TableBody>
                                    <DataTableCell style={pdfStyles.dataTableRow} weighting={0.6} getContent={(r: ISPColorCodedRecord) => r.Title} />
                                    <DataTableCell style={pdfStyles.dataTableRow} weighting={0.4} getContent={(r: ISPColorCodedRecord) => { return this.GetRecordsByEntity(r.Id).length; }} />
                                </TableBody>
                                <TableRow>
                                    <TableCell weighting={0.6}>
                                        Total
                                    </TableCell>
                                    <TableCell weighting={0.4}>
                                        {this.state.Records.length}
                                    </TableCell>
                                </TableRow>
</Table>

Related to #1

• TableRow is currently exported to index.js, it should not be.
• Documentation needs to be updated to reflect this.

I use this lib in my project with other libraries, but now the others libs require the React 17 or 18. I test it with this react version an run Ok, could you add support the new version react?

Can we add page breaks according to data consuming in the first page and remaining pages at same page break

How can I map data, I have this code but in the pdf it only shows me the header and not the data:

Suppose that you run

git clone https://github.com/diegomura/react-pdf.git
cd react-pdf
npm install "@david.kucsai/react-pdf-table"

How would you then go about importing the Table and related components into your project? Is this even possible / the intended way of using it?

couldnt render the storybook itself in IE11

Hello,

We picked react-pdf-table in our project and we bumped into a use case, which is discouraged in the README:
"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."

However our content is dynamic and is hard to calculate the used height, so we came up with a fix in form of a patch, that solves the problem for us and we don't see any drawbacks for now. Of course using a patch is really not beneficial from maintenance point of view, so we would like to find a better solution which might be also useful for the community.

Our patch sets the property "wrap" on TableRow from false to true. We though of something like introducing a property for this on Table or TableHeader and TableBody so the user could turn wrapping on for his/her own risk. If you are open for such change we would create a pull request for it and also are open for discussion what would be the best approach to do so.

hi i tried to add other text or images to the document and i wasn't able to

Would you bother mentioning how to import? That's the first thing we need to do before writing any code right?

I tried this. It gives error.

import {
  Table,
  TableHeader,
  TableCell,
  TableBody,
  DataTableCell,
} from "react-pdf-table";

For example, i need to show the row index number in a column.

in current DataTableCell, this cell will be given only the data on that row without knowing the index of the row.

is there a way to get row index, or should i make it into the data itself?

Hello David,
when I enter npm install "@david.kucsai/react-pdf-table" into my terminal I run into an error:
ERESOLVE unable to resolve dependency tree
Could not resolve dependency:
peer @react-pdf/renderer@"^1.6.8" from @david.kucsai/[email protected]
node_modules/@david.kucsai/react-pdf-table
@david.kucsai/react-pdf-table@"*" from the root project

I am pretty new to programming, do I have to do anything else than typing the command?

Hi! I am using this library. However, I would like to add some padding to each data table cell. I tried adding:

style={{ padding: 5 }}

to no avail. Anybody has encountered doing this? Appreciate your help. Thanks!

When I generate Pdf on api/route in Next Js 13 I got an error that isn't suitable as server component.

 ⨯ Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components.

It seems, that package didn't compared for app routes

I would like to know how to wrap this table。Then I read the source code and found that line feeds can only be achieved through DataTableCell and data, so why not output multiple s instead of just one?

Hello,

My table doesn't have any borders and when I try to add style param I have some compilation errors.
Can you help please with this issue?

Thanks in advance,