feat(FE): Add PDF table components for report export

2026-05-24 07:15:44 +00:00 · 2026-01-27 16:23:29 +07:00
parent b7085f5d2a
commit 142ce7fe3a
5 changed files with 470 additions and 0 deletions
@@ -0,0 +1,89 @@
+'use client';
+
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+
+export interface PdfColumn {
+  key: string;
+  header: string;
+  flex: number;
+  align?: 'left' | 'center' | 'right';
+}
+
+const styles = StyleSheet.create({
+  tableRow: {
+    flexDirection: 'row',
+  },
+  tableHeader: {
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellHeader: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 7,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+    paddingVertical: 12,
+    textAlign: 'center',
+  },
+  tableCellHeaderRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 7,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+    textAlign: 'right',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+    paddingVertical: 12,
+  },
+});
+
+interface PdfTheadProps {
+  columns: PdfColumn[];
+}
+
+export const PdfThead = ({ columns }: PdfTheadProps) => {
+  return (
+    <View style={[styles.tableRow, styles.tableHeader]}>
+      {columns.map((column, index) => {
+        const align = column.align || 'center';
+        const isLastColumn = index === columns.length - 1;
+
+        const cellStyle =
+          align === 'right'
+            ? [
+                styles.tableCellHeaderRight,
+                {
+                  flex: column.flex,
+                  textAlign: 'right' as const,
+                  borderRightWidth: isLastColumn ? 0 : 1,
+                },
+              ]
+            : [
+                styles.tableCellHeader,
+                {
+                  flex: column.flex,
+                  textAlign: align as 'left' | 'center' | 'right',
+                  borderRightWidth: isLastColumn ? 0 : 1,
+                },
+              ];
+
+        return (
+          <View key={column.key} style={cellStyle}>
+            <Text>{column.header}</Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+};