Skip to main content

<KeyValuePairs>

Renders record fields as a labeled key-value grid using the Cloudscape KeyValuePairs component. Used by default inside <DetailHub>, and also usable inside <Cards> card layouts.

Usage​

With no children, renders all scalar fields from the resource schema.

<KeyValuePairs />

Custom fields​

Pass field components as children to control what is displayed and in what order.

<KeyValuePairs columns={2}>
  <TextField source="name" label="Full Name" />
  <DateField source="createdAt" />
  <CurrencyField source="price" currency="USD" />
</KeyValuePairs>

Using KeyValuePairs.Field​

KeyValuePairs.Field is a helper column component (analogous to Table.Column) that lets you specify a custom field component or children:

<KeyValuePairs>
  <KeyValuePairs.Field source="status" field={StatusIndicatorField} />
  <KeyValuePairs.Field source="name">
    <MyCustomField source="name" />
  </KeyValuePairs.Field>
</KeyValuePairs>

Include / Exclude​

<KeyValuePairs include={['name', 'price', 'category']} />
<KeyValuePairs exclude={['internalNotes']} />

Props​

PropTypeDefaultDescription