Comments (2)
You can start from this example and customize everything you want. The simple idea is to recreate a table with the React Pdf components.
const headers = ['header 1', 'header 2', 'header 3']
const data = [[1,2,'test'], [1,2,'a really really long text test'], [1,2,123123123]]
const Quixote = () => {
const renderHeader = () => {
return headers.map((header, index) => {
return (
<View key={`header_${index}`} style={[styles.headerCell]}>
<Text style={{ textTransform: 'uppercase' }}>
{header}
</Text>
</View>
)
})
}
const renderCells = (values, rowIndex) => {
return values.map((value, index) => {
return (
<View key={`cell_${rowIndex}_${index}`} style={[styles.tableCell]}>
<Text>
{value}
</Text>
</View>
)
})
}
const renderRows = () => {
return data.map((row, index) => {
return (
<View key={`row_${index}`} style={[styles.row]} wrap={false}>
{renderCells(row, index)}
</View>
)
})
}
return <Document>
<Page>
<View style={[{ backgroundColor: 'white', padding: 16, paddingTop: 0 }]}>
<View fixed style={styles.header}>
{renderHeader()}
</View>
{renderRows()}
</View>
</Page>
</Document>
};
Font.register({
family: 'Oswald',
src: 'https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf'
});
const styles = StyleSheet.create({
header: {
flexDirection: 'row',
textAlign: 'left',
backgroundColor: 'white',
borderBottom: '0.5px solid black',
paddingBottom: 16,
marginBottom: 10,
},
headerCell: {
flex: 1,
},
tableCell: {
flex: 1,
padding: 2.5,
paddingHorizontal: 0,
// textOverflow: 'ellipsis',
// maxLines: 1,
},
row: {
flexDirection: 'row',
textAlign: 'left',
backgroundColor: 'white',
marginVertical: 2.5,
},
})
ReactPDF.render(<Quixote />);
from react-pdf.
Kindly check the discussions in this related issue #487
from react-pdf.
Related Issues (20)
- 3.4.4 font changes no longer apply HOT 16
- showToolBar prop doesn't work as intended on FireFox, the toolbar is still being shown
- Conditional render if page is about to break
- Unknown version HOT 3
- Text overflows vertically when trying to render tables HOT 1
- React-PDF does not work anywhere on Next.JS HOT 2
- Vite 5 + React 18 can't render PDFViewer and give blank page in iframe due to custom fonts HOT 4
- Custom font causes infinite pending of `toBlob` HOT 2
- PDFDownloadLink not working using next js HOT 3
- Vulnerability in used pdfjs-dist version HOT 11
- hasOwnProperty undefined HOT 1
- DEFAULT FONTS IS NOT WORKING HOT 9
- Image not loading after webpack & file-loader
- unable to set pdfinstance to null
- PDFDownloadLink not working using Next js HOT 2
- Error when building code for the browser with esbuild - cannot not resolve "fs", "buffer", "stream", "zlib", "path", "url" HOT 1
- compat with react 19 HOT 1
- Cloudflare worker compatibility
- ReferenceError: Buffer is not defined
- Dependency versioning HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-pdf.