Issues with borders #302
Description
Hi,
I noticed some strange issues with borders. Sometimes they are not visible at all, sometimes are of different width even if I set the same width to all borders, sometimes they stretch after the end of the View (See image below)
This is the table component that I made to render tables:
import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, Text } from '@react-pdf/renderer';
const tableBorderWidth = '1px';
const tableBorderColor = 'grey';
const styles = StyleSheet.create({
rowsContainer: {
flex: 0,
flexDirection: 'column',
borderTop: `${tableBorderWidth} solid ${tableBorderColor}`
},
row: {
flex: 0,
flexDirection: 'row',
borderLeft: `${tableBorderWidth} solid ${tableBorderColor}`,
borderBottom: `${tableBorderWidth} solid ${tableBorderColor}`
},
defaultText: {
padding: 0,
fontSize: 7
// marginTop: 2 // hack to center text vertically,
},
defaultCell: {
paddingVertical: 1,
paddingHorizontal: 3,
borderRight: `${tableBorderWidth} solid ${tableBorderColor}`
}
});
export default class PDFTable extends React.PureComponent {
renderSingleCell = ({ cellStyle, textStyle, value }, columnIndex) => (
<View
key={columnIndex}
style={[styles.defaultCell, cellStyle, { width: this.props.columnWidths[columnIndex] }]}
>
<Text style={[styles.defaultText, textStyle]}>{value}</Text>
</View>
);
renderSingleRow = (row, rowIndex) => {
return (
<View key={rowIndex} style={styles.row}>
{row.map(this.renderSingleCell)}
</View>
);
}
render = () => {
return (
<View style={styles.rowsContainer}>
{this.props.rows.map(this.renderSingleRow)}
</View>
);
}
}
const CellShape = PropTypes.shape({
cellStyle: PropTypes.objectOf(PropTypes.any),
textStyle: PropTypes.objectOf(PropTypes.any),
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
});
PDFTable.propTypes = {
columnWidths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
rows: PropTypes.arrayOf(PropTypes.arrayOf(CellShape)).isRequired
};
Btw, I was only able to set border in pixels, is there any other unit I can use to define border?
Thanks.