Skip to main content

Documentation Index

Fetch the complete documentation index at: https://react-docx.com/llms.txt

Use this file to discover all available pages before exploring further.

Tables with headers, borders, cell spanning, and styling. 
<Table className="border">
  <Thead>
    <Tr>
      <Th className="border p-2">Name</Th>
      <Th className="border p-2">Price</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td className="border p-2">Widget</Td>
      <Td className="border p-2">$10</Td>
    </Tr>
  </Tbody>
</Table>

​
Components

ComponentDescription
TableTable container
TheadHeader section
TbodyBody section
TrTable row
ThHeader cell (bold by default)
TdData cell

​
Props

​
Table

PropTypeDescription
childrenReactNodeThead, Tbody, Tr elements
classNamestringTailwind classes
width"full" | "auto" | MeasurementValueTable width

​
Tr

PropTypeDescription
childrenReactNodeTh or Td elements
classNamestringTailwind classes
heightMeasurementValueRow height

​
Th / Td

PropTypeDescription
childrenReactNodeCell content
classNamestringTailwind classes
colSpannumberHorizontal span
rowSpannumberVertical span

​
Width

// Full width (default)
<Table width="full">

// Shrink to content
<Table width="auto">

// Fixed width
<Table width="4in">
<Table width="10cm">

​
Borders

​
All borders

<Table className="border">
  <Tbody>
    <Tr>
      <Td className="border">Cell</Td>
    </Tr>
  </Tbody>
</Table>

​
Border colors

<Td className="border border-gray-300">Light border</Td>
<Td className="border border-blue-500">Blue border</Td>

​
Border thickness

<Td className="border">Normal</Td>
<Td className="border-2">Thicker</Td>
<Td className="border-4">Even thicker</Td>

​
Individual sides

<Td className="border-b">Bottom only</Td>
<Td className="border-t border-b">Top and bottom</Td>

​
Padding

<Td className="p-2">All sides</Td>
<Td className="px-4 py-2">Horizontal and vertical</Td>
<Td className="pt-2 pb-4 pl-2 pr-2">Individual sides</Td>

​
Background colors

<Th className="bg-gray-100">Header</Th>
<Td className="bg-green-50">Highlighted cell</Td>
<Tr className="bg-yellow-50">
  <Td>Entire row highlighted</Td>
</Tr>

​
Alignment

​
Horizontal

<Td className="text-left">Left</Td>
<Td className="text-center">Center</Td>
<Td className="text-right">Right</Td>

​
Vertical

<Td className="align-top">Top</Td>
<Td className="align-middle">Middle</Td>
<Td className="align-bottom">Bottom</Td>

​
Column span

<Table className="border">
  <Thead>
    <Tr>
      <Th colSpan={2} className="border p-2 text-center">
        Sales Report
      </Th>
    </Tr>
    <Tr>
      <Th className="border p-2">Product</Th>
      <Th className="border p-2">Revenue</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td className="border p-2">Widget</Td>
      <Td className="border p-2">$1,000</Td>
    </Tr>
  </Tbody>
</Table>

​
Row span

<Table className="border">
  <Tbody>
    <Tr>
      <Td rowSpan={3} className="border p-2 align-middle">
        Electronics
      </Td>
      <Td className="border p-2">Laptop</Td>
      <Td className="border p-2">$999</Td>
    </Tr>
    <Tr>
      <Td className="border p-2">Tablet</Td>
      <Td className="border p-2">$499</Td>
    </Tr>
    <Tr>
      <Td className="border p-2">Phone</Td>
      <Td className="border p-2">$799</Td>
    </Tr>
  </Tbody>
</Table>
No placeholder cells needed for spanned rows.

​
Rich content

Cells can contain formatted text: 
<Td className="border p-2">
  <Text className="font-bold">$1,234</Text>
  <Text className="text-green-600 text-sm"> (+12%)</Text>
</Td>

​
Row height

<Tr height="0.5in">
  <Td>Fixed height row</Td>
</Tr>

​
Full example

<Table className="border" width="full">
  <Thead>
    <Tr className="bg-gray-100">
      <Th className="border p-2">Product</Th>
      <Th className="border p-2 text-right">Q1</Th>
      <Th className="border p-2 text-right">Q2</Th>
      <Th className="border p-2 text-right">Total</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td className="border p-2 font-bold">Widget A</Td>
      <Td className="border p-2 text-right">$12,000</Td>
      <Td className="border p-2 text-right">$15,000</Td>
      <Td className="border p-2 text-right font-bold">$27,000</Td>
    </Tr>
    <Tr>
      <Td className="border p-2 font-bold">Widget B</Td>
      <Td className="border p-2 text-right">$8,500</Td>
      <Td className="border p-2 text-right">$9,200</Td>
      <Td className="border p-2 text-right font-bold">$17,700</Td>
    </Tr>
    <Tr className="bg-gray-50">
      <Td className="border p-2 font-bold">Total</Td>
      <Td className="border p-2 text-right font-bold">$20,500</Td>
      <Td className="border p-2 text-right font-bold">$24,200</Td>
      <Td className="border p-2 text-right font-bold text-green-600">$44,700</Td>
    </Tr>
  </Tbody>
</Table>

​
Limitations

  • No individual column width control
  • No floating/positioned tables
  • No table rotation
  • No named table styles