Skip to main content

<Cards>

A card grid that renders records from a ListContext. An alternative to <Table> for list views — each record is displayed as a Cloudscape card with key-value pairs derived from the resource schema.

Usage​

Use <Cards> inside <List> instead of the default <Table>.

<List>
  <Cards />
</List>

Custom fields​

Pass field components as children to control which fields appear on each card.

<List>
  <Cards>
    <TextField source="name" />
    <CurrencyField source="price" currency="USD" />
    <BadgeField source="status" />
  </Cards>
</List>

Include / Exclude​

<Cards include={['name', 'price']} />

Custom card rendering​

Use renderItem to fully control each card's content.

<Cards
  renderItem={(record) => (
    <div>
      <strong>{record.name}</strong>
      <p>{record.description}</p>
    </div>
  )}
/>

Set as default list component​

To use <Cards> as the default for a resource, set listComponent on the ResourceSchema:

<ResourceSchema name="products" listComponent={Cards}>
  ...
</ResourceSchema>

Props​

PropTypeDefaultDescription