ProDescriptions API
ProDescriptions is an enhanced descriptions component that supports data fetching, editable fields, and automatic value type rendering.
ProDescriptionsProps
Extends Ant Design Descriptions props.
columns
ProDescriptionsItemProps[]
Column configuration for description items.
Fetch data from the server.(params?: Record<string, any>) => Promise<{ data: T; success?: boolean }>
Parameters for the request. Changes trigger reload.
actionRef
React.MutableRefObject<ActionType>
Reference to control the descriptions programmatically.Methods:
reload() - Reload datastartEditable(key) - Start editing a fieldcancelEditable(key) - Cancel editing a field
Callback when loading state changes.(loading?: boolean) => void
Callback when request fails. Callback when data source changes (for editable mode). Layout
tooltip
string | LabelTooltipType
Tooltip for the title.
Extra content in the header.
column
number | Record<Breakpoint, number>
default:"3"
Number of columns.Can be responsive:column={{ xs: 1, sm: 2, md: 3 }}
layout
'horizontal' | 'vertical'
default:"horizontal"
Layout orientation.
size
'default' | 'middle' | 'small'
default:"default"
Size of the descriptions.
Whether to show colon after labels.
Editable
Configuration for editable fields.Show RowEditableConfig Properties
form?: FormInstance - Form instance for editingtype?: 'single' | 'multiple' - Edit mode (single or multiple fields)editableKeys?: Key[] - Controlled editable field keysonChange?: (editableKeys: Key[], editableRows: T) => voidonSave?: (key: Key, row: T) => Promise<void> - Save callbackonCancel?: (key: Key, row: T) => void - Cancel callbackonValuesChange?: (record: T, dataSource: T) => void - Values change callbackactionRender?: (row: T, config: ActionRenderConfig) => React.ReactNode[]
Props for the form (when editable is enabled).
emptyText
React.ReactNode
default:"-"
Text to display when value is empty.
ProDescriptionsItemProps
Configuration for individual description items.
dataIndex
string | string[]
required
Data index to read from dataSource.
title
React.ReactNode | function
Item label.Can be a function:(schema: ProSchema, type: string) => React.ReactNode
Alias for title (same as Ant Design Descriptions.Item).
tooltip
string | LabelTooltipType
Tooltip for the label.
valueType
ProFieldValueType
default:"text"
Type of the value for rendering.Show Available Value Types
text, textarea, date, dateTime, dateWeek, dateMonth, dateQuarter, dateYear, time, select, money, percent, digit, progress, rate, switch, password, avatar, image, code, jsonCode, color, option
Value enum for mapping values to display text.
Custom render for the value.(text: any, record: T, index: number, action: ActionType, schema: ProSchema) => React.ReactNode
Transform the value before rendering.(text: any, record: T, index: number, action: ActionType) => any
Custom render for the form field (in edit mode).
Props passed to the field component.
Props for the Form.Item wrapper.
Load remote data for select/cascader fields.(params?: any) => Promise<{ label: React.ReactNode; value: any }[]>
Parameters for the request.
span
number | 'filled' | object
default:"1"
Number of columns to span.Can be responsive:span={{ xs: 2, sm: 3, md: 4 }}
'filled' to fill remaining space. ellipsis
boolean | { showTitle?: boolean }
default:"false"
Whether to show ellipsis for long text.
Whether the value is copyable.
Display mode for the field.
Plain text mode (no label).
editable
boolean | function
default:"true"
Whether the field is editable.boolean | ((text: any, record: T, index: number) => boolean)
Sort order (higher values appear first).
Semantic class names.type CellSemanticClassNames = {
label?: string;
content?: string;
}
Semantic styles.type CellSemanticStyles = {
label?: React.CSSProperties;
content?: React.CSSProperties;
}
ProDescriptions.Item
Alternative JSX syntax for defining description items.
<ProDescriptions>
<ProDescriptions.Item label="Name" dataIndex="name" />
<ProDescriptions.Item label="Age" dataIndex="age" valueType="digit" />
</ProDescriptions>
Usage Examples
Basic Usage
With Request
Editable
Responsive Columns
JSX Syntax
import { ProDescriptions } from '@ant-design/pro-components';
export default () => (
<ProDescriptions
columns={[
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Email',
dataIndex: 'email',
copyable: true,
},
{
title: 'Status',
dataIndex: 'status',
valueType: 'select',
valueEnum: {
active: { text: 'Active', status: 'Success' },
inactive: { text: 'Inactive', status: 'Default' },
},
},
]}
dataSource={{
name: 'John Doe',
email: '[email protected]',
status: 'active',
}}
/>
);
<ProDescriptions
columns={[
{ title: 'ID', dataIndex: 'id' },
{ title: 'Name', dataIndex: 'name' },
{ title: 'Created', dataIndex: 'createdAt', valueType: 'dateTime' },
]}
params={{ id: userId }}
request={async (params) => {
const response = await fetch(`/api/users/${params.id}`);
const data = await response.json();
return { data, success: true };
}}
/>
import { ProDescriptions } from '@ant-design/pro-components';
import { message } from 'antd';
export default () => {
const actionRef = useRef();
return (
<ProDescriptions
actionRef={actionRef}
columns={[
{
title: 'Name',
dataIndex: 'name',
editable: true,
},
{
title: 'Email',
dataIndex: 'email',
editable: true,
},
{
title: 'Actions',
valueType: 'option',
render: () => [
<a
key="edit"
onClick={() => {
actionRef.current?.startEditable('name');
}}
>
Edit
</a>,
],
},
]}
editable={{
onSave: async (key, record) => {
await updateUser(record);
message.success('Saved successfully');
},
}}
dataSource={userData}
/>
);
};
<ProDescriptions
column={{
xs: 1,
sm: 2,
md: 3,
}}
columns={[
{ title: 'Name', dataIndex: 'name' },
{ title: 'Age', dataIndex: 'age', valueType: 'digit' },
{ title: 'Email', dataIndex: 'email' },
{ title: 'Phone', dataIndex: 'phone' },
{ title: 'Address', dataIndex: 'address', span: 2 },
]}
dataSource={data}
/>
<ProDescriptions dataSource={userData}>
<ProDescriptions.Item
label="Name"
dataIndex="name"
/>
<ProDescriptions.Item
label="Money"
dataIndex="amount"
valueType="money"
/>
<ProDescriptions.Item
label="Status"
dataIndex="status"
valueEnum={{
open: { text: 'Open', status: 'Processing' },
closed: { text: 'Closed', status: 'Success' },
}}
/>
</ProDescriptions>