Skip to main content

DataList

DataList is a data-driven list component that renders collections of items with built-in loading states, skeleton screens, and optional sticky headers.

Live Editor
function DataListExample() {
  return (
    <DataList
      data={[
        { id: 1, text: "First item", aside: "Nov 5" },
        { id: 2, text: "Second item", aside: "Nov 6" },
        { id: 3, text: "Third item", aside: "Nov 7" }
      ]}
      renderItem={(item) => (
        <ListItemContent
          text={item.text}
          aside={item.aside}
        />
      )}
    />
  );
}

Properties​

Overview​

DataList is a powerful component for rendering lists from data arrays. It extends the List component with additional features including loading states with skeleton screens, a render prop pattern for items, and support for sticky headers. DataList is ideal for displaying dynamic content like notifications, activity feeds, or search results.

DataItemSkeleton​

DataItemSkeleton is the default loading component used by DataList. It can be customized to match your content structure.

Key Props:

  • hasIcon: Shows a circular skeleton for an icon
  • hasAside: Shows a skeleton for aside content (like dates)
  • hasSubtext: Shows a second line skeleton for details/subtext
Live Editor
function DataItemSkeletonExample() {
  return (
    <Box>
      Basic Skeleton:
      <DataItemSkeleton />

      With Icon and Aside:
      <DataItemSkeleton hasIcon hasAside />

      With All Features:
      <DataItemSkeleton hasIcon hasAside hasSubtext />
    </Box>
  );
}

Common Patterns​

Notification List​

DataList is perfect for displaying notifications or activity feeds.

Live Editor
function NotificationListExample() {
  return (
    <DataList
      data={[
        {
          id: 1,
          iconName: "bell-solid",
          text: "New comment on your post",
          details: "John Doe commented: 'Great work!'",
          aside: "5 min ago"
        },
        {
          id: 2,
          iconName: "heart-solid",
          text: "Someone liked your photo",
          details: "Jane Smith liked your recent upload",
          aside: "1 hour ago"
        },
        {
          id: 3,
          iconName: "user-add-solid",
          text: "New follower",
          details: "Alex Johnson started following you",
          aside: "3 hours ago"
        }
      ]}
      listItemProps={{ isBordered: true }}
      renderItem={(item) => (
        <ListItemContent
          iconName={item.iconName}
          text={item.text}
          details={item.details}
          aside={item.aside}
        />
      )}
    />
  );
}

Search Results​

Display search results with DataList and show loading state while searching.

Live Editor
function SearchResultsExample() {
  return (
    <DataList
      data={[
        {
          id: 1,
          iconName: "document-solid",
          text: "Search Result 1",
          details: "This is a matching document with relevant content...",
          aside: "Updated Nov 5"
        },
        {
          id: 2,
          iconName: "document-outline",
          text: "Search Result 2",
          details: "Another relevant document that matches your query...",
          aside: "Updated Dec 10"
        }
      ]}
      renderItem={(item) => (
        <ListItemContent
          iconName={item.iconName}
          text={item.text}
          details={item.details}
          aside={item.aside}
        />
      )}
    />
  );
}

Accessibility​

  • DataList uses semantic HTML (ul or ol elements) for proper screen reader support
  • Loading states are visually communicated through skeleton screens
  • Ensure your renderItem function produces accessible content
  • When using icons in ListItemContent, provide iconLabel if the icon is not decorative
  • Action buttons should include proper aria-label attributes

Best Practices​

  • Use the isLoading prop to show skeleton screens during data fetching for better perceived performance
  • Customize the LoadingComponent to match your content structure (icons, aside text, details)
  • Use listItemProps to apply consistent styling to all list items
  • Keep the renderItem function pure and avoid side effects
  • For ordered lists (steps, rankings), use as="ol" for semantic correctness
  • Consider using the Header prop for lists with filtering or sorting controls