DataTable

1import { Text as PDFText } from '@react-pdf/renderer';
2import type { Style } from '@react-pdf/types';
3import { Fragment } from 'react';
4import { usePdfxTheme, useSafeMemo } from '../lib/pdfx-theme-context';
5import { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow } from '../table/pdfx-table';
6import { createCompactStyles, formatValue } from './pdfx-data-table.styles';
7import type { DataTableProps } from './pdfx-data-table.types';
8 
9export function DataTable<T extends Record<string, unknown>>({
10  columns,
11  data,
12  variant = 'grid',
13  footer,
14  stripe = false,
15  size = 'default',
16  noWrap = false,
17  style,
18}: DataTableProps<T>) {
19  const theme = usePdfxTheme();
20  const compact = useSafeMemo(() => createCompactStyles(theme), [theme]);
21  const isCompact = size === 'compact';
22 
23  return (
24    <Table variant={variant} zebraStripe={stripe} noWrap={noWrap} style={style}>
25      <TableHeader>
26        <TableRow header>
27          {columns.map((col) => (
28            <TableCell
29              key={col.key}
30              header
31              align={col.align ?? 'left'}
32              width={col.width}
33              style={isCompact ? compact.cell : undefined}
34            >
35              {isCompact ? (
36                <PDFText
37                  style={[compact.headerText, col.align ? ({ textAlign: col.align } as Style) : {}]}
38                >
39                  {col.header}
40                </PDFText>
41              ) : (
42                col.header
43              )}
44            </TableCell>
45          ))}
46        </TableRow>
47      </TableHeader>
48      <TableBody>
49        {data.map((row, i) => (
50          // biome-ignore lint/suspicious/noArrayIndexKey: DataTable has no row id; order is stable for static data
51          <Fragment key={i}>
52            <TableRow>
53              {columns.map((col) => {
54                const value = row[col.key];
55                const rendered = col.render ? col.render(value, row) : null;
56                const text = rendered === null ? formatValue(value) : null;
57                return (
58                  <TableCell
59                    key={col.key}
60                    align={col.align ?? 'left'}
61                    width={col.width}
62                    style={isCompact ? compact.cell : undefined}
63                  >
64                    {isCompact ? (
65                      rendered !== null ? (
66                        rendered
67                      ) : (
68                        <PDFText
69                          style={[
70// … truncated