Table component

1. Install dependencies

Install the EmailUX Email package locally and a few components.

# pnpm
pnpm add @emailux/components

# npm
npm install @emailux/components

# yarn
yarn add @emailux/components

2. Usage

Rows and columns

import { Table } from "@emailux/components";

export default function ExampleRowsAndCols() {
  return (
    <Table padding="10px" border>
      <Table.Row align="left" valign="middle">
        <Table.Col>Cell 1</Table.Col>
        <Table.Col>Cell 2</Table.Col>
      </Table.Row>
      <Table.Row>
        <Table.Col>Cell 3</Table.Col>
        <Table.Col>Cell 4</Table.Col>
      </Table.Row>
    </Table>
  );
}

Inherit wrapper styles via context

padding, border, and borderColor from Table flow to Table.Row and Table.Col via context.

export default function ExampleContext() {
  return (
    <Table padding="12px" border borderColor="#ddd">
      <Table.Row>
        <Table.Col>Left</Table.Col>
        <Table.Col>Right</Table.Col>
      </Table.Row>
    </Table>
  );
}

Override per row or col

Table.Row can override context for its children; Table.Col can override for itself.

export default function ExampleOverrides() {
  return (
    <Table padding="12px" border borderColor="#ddd">
      <Table.Row padding="6px" borderColor="#bbb">
        <Table.Col>Compact A</Table.Col>
        <Table.Col border={false} padding="16px">Emphasized B</Table.Col>
      </Table.Row>
    </Table>
  );
}

Using colSpan and width

Table.Col extends native td props, so attributes like colSpan work as expected.

export default function ExampleColSpan() {
  return (
    <Table padding="10px" border>
      <Table.Row>
        <Table.Col colSpan={2} padding="8px">Section Header</Table.Col>
      </Table.Row>
      <Table.Row>
        <Table.Col width="70%">Item A</Table.Col>
        <Table.Col width="30%">$10</Table.Col>
      </Table.Row>
    </Table>
  );
}

Alignment, vertical alignment, and background

export default function ExampleAlignment() {
  return (
    <Table padding="10px" border>
      <Table.Row align="center" valign="top" backgroundColor="#fafafa">
        <Table.Col>Centered Top</Table.Col>
        <Table.Col>Also Centered</Table.Col>
      </Table.Row>
    </Table>
  );
}

Props

`Table`

Name	Type	Required	Default	Description
dir	”ltr” \| “rtl”	No	Comes from wrapping `Html` component’s `dir` context prop which is `ltr`	Text direction
spacing	string	No	Comes from wrapping `Html` component’s `defaultSpacing` context prop which is `20px`	Spacing bottom, by default comes from `Html` defaultSpacing prop	padding	string	No	`"10px"`	Inner padding applied to cells via context.
border	boolean	No	`false`	Enables cell borders.
borderColor	string	No	`"#e5e5e5"`	Border color when `border` is enabled.
width	string	No	`"100%"`	Width of the rendered table.
children	React.ReactNode	Yes	—	Typically one or more `Table.Row`.

Notes:

When spacing is provided, an outer wrapper table is used to apply spacing.
padding, border, and borderColor are provided to descendants via context and can be overridden by Table.Row or Table.Col.
Borders are applied per cell with side-specific rules to avoid double borders (top/left on first row/column; right/bottom on all cells).

`Table.Row`

Name	Type	Required	Default	Description
dir	”ltr” \| “rtl”	No	”ltr”	Text direction for the content
children	React.ReactNode	Yes	—	One or more `Table.Col`.
backgroundColor	string	No	—	Background color for the row.
align	`"left" \| "center" \| "right"`	No	`"left"`	Horizontal text alignment for cells in the row.
valign	`"top" \| "middle" \| "bottom"`	No	`"middle"`	Vertical alignment for cells in the row.
padding	string	No	—	Overrides context `padding` for this row’s cells.
border	boolean	No	—	Overrides context `border` for this row’s cells.
borderColor	string	No	—	Overrides context `borderColor` for this row’s cells.

`Table.Col`

Name	Type	Required	Default	Description
dir	”ltr” \| “rtl”	No	”ltr”	Text direction for the content
children	React.ReactNode	Yes	—	Content for the cell.
backgroundColor	string	No	—	Background color for the cell.
padding	string	No	—	Padding for the cell (defaults from context if not provided).
border	boolean	No	—	Whether to set a border on the cell (defaults from context if not provided).
borderColor	string	No	—	Color for the cell border when `border` is set (defaults from context if not provided).
width	string	No	—	Width of the cell.
align	string	No	—	alignment of cell

Additional:

Table.Col extends native td props, so attributes like colSpan and rowSpan are supported.

Overview

Getting Started

API

Add-Ins

Components

1. Install dependencies

2. Usage

Rows and columns

Inherit wrapper styles via context

Override per row or col

Using colSpan and width

Alignment, vertical alignment, and background

Props

`Table`

`Table.Row`

`Table.Col`

​1. Install dependencies

​2. Usage

​Rows and columns

​Inherit wrapper styles via context

​Override per row or col

​Using colSpan and width

​Alignment, vertical alignment, and background

​Props

​Table

​Table.Row

​Table.Col

1. Install dependencies

2. Usage

Rows and columns

Inherit wrapper styles via context

Override per row or col

Using colSpan and width

Alignment, vertical alignment, and background

Props

`Table`

`Table.Row`

`Table.Col`