FunctionField

Renders a value computed from the current record using a custom render function. Useful for composing multiple record fields or for displaying transformed data.

Installation

pnpm dlx shadcn@latest add @shadmin/function-field

Usage

import { FunctionField } from "@/components/admin";
 
<FunctionField
  source="last_name"
  render={(record) => `${record.first_name} ${record.last_name}`}
/>;

Props

Prop	Required	Type	Default	Description
`render`	Required	`(record, source?) => ReactNode`	-	Render function called with the current record
`source`	Optional	`string`	`""`	Field name (used for sortable headers)
`record`	Optional	`object`	Record from context	Explicit record
`label`	Optional	`string`	-	Label, used by layout containers
`className`	Optional	`string`	-	Additional CSS classes

Remaining props are forwarded to the wrapping <span>.

`render`

A function that receives the record (and optionally the source) and returns a ReactNode. When no record is in context, FunctionField returns null.

<FunctionField
  render={(record) => `${record.first_name} ${record.last_name}`}
/>

`source`

Optional, but recommended when the field is sortable. It is used by parents such as <DataTable.Col> to decide whether the column header is clickable.

<FunctionField
  source="last_name"
  render={(r) => `${r.first_name} ${r.last_name}`}
/>