When to use
You should use the DataList component when you need to render interactive, large sets of data
where accessibility and performance (via infinite scrolling) are critical requirements. It is best
employed as a robust, foundational container for presenting items that require keyboard navigation
and flexible, customized rendering of content.
Options
Data Structure
The DataList component works with two primary data formats:
Flat List: A simple array of items. Each item must have a unique id.
Grouped List: An array of ListGroup objects. Each ListGroup object contains a unique id and a children array, which holds the list items. This format requires the renderGroup prop.
Rendering
You must provide a renderItem prop, which is a function that receives the item's data and returns a JSX element. For grouped data, you must also provide a renderGroup prop.
renderItem: This function is called for each item in the list.
renderGroup: This function is called for each group in the list.
State Management
DataList uses the useDataList hook to manage its state, which you need to pass to the component.
The hook returns activeItemId, setActiveItemId, and event handlers for focus and keyboard
navigation.
Infinite Scrolling
If you are using infinite scrolling, you must provide the following props:
fetchMore: A function that is called when the user scrolls to the end of the list.
canFetchMore: A boolean that indicates whether there is more data to fetch.
isFetchingMore: A boolean that indicates whether data is currently being fetched.