SummaryList

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

For more information on how to use the features and props for this component, check out the developer documentation.

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.

NameTypeDefaultDescription
items*SummaryListItem[]An array of SummaryListItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config.
actionsAction[]Top level actions for the utility. If more than one action is passed a consolidated ActionMenu will be generated.
countnumberInteger representing the total count of items for a list utility dataset.
error
boolean |ErrorStateProps 
Indicate an error occurred while acquiring data for the list. The default error state may be overridden with custom props.
iconstringIdentifier for the icon within Pega icons.
loading
boolean |string 
If the utility is in a state of fetching data.
namestringName of the utility to be used as its heading along with associated actions and aria attributes.
noItemsTextstringA simple message to display when there are no items.
onViewAll(callback: Function) => voidUser click initiated callback for when to show view all modal. List lengths less than the count prop will display a "View all" button with this function is bound to.
refRef<HTMLElement>Ref for the SummaryList's root element.