Table

1import { Text as PDFText, View } from '@react-pdf/renderer';
2import type { Style } from '@react-pdf/types';
3import { Children, type ReactElement, type ReactNode, cloneElement, isValidElement } from 'react';
4import { usePdfxTheme, useSafeMemo } from '../lib/pdfx-theme-context';
5import { createTableStyles } from './pdfx-table.styles';
6import type {
7  TableCellProps,
8  TableProps,
9  TableRowProps,
10  TableSectionProps,
11  TableVariant,
12} from './pdfx-table.types';
13 
14function processTableChildren(
15  children: ReactNode,
16  variant: TableVariant,
17  zebraStripe: boolean
18): ReactNode {
19  let bodyRowIndex = 0;
20 
21  return Children.map(children, (child) => {
22    if (!isValidElement(child)) return child;
23 
24    if (child.type === TableHeader || child.type === TableBody || child.type === TableFooter) {
25      const isBody = child.type === TableBody;
26      const sectionChild = child as ReactElement<TableSectionProps>;
27      const sectionChildren = Children.map(sectionChild.props.children, (rowChild) => {
28        if (isValidElement(rowChild) && rowChild.type === TableRow) {
29          const rowProps: Partial<TableRowProps> = { variant };
30 
31          if (isBody && zebraStripe) {
32            const isStripe = bodyRowIndex % 2 === 1;
33            bodyRowIndex++;
34            if (isStripe) {
35              rowProps.stripe = true;
36            }
37          }
38 
39          return cloneElement(rowChild as ReactElement<TableRowProps>, rowProps);
40        }
41        return rowChild;
42      });
43 
44      return cloneElement(child, {}, sectionChildren);
45    }
46 
47    if (child.type === TableRow) {
48      return cloneElement(child as ReactElement<TableRowProps>, { variant });
49    }
50 
51    return child;
52  });
53}
54 
55export function TableHeader({ children, style }: TableSectionProps) {
56  return (
57    <View minPresenceAhead={60} style={style}>
58      {children}
59    </View>
60  );
61}
62 
63export function TableBody({ children, style }: TableSectionProps) {
64  return <View style={style}>{children}</View>;
65}
66 
67export function TableFooter({ children, style }: TableSectionProps) {
68  return <View style={style}>{children}</View>;
69}
70 
71export function Table({
72  children,
73  style,
74  variant = 'line',
75  zebraStripe = false,
76  noWrap = false,
77}: TableProps) {
78  const theme = usePdfxTheme();
79  const styles = useSafeMemo(() => createTableStyles(theme), [theme]);
80  const tableStyles: Style[] = [styles.table];
81  const effectiveZebra = variant === 'striped' ? true : zebraStripe;
82 
83  tableStyles.push(
84    {
85      grid: styles.tableGrid,
86// … truncated