DataList

Components

DataList

Code

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

import { DataList,ListItemContent } from '@sproutsocial/racine'

<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.

Recipes

Basic data list

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

import { DataList } from '@sproutsocial/racine'

<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.

import { DataList,ListItemContent } from '@sproutsocial/racine'

<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.

import { DataList,ListItemContent } from '@sproutsocial/racine'

<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: "circle-check-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.

import { DataList,ListItemContent } from '@sproutsocial/racine'

<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.

import { DataList,ListItemContent } from '@sproutsocial/racine'

<DataList
  data={[
    {
      id: 1,
      iconName: "circle-exclamation-solid",
      text: "Action Required",
      details: "This item needs your attention",
      aside: "2 days ago"
    },
    {
      id: 2,
      iconName: "circle-i-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.

import { DataList,ListItemContent,Box } from '@sproutsocial/racine'

<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.

import { DataList,ListItemContent,DataItemSkeleton,Box,Text } from '@sproutsocial/racine'

<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.

import { DataList,ListItemContent,Box } from '@sproutsocial/racine'

<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.

import { DataList } from '@sproutsocial/racine'

<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>}
/>

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

import { DataItemSkeleton,Box,Text } from '@sproutsocial/racine'

<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.

import { DataList,ListItemContent } from '@sproutsocial/racine'

<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-plus-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.

import { DataList,ListItemContent } from '@sproutsocial/racine'

<DataList
  data={[
    {
      id: 1,
      iconName: "folder-outline",
      text: "Search Result 1",
      details: "This is a matching document with relevant content...",
      aside: "Updated Nov 5"
    },
    {
      id: 2,
      iconName: "folder-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