refactor(FE): Refactor PdfTable to use PdfThead/PdfTbody/PdfTfoot

This commit is contained in:
rstubryan
2026-01-28 09:49:26 +07:00
parent c63882fbd7
commit 956f1ce500
2 changed files with 33 additions and 15 deletions
+32 -4
View File
@@ -1,7 +1,9 @@
'use client';
import { View, StyleSheet } from '@react-pdf/renderer';
import { PdfColumn } from './PdfThead';
import { PdfThead, PdfColumn } from './PdfThead';
import { PdfTbody, PdfTbodyCell } from './PdfTbody';
import { PdfTfoot, PdfTfootCell } from './PdfTfoot';
const styles = StyleSheet.create({
table: {
@@ -13,9 +15,35 @@ const styles = StyleSheet.create({
interface PdfTableProps {
columns: PdfColumn[];
children: React.ReactNode;
data: PdfTbodyCell[][];
footer?: PdfTfootCell[];
footerLabel?: string;
initialBalanceRow?: {
valueKey: string;
value: number;
align?: 'right';
color?: string;
};
}
export const PdfTable = ({ columns, children }: PdfTableProps) => {
return <View style={styles.table}>{children}</View>;
export const PdfTable = ({
columns,
data,
footer,
footerLabel = 'Total',
initialBalanceRow,
}: PdfTableProps) => {
return (
<View style={styles.table}>
<PdfThead columns={columns} />
<PdfTbody
columns={columns}
rows={data}
initialBalanceRow={initialBalanceRow}
/>
{footer && footer.length > 0 && (
<PdfTfoot columns={columns} cells={footer} label={footerLabel} />
)}
</View>
);
};
+1 -11
View File
@@ -69,16 +69,6 @@ const styles = StyleSheet.create({
fontSize: 7,
textAlign: 'center',
},
badge: {
paddingVertical: 2,
paddingHorizontal: 4,
borderRadius: 12,
fontSize: 5,
fontWeight: 'bold',
borderWidth: 1,
textAlign: 'center',
whiteSpace: 'nowrap',
},
});
interface PdfTbodyProps {
@@ -218,7 +208,7 @@ export const PdfTbody = ({
cell?.value !== null &&
cell?.value !== '' ? (
typeof cell.value === 'object' ? (
cell.value // For custom React element (badge, etc)
cell.value
) : (
<Text>{String(cell.value)}</Text>
)