Email

This field is used to display email values. It uses the <Anchor> component of Mantine.

Swizzle

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.

http://localhost:3000/users

import { List, EmailField } from "@refinedev/mantine";
import { Table, Pagination } from "@mantine/core";
import { useTable } from "@refinedev/react-table";
import { ColumnDef, flexRender } from "@tanstack/react-table";

const UserList: React.FC = () => {
    const columns = React.useMemo<ColumnDef<IUser>[]>(
        () => [
            {
                id: "id",
                header: "ID",
                accessorKey: "id",
            },
            {
                id: "firstName",
                header: "First Name",
                accessorKey: "firstName",
            },
            {
                id: "lastName",
                header: "Last Name",
                accessorKey: "lastName",
            },
            {
                id: "email",
                header: "Email",
                accessorKey: "email",
                cell: function render({ getValue }) {
                    return (
                        <EmailField value={getValue()} />
                    );
                },
            },
        ],
        [],
    );

    const {
        getHeaderGroups,
        getRowModel,
        refineCore: { setCurrent, pageCount, current },
    } = useTable({
        columns,
    });

    return (
        <List>
            <Table>
                <thead>
                    {getHeaderGroups().map((headerGroup) => (
                        <tr key={headerGroup.id}>
                            {headerGroup.headers.map((header) => (
                                <th key={header.id}>
                                    {header.isPlaceholder
                                        ? null
                                        : flexRender(
                                              header.column.columnDef.header,
                                              header.getContext(),
                                          )}
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody>
                    {getRowModel().rows.map((row) => (
                        <tr key={row.id}>
                            {row.getVisibleCells().map((cell) => (
                                <td key={cell.id}>
                                    {flexRender(
                                        cell.column.columnDef.cell,
                                        cell.getContext(),
                                    )}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </Table>
            <br />
            <Pagination
                position="right"
                total={pageCount}
                page={current}
                onChange={setCurrent}
            />
        </List>
    );
};

interface IUser {
    id: number;
    firstName: string;
    lastName: string;
    email: string;
}

tip

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

API Reference

Properties

Refer to the documentation for the rest of Anchor properties. →