Table component - Lettercamp

Use Table to control a table’s layout while keeping its contents editable in the visual editor. Wrap a Markdown table for simple content, or use TableRow and TableCell when you need merged cells or individual styling.

<Table width="wide" columnWidths={[40, 60]}>

| Feature | Description |
| --- | --- |
| Visual editor | Edit your article with block controls. |
| Source editor | Write Markdown and components directly. |

</Table>

Table properties

Property	Type	Default	Description
`width`	`"regular"`, `"wide"`, or `"full"`	`"regular"`	Layout width.
`columnWidths`	Array of positive numbers	Equal columns	Relative column widths. Supply one value per column. `[40, 60]` produces 40% and 60%; `[1, 2]` produces one-third and two-thirds.
`rowHeight`	Positive number	Automatic	Default row height in pixels. A row’s own `height` takes precedence.
Children	Markdown table or `TableRow` elements	Required	Use one content format per table.

Rich tables

<Table width="wide" columnWidths={[35, 65]}>
  <TableRow>
    <TableCell header>Stage</TableCell>
    <TableCell header>Next action</TableCell>
  </TableRow>
  <TableRow height={56}>
    <TableCell rowSpan={2} background="#fafafa">Draft</TableCell>
    <TableCell>Review the **main argument**.</TableCell>
  </TableRow>
  <TableRow height={56}>
    <TableCell>Check links and image descriptions.</TableCell>
  </TableRow>
</Table>

TableRow

Property	Type	Default	Description
`height`	Positive number	Table’s `rowHeight`, otherwise automatic	Row height in pixels.
Children	`TableCell` elements	Required	Cells in left-to-right order.

TableCell

Property	Type	Default	Description
`header`	Boolean	`false`	Renders a header cell.
`colSpan`	Positive integer	`1`	Number of columns occupied by the cell.
`rowSpan`	Positive integer	`1`	Number of rows occupied by the cell.
`align`	`"left"`, `"center"`, or `"right"`	Left	Horizontal text alignment.
`color`	CSS color string	Inherited	Text color, such as `"#123456"`.
`background`	CSS color string	None	Cell background, such as `"#fafafa"`.
Children	Inline Markdown	Empty	Text, bold, italic, inline code, and links.

Use TableRow only inside Table, and TableCell only inside TableRow. Omit cells covered by a preceding cell’s rowSpan or colSpan. The first row of a Markdown table becomes header cells automatically; rich tables use the explicit header property.

Use the visual editor

The table retains its existing cell editor, row and column menus, column resizing, merge and split actions, alignment, and colors. The source writer uses TableRow and TableCell so these settings survive saving and reloading. Ordinary Markdown tables and supported legacy table HTML remain readable.