ListView Component

The React ListView component renders a data-driven list with support for templates, grouping, sorting, and virtualization.

Accepts array or DataManager datasource with customizable field mappings and provides header/footer/item/group templates and events (data load, data request, scroll).
Optimized for large data via virtualization and exposes props for sorting, disabling, and query-based fetching.

Usage

To import and use the ListView component in your application, use the following code snippet:

import { ListView } from '@syncfusion/react-lists';

export default function App() {
const data = [{ id: '1', text: 'Artwork' }, { id: '2', text: 'Abstract' }, { id: '3', text: 'Modern Painting' }];
<ListView dataSource={data} fields={{ id: 'id', text: 'text' }} />;
}

import { ListView } from '@syncfusion/react-lists';

export default function App() {
const data = [{ id: '1', text: 'Artwork' }, { id: '2', text: 'Abstract' }, { id: '3', text: 'Modern Painting' }];
<ListView dataSource={data} fields={{ id: 'id', text: 'text' }} />;
}

Demos

Explore the demos of the React ListView component. Refer to this page.

Props

The following table outlines the props for the ListView component:

Name	Type	Default	Description
disabled	boolean	false	Specifies whether user interactions with the ListView (e.g., clicks, key presses) are disabled. When `true`, click and key handlers will early-return without performing any action.
fields	FieldsMapping	{ id: 'id', text: 'text', url: 'url', disabled: 'disabled', icon: 'icon', visible: 'visible', tooltip: 'tooltip', htmlAttributes: 'htmlAttributes', imageUrl: 'imageUrl', groupBy: undefined }	Maps properties from each record in `dataSource` to the internal ListView field names. Only provide mappings that differ from defaults; values are shallow-merged with `defaultMappedFields`.
footerTemplate	node	-	Specifies content to be rendered at the bottom of the list, serving as a footer.
groupTemplate	Function \| node	-	Specifies a custom template for rendering group header sections when items are categorized into groups.
headerTemplate	node	-	Specifies content to be rendered at the top of the list, serving as a header.
itemTemplate	Function \| node	-	Specifies a custom template for rendering each item in the ListView, allowing for customized appearance of list items.
query	Query	-	The `query` property is used to fetch the specific data from dataSource by using where and select keywords.
sortOrder	SortOrder	SortOrder.None	Specifies the sort order for items and for group headers when `fields.groupBy` is set. When enabled, sorting uses `fields.sortBy` if defined; otherwise falls back to `fields.text`. SortOrder.None preserves the original sequence of the dataSource.
virtualization	VirtualizationProps	-	Specifies virtualization settings to enable windowed rendering for improved performance with large lists.

Events

The following table outlines the events for the ListView component:

Name	Type	Description
onDataLoad	(event: DataLoadEvent) => void	Specifies an event that triggers after data is fetched successfully.
onDataRequest	(event: DataRequestEvent) => void	Specifies an event that triggers before data is fetched.
onScroll	(event: ScrollEvent) => void	Specifies a scroll event handler to be attached to the scrollable container. This is particularly useful when virtualization is enabled.

ListView Component

Usage

Demos

Props

Events

Enhance your React apps with Syncfusion components today