Email

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

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

Live previews only work with the latest documentation.

import {
  useDataGrid,
  DataGrid,
  GridColumns,
  List,
  EmailField,
} from '@pankod/refine-mui'

const columns: GridColumns = [
  { field: 'id', headerName: 'ID', type: 'number' },
  { field: 'firstName', headerName: 'First Name', minWidth: 80 },
  { field: 'lastName', headerName: 'Last Name', minWidth: 80 },
  {
    field: 'email',
    headerName: 'Email Address',
    renderCell: function render({ row }) {
      return <EmailField value={row.email} />
    },
    minWidth: 100,
    flex: 1,
  },
]

const UsersList: React.FC = () => {
  const { dataGridProps } = useDataGrid<IUser>()

  return (
    <List>
      <DataGrid {...dataGridProps} columns={columns} autoHeight />
    </List>
  )
}

interface IUSer {
  id: number
  firstName: string
  lastName: string
  email: string
}

tip

<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

Properties

External Props

It also accepts all props of Material UI Link.