Recipes

Basic data list

Provide a data array and a render function to display items.

Live Editor

function BasicDataListExample() {
  return (
    <DataList
      data={[
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" }
      ]}
      renderItem={(item) => <div>{item.name}</div>}
    />
  );
}

Data list with rich content

Use ListItemContent to create structured list items with icons, text, and metadata.

Live Editor

function RichContentExample() {
  return (
    <DataList
      data={[
        {
          id: 1,
          text: "Negative Spikes – Snouts Paws & Tails",
          details: "Are there any negative sentiment spikes in Snouts Paws & Tails Brand?",
          aside: "Nov 5"
        },
        {
          id: 2,
          text: "Performance Report",
          details: "Monthly analytics are now available",
          aside: "Dec 10"
        },
        {
          id: 3,
          text: "New Feature Released",
          details: "Check out the latest updates to your dashboard",
          aside: "Dec 15"
        }
      ]}
      renderItem={(item) => (
        <ListItemContent
          text={item.text}
          details={item.details}
          aside={item.aside}
        />
      )}
    />
  );
}

Data list with icons

Add icons to list items using the ListItemContent component.

Live Editor

function IconsExample() {
  return (
    <DataList
      data={[
        {
          id: 1,
          iconName: "tag-solid",
          text: "Tagged Item",
          details: "This item has a tag icon",
          aside: "Nov 5"
        },
        {
          id: 2,
          iconName: "bell-outline",
          text: "Notification",
          details: "You have a new notification",
          aside: "Dec 10"
        },
        {
          id: 3,
          iconName: "check-circle-solid",
          text: "Completed",
          details: "This task has been completed",
          aside: "Dec 15"
        }
      ]}
      renderItem={(item) => (
        <ListItemContent
          iconName={item.iconName}
          text={item.text}
          details={item.details}
          aside={item.aside}
        />
      )}
    />
  );
}

Data list with bordered items

Use the listItemProps to apply borders to all list items.

Live Editor

function BorderedItemsExample() {
  return (
    <DataList
      data={[
        {
          id: 1,
          iconName: "tag-solid",
          text: "Bordered Item 1",
          details: "This item has a border",
          aside: "Nov 5"
        },
        {
          id: 2,
          iconName: "chart-line-solid",
          text: "Bordered Item 2",
          details: "Each item looks like a card",
          aside: "Dec 10"
        }
      ]}
      listItemProps={{ isBordered: true }}
      renderItem={(item) => (
        <ListItemContent
          iconName={item.iconName}
          text={item.text}
          details={item.details}
          aside={item.aside}
        />
      )}
    />
  );
}

Data list with actions

Add action buttons to list items.

Live Editor

function ActionsExample() {
  return (
    <DataList
      data={[
        {
          id: 1,
          iconName: "alert-circle-solid",
          text: "Action Required",
          details: "This item needs your attention",
          aside: "2 days ago"
        },
        {
          id: 2,
          iconName: "info-circle-solid",
          text: "Information",
          details: "New information available",
          aside: "Nov 3"
        }
      ]}
      renderItem={(item) => (
        <ListItemContent
          iconName={item.iconName}
          text={item.text}
          details={item.details}
          aside={item.aside}
          actions={
            <Button appearance="unstyled" aria-label="View details">
              <Icon name="arrow-right-outline" size="small" aria-hidden="true" />
            </Button>
          }
        />
      )}
    />
  );
}

Loading state

Use the isLoading prop to display skeleton loaders while data is being fetched.

Live Editor

function LoadingStateExample() {
  return (
    <Box>
      <DataList
        data={[]}
        isLoading={true}
        renderItem={(item) => (
          <ListItemContent text={item.text} />
        )}
      />
    </Box>
  );
}

Loading state with custom skeleton

Customize the loading skeleton to match your content structure using the LoadingComponent prop.

Live Editor

function CustomSkeletonExample() {
  return (
    <Box>
      <DataList
        data={[]}
        isLoading={true}
        LoadingComponent={(props) => (
          <DataItemSkeleton hasIcon hasAside hasSubtext />
        )}
        renderItem={(item) => (
          <ListItemContent
            iconName={item.iconName}
            text={item.text}
            details={item.details}
            aside={item.aside}
          />
        )}
      />
    </Box>
  );
}

Data list with header

Add a sticky header that stays visible while scrolling using the Header prop.

Live Editor

function HeaderExample() {
  return (
    <Box maxHeight="300px" overflow="auto">
      <DataList
        data={[
          { id: 1, text: "Item 1", aside: "Nov 5" },
          { id: 2, text: "Item 2", aside: "Nov 6" },
          { id: 3, text: "Item 3", aside: "Nov 7" },
          { id: 4, text: "Item 4", aside: "Nov 8" },
          { id: 5, text: "Item 5", aside: "Nov 9" },
          { id: 6, text: "Item 6", aside: "Nov 10" },
          { id: 7, text: "Item 7", aside: "Nov 11" }
        ]}
        Header={
          <Box
            backgroundColor="container.background.base"
            border="500"
            borderColor="container.border.base"
            p={300}
          >
            List Header
          </Box>
        }
        renderItem={(item) => (
          <ListItemContent text={item.text} aside={item.aside} />
        )}
      />
    </Box>
  );
}

Ordered data list

Use the as prop to render an ordered list.

Live Editor

function OrderedListExample() {
  return (
    <DataList
      as="ol"
      data={[
        { id: 1, text: "First step" },
        { id: 2, text: "Second step" },
        { id: 3, text: "Third step" }
      ]}
      renderItem={(item) => <div>{item.text}</div>}
    />
  );
}