dmk99 / react-pdf-table Goto Github PK
View Code? Open in Web Editor NEWStorybook Available
Home Page: https://dmk99.github.io/react-pdf-table
License: MIT License
Storybook Available
Home Page: https://dmk99.github.io/react-pdf-table
License: MIT License
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.
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?
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>
hi i tried to add other text or images to the document and i wasn't able to
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?
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?
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.
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 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
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?
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>
)
}
}
couldnt render the storybook itself in IE11
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
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
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!
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> `
There is a way to design a striped table ?
This may be simple but can't find any documentation about this.
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:
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!
<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.
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, is there a possibility to include @react-pdf/renderer ^2.0.0 in peerDependencies?
Line 18 in 311c211
also react ^17.0.0 and ^18.0.0
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.
Related to #1
TableRow
is currently exported to index.js
, it should not be.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>
I want to know, how can I add table header in every page beginning?
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 😁
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>
How can I map data, I have this code but in the pdf it only shows me the header and not the data:
Suerte Área Variedad {datos.map(c => ( {c.suerte} {c.area} {c.variedad} ))}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?
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>
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
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!
npm ERR! Host key verification failed.
npm ERR! fatal: Could not read from remote repository.
How can I map data, I have this code but in the pdf it only shows me the header and not the data:
Suerte Área Variedad {datos.map(c => ( {c.suerte} {c.area} {c.variedad} ))}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.
Is there a way of rendering the TableHeader on the following pages
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,
Hello team,
can u please detail description how to use this pakage... or any small sandbox example.
I really need this ,thanks in advance
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'?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.