Skip to main content

​
1. Install dependencies

Install the InkDes Email package locally and a few components. 
# pnpm
pnpm add @inkdes-email/components

# npm
npm install @inkdes-email/components

# yarn
yarn add @inkdes-email/components

​
2. Usage

​
Rows and columns

import { Table } from "@inkdes-email/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

NameTypeRequiredDefaultDescription
dir”ltr” | “rtl”NoComes from wrapping Html component’s dir context prop which is ltrText direction
spacingstringNoComes from wrapping Html component’s defaultSpacing context prop which is 20pxSpacing bottom, by default comes from Html defaultSpacing proppaddingstringNo"10px"Inner padding applied to cells via context.
borderbooleanNofalseEnables cell borders.
borderColorstringNo"#e5e5e5"Border color when border is enabled.
widthstringNo"100%"Width of the rendered table.
childrenReact.ReactNodeYes—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

NameTypeRequiredDefaultDescription
dir”ltr” | “rtl”No”ltr”Text direction for the content
childrenReact.ReactNodeYes—One or more Table.Col.
backgroundColorstringNo—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.
paddingstringNo—Overrides context padding for this row’s cells.
borderbooleanNo—Overrides context border for this row’s cells.
borderColorstringNo—Overrides context borderColor for this row’s cells.

​
Table.Col

NameTypeRequiredDefaultDescription
dir”ltr” | “rtl”No”ltr”Text direction for the content
childrenReact.ReactNodeYes—Content for the cell.
backgroundColorstringNo—Background color for the cell.
paddingstringNo—Padding for the cell (defaults from context if not provided).
borderbooleanNo—Whether to set a border on the cell (defaults from context if not provided).
borderColorstringNo—Color for the cell border when border is set (defaults from context if not provided).
widthstringNo—Width of the cell.
alignstringNo—alignment of cell
Additional:
  • Table.Col extends native td props, so attributes like colSpan and rowSpan are supported.
⌘I