Universal field rendering system supporting 25+ value types with consistent display and editing behavior across all Pro components. The field system provides automatic rendering based on value types with extensive customization options.
Core field component that renders different types of data with automatic formatting and editing capabilities.
/**
* Universal field renderer for various data types
* @param props - ProField configuration props
* @returns JSX.Element
*/
function ProField<T = any>(props: ProFieldProps<T>): JSX.Element;
interface ProFieldProps<T = any> {
/** Field value */
text: T;
/** Field value type for automatic rendering */
valueType?: ProFieldValueType | ProFieldValueTypeFunction<T>;
/** Field display mode */
mode?: ProFieldFCMode;
/** Plain text mode */
plain?: boolean;
/** Custom render function for read mode */
render?: (text: T, props: ProFieldProps<T>, dom: JSX.Element) => React.ReactNode;
/** Custom render function for edit mode */
renderFormItem?: (text: T, props: ProFieldProps<T>, dom: JSX.Element) => React.ReactNode;
/** Value enumeration for select-type fields */
valueEnum?: ProSchemaValueEnumType;
/** Request function for remote data */
request?: ProFieldRequestData<T>;
/** Field properties for underlying components */
fieldProps?: any;
/** Empty text placeholder */
emptyText?: ProFieldEmptyText;
/** Prefix for the field */
prefix?: React.ReactNode;
/** Suffix for the field */
suffix?: React.ReactNode;
/** Light mode properties */
lightProps?: ProFieldLightProps;
/** Readonly state */
readonly?: boolean;
/** Disabled state */
disabled?: boolean;
/** Placeholder text */
placeholder?: string | string[];
/** Field label */
label?: React.ReactNode;
/** ProFormItem properties */
proFieldProps?: any;
}
type ProFieldValueType =
| 'text' | 'textarea' | 'password' | 'money' | 'percent' | 'digit'
| 'digitRange' | 'date' | 'dateTime' | 'dateRange' | 'dateTimeRange'
| 'dateWeek' | 'dateMonth' | 'dateQuarter' | 'dateYear'
| 'time' | 'timeRange' | 'select' | 'checkbox' | 'radio' | 'radioButton'
| 'switch' | 'slider' | 'rate' | 'progress' | 'color' | 'image'
| 'avatar' | 'code' | 'jsonCode' | 'cascader' | 'treeSelect'
| 'fromNow' | 'index' | 'indexBorder' | 'option' | 'second' | 'segmented';
type ProFieldFCMode = 'read' | 'edit';
type ProFieldValueTypeFunction<T> = (record: T) => ProFieldValueType;
interface ProFieldRequestData<T> {
/** Request function */
(): Promise<{ label: React.ReactNode; value: any; [key: string]: any }[]>;
}
type ProFieldEmptyText = React.ReactNode | false;
interface ProFieldLightProps {
/** Light mode label */
label?: React.ReactNode;
/** Light mode type */
type?: 'tag' | 'text';
/** Footer render */
footerRender?: () => React.ReactNode;
}
interface ProSchemaValueEnumType {
[key: string]: {
/** Display text */
text: React.ReactNode;
/** Status for badge rendering */
status?: 'Success' | 'Error' | 'Processing' | 'Warning' | 'Default';
/** Custom color */
color?: string;
/** Disabled state */
disabled?: boolean;
} | React.ReactNode;
}Usage Examples:
import { ProField } from "@ant-design/pro-components";
// Basic text field
const TextField = () => (
<ProField
text="Hello World"
valueType="text"
mode="read"
/>
);
// Money field with formatting
const MoneyField = () => (
<ProField
text={1234.56}
valueType="money"
mode="read"
fieldProps={{
locale: 'en-US',
currency: 'USD',
}}
/>
);
// Select field with value enum
const StatusField = () => (
<ProField
text="active"
valueType="select"
mode="read"
valueEnum={{
active: { text: 'Active', status: 'Success' },
inactive: { text: 'Inactive', status: 'Error' },
pending: { text: 'Pending', status: 'Processing' },
}}
/>
);
// Editable field
const EditableField = () => {
const [mode, setMode] = useState<'read' | 'edit'>('read');
const [value, setValue] = useState('Initial Value');
return (
<ProField
text={value}
valueType="text"
mode={mode}
fieldProps={{
onChange: (e) => setValue(e.target.value),
}}
render={(text, props, dom) => (
<div onClick={() => setMode('edit')}>
{dom}
</div>
)}
/>
);
};Text-based field rendering components.
/**
* Text field renderer
* @param props - FieldText configuration props
* @returns JSX.Element
*/
function FieldText(props: FieldTextProps): JSX.Element;
interface FieldTextProps extends ProFieldFC {
/** Text value */
text: string;
/** Field mode */
mode: ProFieldFCMode;
/** Copyable configuration */
copyable?: boolean;
/** Ellipsis configuration */
ellipsis?: boolean | { showTitle?: boolean; tooltip?: boolean };
}Numeric value rendering with formatting options.
/**
* Money/currency field renderer with localization
* @param props - FieldMoney configuration props
* @returns JSX.Element
*/
function FieldMoney(props: FieldMoneyProps): JSX.Element;
/**
* Percentage field renderer
* @param props - FieldPercent configuration props
* @returns JSX.Element
*/
function FieldPercent(props: FieldPercentProps): JSX.Element;
/**
* Progress bar field renderer
* @param props - FieldProgress configuration props
* @returns JSX.Element
*/
function FieldProgress(props: FieldProgressProps): JSX.Element;
interface FieldMoneyProps extends ProFieldFC {
/** Money value */
text: number;
/** Currency locale */
locale?: string;
/** Currency symbol */
customSymbol?: string;
/** Number of decimal places */
precision?: number;
/** Show currency symbol */
showSymbol?: boolean;
/** Currency */
currency?: string;
}
interface FieldPercentProps extends ProFieldFC {
/** Percentage value */
text: number;
/** Show plus sign for positive values */
showSign?: boolean;
/** Decimal precision */
precision?: number;
/** Show color for positive/negative values */
showColor?: boolean;
}
interface FieldProgressProps extends ProFieldFC {
/** Progress value (0-100) */
text: number;
/** Progress type */
type?: 'line' | 'circle' | 'dashboard';
/** Progress status */
status?: 'normal' | 'exception' | 'active' | 'success';
/** Show progress info */
showInfo?: boolean;
}Date and time rendering components with various picker types.
/**
* Date picker field renderer
* @param props - FieldDatePicker configuration props
* @returns JSX.Element
*/
function FieldDatePicker(props: FieldDatePickerProps): JSX.Element;
/**
* Date range picker field renderer
* @param props - FieldRangePicker configuration props
* @returns JSX.Element
*/
function FieldRangePicker(props: FieldRangePickerProps): JSX.Element;
/**
* Time picker field renderer
* @param props - FieldTimePicker configuration props
* @returns JSX.Element
*/
function FieldTimePicker(props: FieldTimePickerProps): JSX.Element;
interface FieldDatePickerProps extends ProFieldFC {
/** Date value */
text: string | number | Date;
/** Date format */
format?: string;
/** Border style */
bordered?: boolean;
/** Picker type */
picker?: 'date' | 'week' | 'month' | 'quarter' | 'year';
}
interface FieldRangePickerProps extends ProFieldFC {
/** Date range value */
text: [string | number | Date, string | number | Date];
/** Date format */
format?: string;
/** Separator between dates */
separator?: string;
/** Border style */
bordered?: boolean;
}
interface FieldTimePickerProps extends ProFieldFC {
/** Time value */
text: string | Date;
/** Time format */
format?: string;
/** Border style */
bordered?: boolean;
}Selection and choice-based field components.
/**
* Select dropdown field renderer
* @param props - FieldSelect configuration props
* @returns JSX.Element
*/
function FieldSelect(props: FieldSelectProps): JSX.Element;
/**
* Status badge field renderer
* @param props - FieldStatus configuration props
* @returns JSX.Element
*/
function FieldStatus(props: FieldStatusProps): JSX.Element;
interface FieldSelectProps extends ProFieldFC {
/** Selected value(s) */
text: any;
/** Value enumeration */
valueEnum?: ProSchemaValueEnumType;
/** Select mode */
mode?: 'multiple' | 'tags';
/** Show search */
showSearch?: boolean;
/** Option filter function */
filterOption?: boolean | ((input: string, option: any) => boolean);
}
interface FieldStatusProps extends ProFieldFC {
/** Status value */
text: string | number;
/** Status type */
type?: 'badge' | 'color' | 'text';
/** Value enumeration for status mapping */
valueEnum?: ProSchemaValueEnumType;
}Code display and media rendering components.
/**
* Code display/editing field renderer
* @param props - FieldCode configuration props
* @returns JSX.Element
*/
function FieldCode(props: FieldCodeProps): JSX.Element;
interface FieldCodeProps extends ProFieldFC {
/** Code content */
text: string;
/** Programming language */
language?: string;
/** Show line numbers */
showLineNumbers?: boolean;
/** Theme */
theme?: 'light' | 'dark';
/** Word wrap */
wordWrap?: boolean;
/** Tab size */
tabSize?: number;
}Specialized fields for table usage.
/**
* Table index column renderer
* @param props - FieldIndexColumn configuration props
* @returns JSX.Element
*/
function FieldIndexColumn(props: FieldIndexColumnProps): JSX.Element;
interface FieldIndexColumnProps extends ProFieldFC {
/** Current index */
text: number;
/** Border style */
border?: boolean;
}Utility functions for field processing and rendering.
/**
* Core text rendering function for value types
* @param text - Text value to render
* @param valueType - Value type for formatting
* @param index - Index for table scenarios
* @param record - Record data for context
* @returns Rendered React node
*/
function defaultRenderText<T>(
text: any,
valueType: ProFieldValueType | ProFieldValueTypeFunction<T>,
index?: number,
record?: T
): React.ReactNode;
/**
* Parse value enums to array format
* @param valueEnumParams - Value enum configuration
* @returns Array of value enum options
*/
function proFieldParsingValueEnumToArray(
valueEnumParams?: ProSchemaValueEnumType
): { value: string | number; label: React.ReactNode; disabled?: boolean }[];Base interface for field components.
/**
* Base field component interface
*/
interface ProFieldFC<T = any> {
/** Field text/value */
text: T;
/** Field display mode */
mode: ProFieldFCMode;
/** Plain text rendering */
plain?: boolean;
/** Light mode properties */
light?: ProFieldLightProps;
/** Label for the field */
label?: React.ReactNode;
/** Field properties */
fieldProps?: any;
/** Field properties type */
proFieldProps?: ProFieldPropsType;
}
interface ProFieldPropsType {
/** Light mode configuration */
light?: ProFieldLightProps;
/** Empty text configuration */
emptyText?: ProFieldEmptyText;
/** Mode */
mode?: ProFieldFCMode;
/** Readonly */
readonly?: boolean;
/** Disabled */
disabled?: boolean;
/** Placeholder */
placeholder?: string | string[];
}Properties for field rendering functions.
interface ProFieldFCRenderProps {
/** Display mode */
mode: ProFieldFCMode;
/** Placeholder text */
placeholder?: string | string[];
/** Value */
value?: any;
/** Change handler */
onChange?: (...args: any[]) => void;
}
interface ProRenderFieldPropsType {
/** Render function */
render?: (
text: any,
props: ProFieldFCRenderProps,
dom: JSX.Element
) => React.ReactNode;
/** Render form item function */
renderFormItem?: (
text: any,
props: ProFieldFCRenderProps,
dom: JSX.Element
) => React.ReactNode;
/** Value type */
valueType?: string;
}
// Base field component type
type BaseProFieldFC = React.FC<ProFieldFC>;Extended money field properties for currency handling.
interface ProFieldMoneyProps extends ProFieldFC {
/** Currency locale (e.g., 'en-US', 'zh-CN') */
locale?: string;
/** Custom currency symbol */
customSymbol?: string;
/** Currency code (e.g., 'USD', 'EUR') */
currency?: string;
/** Minimum fraction digits */
minimumFractionDigits?: number;
/** Maximum fraction digits */
maximumFractionDigits?: number;
/** Show currency symbol */
showSymbol?: boolean | 'always' | 'never' | 'exceptZero';
/** Separator for thousands */
thousandsSeparator?: string;
/** Decimal separator */
decimalSeparator?: string;
/** Number formatting style */
numberStyle?: 'decimal' | 'currency' | 'percent';
}The field system uses value types to determine how to render and format data:
// Supported value types with descriptions
type ValueTypeDescriptions = {
text: 'Plain text display';
textarea: 'Multi-line text area';
password: 'Password input with masking';
money: 'Currency formatting with locale support';
percent: 'Percentage display with % symbol';
digit: 'Numeric input with validation';
digitRange: 'Numeric range with min/max inputs';
date: 'Date picker and display';
dateTime: 'Date and time picker';
dateRange: 'Date range picker';
dateTimeRange: 'Date and time range picker';
dateWeek: 'Week picker';
dateMonth: 'Month picker';
dateQuarter: 'Quarter picker';
dateYear: 'Year picker';
time: 'Time picker';
timeRange: 'Time range picker';
select: 'Dropdown selection';
checkbox: 'Checkbox input';
radio: 'Radio button selection';
radioButton: 'Radio button group';
switch: 'Toggle switch';
slider: 'Range slider input';
rate: 'Star rating input';
progress: 'Progress bar display';
color: 'Color picker';
image: 'Image display with preview';
avatar: 'Avatar image display';
code: 'Code syntax highlighting';
jsonCode: 'JSON code with formatting';
cascader: 'Cascading selection';
treeSelect: 'Tree structure selection';
fromNow: 'Relative time display (e.g., "2 hours ago")';
index: 'Table row index';
indexBorder: 'Table row index with border';
option: 'Action buttons for table rows';
second: 'Second-based time display';
segmented: 'Segmented control selection';
};Fields can operate in different modes:
// Field mode descriptions
interface ProFieldFCModeConfig {
read: {
description: 'Display mode for showing formatted values';
behavior: 'Non-interactive, formatted display';
useCases: ['Table cells', 'Description items', 'Display forms'];
};
edit: {
description: 'Edit mode for input and modification';
behavior: 'Interactive form controls';
useCases: ['Form fields', 'Inline editing', 'Modal forms'];
};
}// Common patterns for field usage
interface CommonFieldPatterns {
/** Read-only display in tables */
tableDisplay: {
mode: 'read';
plain: false;
emptyText: '--';
};
/** Inline editing in tables */
tableEdit: {
mode: 'edit';
fieldProps: { size: 'small' };
};
/** Form field usage */
formField: {
mode: 'edit';
placeholder: 'Please enter...';
};
/** Light mode for filters */
lightFilter: {
mode: 'edit';
light: { type: 'tag' };
};
}