SummaryList

Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.

The SummaryList component displays a series of SummaryItems in list Form with some additional list management elements.

The SummaryList component requires a list of items that are SummaryItem prop objects. There are additional props for name, icon, count, and actions that will render decorative and functional elements to the header of the list.

This component will render an indeterminate Progress animation if loading is passed, replacing any other content besides the elements within the heading. The same is true for the error prop which, if true, will render an ErrorState instead of the list content. If you would like to modify the defaults of the ErrorState component, you can do so by passing an object of ErrorState props to error rather than a boolean.

If the array passed to items is empty, an EmptyState component will render instead of the list. If you would like to customize the message displayed, provide your message via the noItemsText prop.

If the SummaryList component is passed a function for the onViewAll callback, a View all Button will render at the bottom of the list. This is handy for delaying API requests to retrieve entire lists of data until an explicit request is made. It is recommended to use the view all component in these situations. This component accepts the same list as the SummaryList, and similarly can take actions and loading as well as props related to the SearchInput component.

In the following demo, the SummaryList will open a Modal containing the view all component when the onViewAll callback is triggered.

• Button

• Card

• EmptyState

• ErrorState

• MenuButton

• Progress

• SearchInput

• SummaryItem