When to use

The advanced description list component provides a more convenient and faster solution to build a description list.

ProDescriptions was born to solve the problem of writing a lot of boilerplate code of Descriptions in the project, so many common logics are encapsulated in it. Writing a Descriptions in React will inevitably need to define some similar properties. So ProDescriptions encapsulates the request network by default, and the logic shown in the columns column.

For example, ProDescriptions encapsulates the behavior of the request network, and ProDescriptions will bring the data in props.params into the request by default. If the interface happens to be the same as our definition, it will be very simple to implement a query.

import request from'umi-request';
const fetchData = (params) =>
data: T{};
}>('', {
const keyWords = "Ant Design"
<ProDescriptions<T,U> request={fetchData} />;

We agree that request has a parameter, and params will carry the params in props. The types are as follows:

(params: U) => RequestData;

There are also some conventions on the ProDescriptions of the results returned by the request, the types are as follows:

interface RequestData {
data: Datum{};
success: boolean;

Code Demo

Basic definition list

Basic usage

日期时间2022-11-25 17:02:11
2022-11-24 17:02:11
2022-11-25 17:02:11

yarn run v1.22.0
$ eslint --format=pretty ./packages
Done in 9.70s.
JSON 代码块
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "declaration": true,
    "skipLibCheck": true
  "include": [

Request data remotely

Display the definition list by requesting interface data

columns configuration

Display the definition list by requesting interface data and columns

format configuration

Format the date according to format

2022.11.24 17:02:11
2022.11.25 17:02:11
时间日期2022.11.25 17:02:SS
更新时间a month ago

dataSource configuration data

ProDescriptions supports the same dataSource as Table

dataSource and columns

Editable definition list

API is the same as ProTable



For more features, see Descriptions of antd

ParametersDescriptionTypeDefault Value
titleThe title of the description list, displayed at the topReactNode-
tooltipSupplementary description of the content, displayed after hoverstring-
ellipsisWhether to abbreviate automaticallyboolean-
copyableWhether to support copyingboolean-
loadingDisplay a loaded skeleton screen, the skeleton screen and dom will not correspond one-to-oneboolean-
extraDescribe the operation area of ​​the list, displayed on the upper rightstring | ReactNode-
borderedWhether to display the borderbooleanfalse
columnThe number of ProDescriptionsItems in a row, can be written as pixel value or support responsive object writing { xs: 8, sm: 16, md: 24}number3
sizeSet the size of the list. Can be set to middle, small, or left blank (only setting bordered={true} takes effect)default | middle | small-
layoutDescription layouthorizontal | verticalhorizontal
colonConfigure the default value of colon of ProDescriptions.Itembooleantrue
requestRequest data, when columns are not set, ProDescriptions.Item needs to set the corresponding dataIndex--
onRequestErrorHandling request errors, by default an error will be thrown directly--
columnsColumn definition, used with request columns--
editableEditable related configurationEditableConfig-

editable edit configuration

PropertyDescriptionTypeDefault Value
formThe form instance of the editable form, use Form.useForm to generate and useFormInstance-
formPropsform properties can be configured, but onFinish is not supported`FormProps'-
editableKeysRow being edited, controlled attributes. The defaultkey will use the configuration of rowKey, if there is no configuration, it will use theindex,it is recommended to use rowKeyKey[]-
onChangeTriggered when row data is modified(editableKeys: Key[], editableRows: T[]) => void-
onSaveTriggered when a row is saved(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>-
onDeleteTriggered when a row is deleted(key: Key, row: T) => Promise<any>-
onCancelTriggered when cancel editing a line(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>-
actionRenderCustom edit mode action bar(row: T, config: ActionRenderConfig<T>,defaultDom) => ReactNode[]-
deletePopconfirmMessageThe pop-up confirmation box prompt message when deletingReactNodeDelete this line?
onlyOneLineEditorAlertMessageOnly one line can be editedReactNodeOnly one line can be edited at the same time
onlyAddOneLineAlertMessageOnly one line can be added at the same timeReactNodeOnly add one line


ParametersDescriptionTypeDefault Value
labelDescription of contentReactNode-
tooltipSupplementary description of the content, displayed after hoverstring-
spannumber of columns includednumber1
valueTypeFormatted typeValueType-
valueEnumEnumeration of current column values ​​valueEnumRecord-
requestRequest enumerated data from the network()=>Promise<{[key:string|number]:any}>-
dataIndexThe key of the returned data is used in conjunction with the request of ProDescriptions for the definition list of the profileReact.Text | React.Text[]-
editableWhether it is editable in the edit table, the parameters of the function are the same as the render of the tablefalse | (text: any, record: T,index: number) => booleantrue

span is the number of Description.Item. span={2} will occupy the width of two DescriptionItem.


We need to manually trigger the update of the description list when performing an operation or tab switching. It is difficult to solve this problem with pure props, so we provide a ref to support some default operations.

const ref = useRef<ActionType>();
// refresh every two seconds
useEffect(() => {
setInterval(() => {
}, 2000);
}, []);
// hooks binding
<ProDescriptions actionRef={ref} />;
// class
<ProDescriptions actionRef={(ref) => (this.ref = ref)} />;

ActionRef also supports some other behaviors, which will reduce your coding cost in some cases, but ref will break away from the life cycle of react, so these actions are not controlled.

// refresh