Skip to main content
Version: 4.xx.xx
Swizzle Ready

Email

This field is used to display email values. It uses the <Link> component of <Typography> from Ant Design.

Good to know:

You can swizzle this component to customize it with the Refine CLI

Usage

Let's see how we can use <EmailField> with the example in the user list:

localhost:3000
import {
List,
useTable,
EmailField,
} from "@refinedev/antd";
import { Table } from "antd";

const UserList: React.FC = () => {
const { tableProps } = useTable<IPost>();

return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column
dataIndex="email"
title="Email"
render={(value: string) => <EmailField value={value} />}
width="100%"
/>
...
</Table>
</List>
);
};

interface IPost {
id: number;
email: string;
}
Implementation Tips:

<EmailField> uses "mailto:" in the href prop of the <Link> component. For this reason, clicking <EmailField> opens your device's default mail application.

API Reference

PropertyTypeDescription
value

ReactNode

The value of the field.

External Props:

This field also accepts all props of Ant Design's Link component.

For more information, refer to the documentation for the rest of Link properties