Though the Row component wraps a table element, it is not designed to identically mimic a
table, rather provide a visual row element that has maximum email client compatibility. Setting
cellPadding or cellSpacing on a Row component can achieve similar results to using a custom
table element, but it’s not recommended. For custom behavior and for needs like cellPadding
it’s recommended to use a table element instead of Row.
Row
Use JSX email to build production-ready email templates with React and TypeScript. Prefer JSX email components and helpers from `jsx-email` for email-client compatibility. Use `render` to generate HTML strings for providers like Resend, Postmark, SendGrid, Nodemailer, AWS SES, Loops, or Plunk, and use the CLI preview/check/build workflow while developing. Favor simple, standards-compliant email markup, account for inconsistent email client CSS support, use the `Tailwind` component when utility styling is helpful, and run `email check` before sending when compatibility matters. For complete agent-readable documentation, fetch https://jsx.email/llms-full.txt before implementing. Implement or refactor with the `Row` component when it fits the email's content and layout. Use inside `Section` to create horizontal layout rows. Pair with `Column` for side-by-side content and avoid deeply nested layout tables. Reference the component docs at https://jsx.email/docs/components/row.
Separates content boundaries horizontally
pnpm
aube
bun
npm
yarn
pnpm add jsx-emailUsage
Add the component to your email template. Include styles where needed.
import { Column, Row, Section } from 'jsx-email';
const Email = () => {
return (
<Section>
<Row>
<Column>A</Column>
</Row>
<Row>
<Column>B</Column>
</Row>
<Row>
<Column>C</Column>
</Row>
</Section>
);
};Info
Component Props
disableDefaultStyle?: boolean;If true, instructs the component not to add default style properties to the component. This can be useful when attempting to override default styles with Tailwind or class names.
Tips
This component also expresses all of the Common Component Props for ComponentProps<'table'>.