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'; 'use client';
import { View, StyleSheet } from '@react-pdf/renderer'; 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({ const styles = StyleSheet.create({
table: { table: {
@@ -13,9 +15,35 @@ const styles = StyleSheet.create({
interface PdfTableProps { interface PdfTableProps {
columns: PdfColumn[]; 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) => { export const PdfTable = ({
return <View style={styles.table}>{children}</View>; 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, fontSize: 7,
textAlign: 'center', textAlign: 'center',
}, },
badge: {
paddingVertical: 2,
paddingHorizontal: 4,
borderRadius: 12,
fontSize: 5,
fontWeight: 'bold',
borderWidth: 1,
textAlign: 'center',
whiteSpace: 'nowrap',
},
}); });
interface PdfTbodyProps { interface PdfTbodyProps {
@@ -218,7 +208,7 @@ export const PdfTbody = ({
cell?.value !== null && cell?.value !== null &&
cell?.value !== '' ? ( cell?.value !== '' ? (
typeof cell.value === 'object' ? ( typeof cell.value === 'object' ? (
cell.value // For custom React element (badge, etc) cell.value
) : ( ) : (
<Text>{String(cell.value)}</Text> <Text>{String(cell.value)}</Text>
) )