Examples
Link cell
Use this when a field should open a detail route or external destination directly from the table.
Live preview
Build the React component
This component keeps link navigation and row interaction from conflicting by stopping the row click from hijacking navigation.
import { ExternalLink } from "lucide-react"
export function LinkCell({ href }: { href: string }) {
const label = new URL(href).hostname.replace(/^www\./, "")
return (
<a
className="inline-flex items-center gap-1.5 text-[12px] leading-4 text-foreground hover:underline"
href={href}
onClick={(event) => event.stopPropagation()}
rel="noreferrer"
target="_blank"
>
<span className="truncate">{label}</span>
<ExternalLink aria-hidden="true" className="size-3.5 text-muted-foreground" />
</a>
)
}Wire it into a column definition
The column still exposes the field as a normal URL string while the cell decides how to render a friendlier label.
Even with a custom cell, the column still needs an accessor. In this example that is
accessorKey="website". That gives the table a stable field for sorting, filtering, and saved state, while the cell can still read extra data from row.original.{
id: "website",
header: "Website",
accessorKey: "website",
width: 190,
enableSorting: false,
enableFiltering: false,
cell: ({ row }) => <LinkCell href={row.original.website} />,
}Render it in a small table
The table demo keeps the website column custom and leaves the rest plain so the link behavior is easy to reason about.
const columns: DatatableColumn<CustomerRow>[] = [
{ id: "name", header: "Contact", accessorKey: "name" },
{ id: "company", header: "Company", accessorKey: "company" },
{
id: "website",
header: "Website",
accessorKey: "website",
cell: ({ row }) => <LinkCell href={row.original.website} />,
},
]
<Datatable tableKey="custom-cells" data={rows} columns={columns} getRowId={(row) => row.id} toolbar={false} />Mini table demo
Loading table preferences...