Show · Description


How to import

Basic Usage

Data can be passed in as an array of key-value pairs { key: value } through Both key and value support the ReactNode type. You can pass in a string or a higher degree of freedom ReactNode to freely customize the render dom.


You can use align to set alignment of key-value. Supporting values including: center(default), justify, left, and plain. When row is true, this configuration is invalid

Row Display

Set row to display the data to two-row, supporting three sizes: small, medium(default), and large.

Descriptions Using JSX

Version: >= 1.17.0

Set layout mode

The layout mode can be set through layout, which supports horizontal and vertical (support after v2.54.0) . Default is vertical.
When horizontal is set, column can be used to specify the maximum number of columns per row.

API Reference


alignAlignment of the key-value data, one of center, left, plainstringcenter
dataData to displayDataItem[]-
rowToggle whether to display data in double-rowbooleanfalse
sizeSize of the list for double-row display, one of small, medium, largestringmedium
styleInline styleCSSProperties-
layoutList layout mode v>=2.54.0stringvertical
columnTotal number of columns in landscape layout v>=2.54.0number3


keyKey valueReactNode-
valueData valueReactNode | (() => ReactNode)-
hiddenToggle whether the data should be displayed v>=1.12.0boolean-
spanThe number of columns the cell should span v>=2.54.0number1


itemKeyKey valueReactNode-
hiddenToggle whether the data should be displayedboolean-
classNameItem external wrapper: class name of tr DOM elementstring-
styleItem external wrapper: inline style of tr DOM elementCSSProperties-
spanThe number of columns the cell should span v>=2.54.0number1

Content Guidelines

  • Field names and values ​​are written in upper and lower case according to the Sentence case principle

Design Tokens