Tables

<Table columns={['1fr', 50, 80]} headerRows={1} className="w-full">
  <Row className="bg-gray-50 font-bold">
    <Cell className="p-2">Item</Cell>
    <Cell className="p-2 text-right">Qty</Cell>
    <Cell className="p-2 text-right">Amount</Cell>
  </Row>
  {items.map((it) => (
    <Row key={it.id}>
      <Cell className="border-b border-gray-200 p-2">{it.name}</Cell>
      <Cell className="border-b border-gray-200 p-2 text-right">{it.qty}</Cell>
      <Cell className="border-b border-gray-200 p-2 text-right">{it.amount}</Cell>
    </Row>
  ))}
</Table>

• Columns. Widths are fractions ('1fr') or points.
• Pagination. Header rows repeat on every page. Rows split across pages, and a row taller than a page splits inside its cells.
• Cells. colSpan, rowSpan and verticalAlign are available on Cell. The columns set a cell's width, and a cell's height and minHeight are minimums: the row grows to fit the content. Styles that place or size the cell itself (width, minWidth, maxWidth, margin, position, flexGrow, …) or apply an effect to it (opacity, rotate, transform, …) are errors on a Cell; put them on a View inside it.