Hyper Elementsv0.3
Get started

Blocks

Table

A table of data: TableRows of TableCells. Columns take their cells' widths; the rest share what's left.

import { Table } from "@hyper-elements/react";

Example

Show the code
table.tsx
import { Column, Email, Table, TableCell, TableRow } from "@hyper-elements/react";

export default function Example() {
  return (
    <Email width={520} style={{ backgroundColor: "#ffffff", fontFamily: "Inter, Helvetica, Arial, sans-serif", color: "#0f172a", gap: 16 }}>
      <Column style={{ padding: 24, gap: 16 }}>
        <Table style={{ cellPadding: [10, 12], rowBorder: "1px solid #e2e8f0", fontSize: 14 }}>
          <TableRow header style={{ backgroundColor: "#f8fafc" }}>
            <TableCell>Output</TableCell>
            <TableCell>Root</TableCell>
            <TableCell style={{ textAlign: "right" }}>Browser needed</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Email HTML</TableCell>
            <TableCell>Email</TableCell>
            <TableCell style={{ textAlign: "right" }}>No</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>PDF</TableCell>
            <TableCell>Document</TableCell>
            <TableCell style={{ textAlign: "right" }}>No</TableCell>
          </TableRow>
        </Table>
      </Column>
    </Email>
  );
}

Reference

A table of data: TableRows of TableCells. Columns take their cells’ widths; the rest share what’s left.

Holds: TableRow. Drawn in: email, page.

style:

  • color: color (inherited)
  • fontFamily: fontFamily (inherited)
  • fontSize: a length (a number of px) (inherited)
  • fontWeight: fontWeight (inherited)
  • fontStyle: one of “normal”, “italic” (inherited)
  • lineHeight: lineHeight (inherited)
  • letterSpacing: a length (a number of px) (inherited)
  • textAlign: one of “left”, “center”, “right”, “justify” (inherited)
  • textTransform: one of “none”, “uppercase”, “lowercase”, “capitalize” (inherited)
  • width: a length (a number of px, %)
  • maxWidth: a length (a number of px, %)
  • backgroundColor: color
  • border: border
  • cellPadding: insets. Every cell’s padding, where the cell doesn’t set its own.
  • rowBorder: line
  • borderCollapse: one of “separate”, “collapse”. Whether cells side by side draw a border each (separate) or share one (collapse).
  • flex: flex. In a Row: its share of the width left after children with a width (default 1); “none” takes its own size.

mobile (on phones): fontSize, lineHeight, letterSpacing, textAlign, width, maxWidth, border.