Tables

Basic table

Tables consist of <table>, <row>, and <cell> elements. Every cell must contain at least one <paragraph>.

<table borders="single" width={7500}>
  <row>
    <cell width={3000}><paragraph><run bold>Name</run></paragraph></cell>
    <cell width={2000}><paragraph><run bold>Age</run></paragraph></cell>
  </row>
  <row>
    <cell><paragraph><run>Alice</run></paragraph></cell>
    <cell><paragraph><run>30</run></paragraph></cell>
  </row>
</table>

Table props

Prop	Type	Description
width	string | number	Width in twips or percentage ("100%")
widthType	"auto" | "dxa" | "pct" | "nil"	Width unit type
borders	Borders	Border definitions (top, right, bottom, left, insideH, insideV)
alignment	Alignment	Horizontal alignment of the table
layout	"fixed" | "autofit"	Column width algorithm
style	string	Named table style
indent	number	Left margin indent in twips
cellMargins	object	Default cell margins (top, right, bottom, left)

Row props

Prop	Type	Description
header	boolean	Repeat this row as header on each page
height	number	Row height in twips
heightRule	"auto" | "atLeast" | "exact"	Height behavior
cantSplit	boolean	Prevent row from breaking across pages

Cell props

Prop	Type	Description
width	number	Cell width in twips
shading	Shading	Background fill and pattern
columnSpan	number	Number of columns to span
verticalMerge	"restart" | "continue"	Vertical merge control
verticalAlignment	"top" | "center" | "bottom"	Content alignment
borders	Borders	Per-cell border override

Shading and header rows

<table borders="single" width={9000}>
  <row header>
    <cell shading={{ fill: "1F4E79" }}>
      <paragraph><run bold color="FFFFFF">Header</run></paragraph>
    </cell>
  </row>
  <row>
    <cell shading={{ fill: "D9E1F2" }}>
      <paragraph><run>Shaded cell</run></paragraph>
    </cell>
  </row>
</table>

Column spans

<row>
  <cell columnSpan={2}>
    <paragraph><run>This cell spans two columns</run></paragraph>
  </cell>
</row>

Vertical merge (row spans)

<row>
  <cell verticalMerge="restart"><paragraph><run>Spans 2 rows</run></paragraph></cell>
  <cell><paragraph><run>Row 1</run></paragraph></cell>
</row>
<row>
  <cell verticalMerge="continue"><paragraph /></cell>
  <cell><paragraph><run>Row 2</run></paragraph></cell>
</row>

Dynamic tables

Use .map() to generate rows from data:

<table borders="single" width={7500}>
  <row header>
    <cell><paragraph><run bold>Name</run></paragraph></cell>
    <cell><paragraph><run bold>Amount</run></paragraph></cell>
  </row>
  {data.map((item) => (
    <row key={item.id}>
      <cell><paragraph><run>{item.name}</run></paragraph></cell>
      <cell><paragraph alignment="right"><run>{item.amount}</run></paragraph></cell>
    </row>
  ))}
</table>

For an even simpler API, see the DataTable component.