@syncfusion/ej2-lists

What is @syncfusion/ej2-lists?

@syncfusion/ej2-lists is a comprehensive package for creating and managing various types of lists in web applications. It provides a range of features for building interactive and customizable list views, including support for nested lists, checklists, and virtual scrolling.

What are @syncfusion/ej2-lists's main functionalities?

Basic ListView

This code demonstrates how to create a basic ListView with a header and a few items.

const listView = new ej.lists.ListView({
  dataSource: ['Item 1', 'Item 2', 'Item 3'],
  headerTitle: 'Basic List',
  showHeader: true
});
listView.appendTo('#listView');

Nested ListView

This code demonstrates how to create a nested ListView, where each item can have its own sub-items.

const nestedList = [
  { text: 'Item 1', id: '1', child: [{ text: 'Sub Item 1.1', id: '1.1' }, { text: 'Sub Item 1.2', id: '1.2' }] },
  { text: 'Item 2', id: '2', child: [{ text: 'Sub Item 2.1', id: '2.1' }, { text: 'Sub Item 2.2', id: '2.2' }] }
];
const listView = new ej.lists.ListView({
  dataSource: nestedList,
  fields: { id: 'id', text: 'text', child: 'child' },
  headerTitle: 'Nested List',
  showHeader: true
});
listView.appendTo('#nestedListView');

Checklist

This code demonstrates how to create a checklist where each item has a checkbox.

const checklist = new ej.lists.ListView({
  dataSource: ['Option 1', 'Option 2', 'Option 3'],
  showCheckBox: true,
  headerTitle: 'Checklist',
  showHeader: true
});
checklist.appendTo('#checklist');

Virtual Scrolling

This code demonstrates how to create a ListView with virtual scrolling enabled, which is useful for handling large datasets efficiently.

const largeData = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);
const listView = new ej.lists.ListView({
  dataSource: largeData,
  enableVirtualization: true,
  height: '400px',
  headerTitle: 'Virtual Scrolling',
  showHeader: true
});
listView.appendTo('#virtualListView');

Other packages similar to @syncfusion/ej2-lists

react-list

react-list is a versatile library for rendering lists in React applications. It supports features like infinite scrolling and variable item heights. Compared to @syncfusion/ej2-lists, react-list is more focused on performance and flexibility in React environments.

react-virtualized

react-virtualized is a collection of React components for efficiently rendering large lists and tabular data. It offers features like virtual scrolling, fixed headers, and dynamic row heights. While @syncfusion/ej2-lists provides a more comprehensive set of UI components, react-virtualized excels in performance optimization for large datasets.

antd

Ant Design (antd) is a popular React UI library that includes a List component among its many offerings. The List component in antd supports features like pagination, infinite scrolling, and customizable item rendering. Compared to @syncfusion/ej2-lists, antd provides a broader range of UI components and is widely used in enterprise applications.

README

ej2-lists

The listview control allows you to select an item or multiple items from a list-like interface and represents the data in interactive hierarchical structure across different layouts or views. Lists are used for displaying data, data navigation, and data entry.

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this control, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

Setup

To install Lists and its dependent packages, use the following command.

npm install @syncfusion/ej2-lists

Resources

• Getting Started
• View Online Demos
• Product Page

Supported Frameworks

Lists control is also offered in following list of frameworks.

1. Angular
2. React
3. VueJS
4. ASP.NET Core
5. ASP.NET MVC
6. JavaScript (ES5)

Showcase samples

• Webmail (Live Demo)
• Call History (Live Demo)

Key Features

• Data binding - Supports data binding to display the list of items from the local or server-side data source.

• Grouping - Provides support to group the logically related items under a category.

• Nested list - Displays a set of nested list items in different layout.

• Virtualization - Allows you to load only viewable list items in a view port which will increase ListView performance on loading large number of data.

• Check list - Displays list item with checkbox which allows you to select single or select multiple items.

• Customizing templates - Allows you to customize the list item, header, and category group header.

• Accessibility - Provides built-in accessibility support that helps to access all the ListView control features through the keyboard, on-screen readers, or other assistive technology devices.

Support

Product support is available for through following mediums.

• Creating incident in Syncfusion Direct-Trac support system or Community forum.
• New GitHub issue.
• Ask your query in Stack Overflow with tag syncfusion and ej2.

License

Check the license detail here.

Changelog

Check the changelog here

© Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.