Tables for @react-pdf/renderer

react-pdf-table.js

import React from 'react'
import { View, StyleSheet } from '@react-pdf/renderer'

const styles = StyleSheet.create({
  row: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignContent: 'center',
    flexWrap: 'nowrap',
    alignItems: 'stretch',
    flexGrow: 0,
    flexShrink: 0,
  },
  cell: {
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 'auto',
    alignSelf: 'stretch',
    padding: 5
  },
  border: {
    border: '1px solid black'
  }
})

// Made by @hloth https://gist.github.com/VityaSchel/7e51fe39bafdf636858e077329bdf6ed
export function Table(props){
  return (
    <View style={props.style}>
      {props.children?.map((child, i) => child && React.cloneElement(child, { noBorder: props?.noBorder, key: i }))}
    </View>
  )
}

export function Row(props) {
  return (
    <View style={[styles.row, ...(props.style ?? [])]}>
      {props.children?.map((child, i) => child && React.cloneElement(child, { noBorder: props?.noBorder, key: i }))}
    </View>
  )
}

export function Cell(props) {
  return (
    <View style={[styles.cell, ...(props?.noBorder ? [] : [styles.border]), ...(props.style ?? [])]}>
      {props.children}
    </View>
  )
}