React ListView

The React ListView component displays data in an interactive hierarchical interface across different layouts or views and includes features such as data binding, template rendering, and grouping.

Getting started

To create a new Vite project, refer to the Vite documentation. Once the Vite project is ready and running with the default settings, the React ListView component can be added to the project

Installing Syncfusion® packages

To use the React ListView component in this project, the @syncfusion/react-lists package needs to be installed using the following command:

npm install @syncfusion/react-lists

Adding CSS reference

In this article, the Material theme is applied using CSS styles that are available in the installed packages. The necessary Material CSS styles for the ListView component and its dependents were imported into the src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material3.css';
@import '../node_modules/@syncfusion/react-lists/styles/material3.css';

Adding ListView component

To include the ListView component in your application, import the ListView from the @syncfusion/react-lists package in App.tsx.

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

Add the ListView component to the application as shown in the code example below.

import { ListView } from '@syncfusion/react-lists';
    
export default function App() {
  const listDatas: { [key: string]: string }[] = [
    { id: '1', text: 'Artwork' }, 
    { id: '2', text: 'Abstract' }, 
    { id: '3', text: 'Modern Painting' }, 
    { id: '4', text: 'Ceramics' }, 
    { id: '5', text: 'Animation Art' }, 
    { id: '6', text: 'Oil Painting' }
  ];

  return (
    <div className="component-section">
      <ListView dataSource={listDatas} fields={{ id: 'id', text: 'text' }}></ListView>
    </div>
  );
}

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates a basic ListView with a simple integration by passing a small local array directly to the dataSource property and rendering labels with the default template, using keys and simple objects for faster client‑side rendering.

Remote data binding

The ListView component binds to remote REST or OData endpoints through the DataManager for paging, filtering, and sorting. The dataSource property establishes the external connection, the query property customizes server retrieval, and server‑side paging is recommended for very large datasets.

Checklist

The ListView component supports rendering checkbox-enabled list items through the itemTemplate property, using compact, aligned templates that pair a checkbox component with the item label for selection or bulk actions.

Sorted List

The ListView component supports sorting using the sortOrder property, allowing ascending or descending ordering of items for both local and remote data sources.

Multi-action List

The ListView component supports multi action controls through the itemTemplate property, exposing action buttons (play/pause toggle and a more-actions dropdown) that maintain independent state so toggling one item doesn't affect others.

Search List

The ListView component supports custom filtering by placing a TextBox in the ListView's headerTemplate and updating the component's dataSource from the TextBox onChange handler for instant filtering.

Customization

The React ListView component allows customization of list items, group titles, header titles, and the footer through various template options.

Item

The ListView component supports item templating to customize list items using the itemTemplate property, providing full control over item markup such as icons, badges, and inputs.

Grouped List

The ListView component enables customization of group headers and grouping UI through the groupTemplate property.

Header and Footer

The ListView component enables custom headers and footers using the headerTemplate and footerTemplate properties to display additional information, insights, links, or actions around the list, with headerTemplate for titles, filters, or summary content at the top and footerTemplate for persistent actions (Add, Load more) or metadata at the bottom.

Virtualization

Virtualization keeps the ListView fast with very large datasets by creating DOM nodes only for visible items; demos show common patterns for local and remote data and how to tune rendering and fetch behavior.

• itemSize: Fixed row height in pixels — set to the actual rendered height so scroll math is accurate.
• pageSize: Items per fetch/render batch — larger values mean fewer requests but higher memory/initial cost.
• overscanCount: Extra items rendered above/below the viewport to prevent gaps during fast scrolling and improve smoothness.
• showSkeleton: When true, render lightweight placeholder rows while remote data is loading to improve perceived performance.

The ListView component virtualize local data by rendering only visible items for smooth, instant scrolling. The demo provides clear examples that demonstrate local virtualization through the Virtualization preview.

Remote data

The ListView component virtualize remote data when loading from a server to improve performance, combining DataManager server-side paging with virtualization to handle very large datasets.

Configure the DataManager with the remote URL and adapter; this configuration handles requests and paging for the ListView.

Custom scrolling

The ListView component supports custom data fetching by retrieving arrays through fetch() or Axios and assigning the returned array to the dataSource property.

Accessibility

The React ListView component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the ListView component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The ListView component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the ListView component:

ListView

Keyboard interaction

The ListView component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the ListView component.