React List - Getting Started
jQuery
Angular
Vue
React
The List displays data from a local or remote data storage and allows users to group, select, search, reorder, and delete items.
This tutorial explains how to add a List to a page, bind it to data, and configure its core features. The following control demonstrates the result:
Each section in this tutorial covers a single configuration step. You can also find the full code in the following GitHub repository: Getting Started with List.
Create a List
jQuery
Add DevExtreme to your jQuery application and use the following code to create a List:
$(function () { $('#list').dxList({ // Configuration goes here }); });
<html> <head> <!-- ... --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.2.13/css/dx.light.css"> <link rel="stylesheet" href="index.css"> <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/22.2.13/js/dx.all.js"></script> <script src="products.js"></script> <script type="text/javascript" src="index.js"></script> </head> <body class="dx-viewport"> <div id="list"></div> </body> </html>
Angular
Add DevExtreme to your Angular application and use the following code to create a List:
<dx-list id="list" <!-- Configuration goes here --> > </dx-list>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxListModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxListModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
Add DevExtreme to your Vue application and use the following code to create a List:
<template> <div id="app-container"> <DxList id="list"> <!-- Configuration goes here --> </DxList> </div> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxList } from 'devextreme-vue/list'; export default { components: { DxList } } </script>
React
Add DevExtreme to your React application and use the following code to create a List:
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { List } from 'devextreme-react/list'; function App() { return ( <div className="App"> <List id="list"> {/* Configuration goes here */} </List> </div> ); } export default App;
Bind the List to Data
The List can load data from different data source types. To use a local array, assign it to the dataSource property. If array elements are objects, use the displayExpr property to specify the data field that supplies values to the list. For information on other data source types, refer to the following articles:
jQuery
$(function () { $('#list').dxList({ dataSource: products, displayExpr: 'Name', }); });
const products = [{ ID: 1, Name: "HD Video Player", Category: "Video Players" }, { ID: 3, Name: "SuperPlasma 50", Category: "Televisions" }, { ID: 4, Name: "SuperLED 50", Category: "Televisions" }, { ID: 5, Name: "SuperLED 42", Category: "Televisions" }, { ID: 6, Name: "SuperLCD 55", Category: "Televisions" }, { ID: 7, Name: "SuperLCD 42", Category: "Televisions" }, { ID: 8, Name: "SuperPlasma 65", Category: "Televisions" }, { ID: 9, Name: "SuperLCD 70", Category: "Televisions" }, { ID: 10, Name: "DesktopLED 21", Category: "Monitors" }, { ID: 12, Name: "DesktopLCD 21", Category: "Monitors" }, { ID: 13, Name: "DesktopLCD 19", Category: "Monitors" }, { ID: 14, Name: "Projector Plus", Category: "Projectors" }, { ID: 15, Name: "Projector PlusHD", Category: "Projectors" }, { ID: 17, Name: "ExcelRemote IR", Category: "Automation" }, { ID: 18, Name: "ExcelRemote BT", Category: "Automation" }, { ID: 19, Name: "ExcelRemote IP", Category: "Automation" }];
Angular
<dx-list [dataSource]="products" displayExpr="Name"> </dx-list>
import { Component } from '@angular/core'; import { Product, ProductsService } from './products.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { products: Product[] = []; constructor(service: ProductsService) { this.products = service.getProducts(); } }
import { Injectable } from '@angular/core'; export interface Product { ID: Number, Name: String, Category: String, } const products: Product[] = [{ ID: 1, Name: "HD Video Player", Category: "Video Players" }, { ID: 3, Name: "SuperPlasma 50", Category: "Televisions" }, { ID: 4, Name: "SuperLED 50", Category: "Televisions" }, { ID: 5, Name: "SuperLED 42", Category: "Televisions" }, { ID: 6, Name: "SuperLCD 55", Category: "Televisions" }, { ID: 7, Name: "SuperLCD 42", Category: "Televisions" }, { ID: 8, Name: "SuperPlasma 65", Category: "Televisions" }, { ID: 9, Name: "SuperLCD 70", Category: "Televisions" }, { ID: 10, Name: "DesktopLED 21", Category: "Monitors" }, { ID: 12, Name: "DesktopLCD 21", Category: "Monitors" }, { ID: 13, Name: "DesktopLCD 19", Category: "Monitors" }, { ID: 14, Name: "Projector Plus", Category: "Projectors" }, { ID: 15, Name: "Projector PlusHD", Category: "Projectors" }, { ID: 17, Name: "ExcelRemote IR", Category: "Automation" }, { ID: 18, Name: "ExcelRemote BT", Category: "Automation" }, { ID: 19, Name: "ExcelRemote IP", Category: "Automation" }]; @Injectable({ providedIn: 'root' }) export class ProductsService { getProducts(): Products[] { return products; } }
Vue
<template> <div id="app-container"> <DxList :data-source="products" display-expr="Name"> </DxList> </div> </template> <script> // ... import { products } from './products'; export default { // ... data() { return { products } }, } </script>
export const products = [{ ID: 1, Name: "HD Video Player", Category: "Video Players" }, { ID: 3, Name: "SuperPlasma 50", Category: "Televisions" }, { ID: 4, Name: "SuperLED 50", Category: "Televisions" }, { ID: 5, Name: "SuperLED 42", Category: "Televisions" }, { ID: 6, Name: "SuperLCD 55", Category: "Televisions" }, { ID: 7, Name: "SuperLCD 42", Category: "Televisions" }, { ID: 8, Name: "SuperPlasma 65", Category: "Televisions" }, { ID: 9, Name: "SuperLCD 70", Category: "Televisions" }, { ID: 10, Name: "DesktopLED 21", Category: "Monitors" }, { ID: 12, Name: "DesktopLCD 21", Category: "Monitors" }, { ID: 13, Name: "DesktopLCD 19", Category: "Monitors" }, { ID: 14, Name: "Projector Plus", Category: "Projectors" }, { ID: 15, Name: "Projector PlusHD", Category: "Projectors" }, { ID: 17, Name: "ExcelRemote IR", Category: "Automation" }, { ID: 18, Name: "ExcelRemote BT", Category: "Automation" }, { ID: 19, Name: "ExcelRemote IP", Category: "Automation" }];
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { List } from 'devextreme-react/list'; import { products } from './products'; function App() { return ( <div className="App"> <List dataSource={products} displayExpr="Name"> </List> </div> ); } export default App;
export const products = [{ ID: 1, Name: "HD Video Player", Category: "Video Players" }, { ID: 3, Name: "SuperPlasma 50", Category: "Televisions" }, { ID: 4, Name: "SuperLED 50", Category: "Televisions" }, { ID: 5, Name: "SuperLED 42", Category: "Televisions" }, { ID: 6, Name: "SuperLCD 55", Category: "Televisions" }, { ID: 7, Name: "SuperLCD 42", Category: "Televisions" }, { ID: 8, Name: "SuperPlasma 65", Category: "Televisions" }, { ID: 9, Name: "SuperLCD 70", Category: "Televisions" }, { ID: 10, Name: "DesktopLED 21", Category: "Monitors" }, { ID: 12, Name: "DesktopLCD 21", Category: "Monitors" }, { ID: 13, Name: "DesktopLCD 19", Category: "Monitors" }, { ID: 14, Name: "Projector Plus", Category: "Projectors" }, { ID: 15, Name: "Projector PlusHD", Category: "Projectors" }, { ID: 17, Name: "ExcelRemote IR", Category: "Automation" }, { ID: 18, Name: "ExcelRemote BT", Category: "Automation" }, { ID: 19, Name: "ExcelRemote IP", Category: "Automation" }];
Select Items
The List supports "single", "multiple", and "all" item selection modes. To enable selection, assign one of these modes to the selectionMode property.
jQuery
$(function () { $('#list').dxList({ // ... selectionMode: 'single', }); });
Angular
<dx-list... selectionMode="single"> </dx-list>
Vue
<template> <div id="app-container"> <DxList... selection-mode="single"> </DxList> </div> </template> <script> // ... </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; function App() { return ( <div className="App"> <List... selectionMode="single"> </List> </div> ); } export default App;
Group Items
The List can display items as a two-level hierarchy: parent and child items. To group items, set the grouped property to true and ensure that data is structured as a hierarchical array of objects. The control recognizes a hierarchy if objects contain properties named key and nested lists named items. Refer to the following help topic for more information and additional ways to build a hierarchy: Grouping in the Data Source.
You can also display a hierarchy in a list bound to a flat array. In this case, use the DataSource component. Wrap your array in a store as shown below. Assign the grouping field to the DataSource's group property.
jQuery
$(function () { $('#list').dxList({ dataSource: new DevExpress.data.DataSource({ store: products, group: 'Category', }), grouped: true, }); });
Angular
<dx-list... [dataSource]="dataSource" [grouped]="true"> </dx-list>
import { Component } from '@angular/core'; import DataSource from "devextreme/data/data_source"; import { Product, ProductsService } from './products.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { dataSource: DataSource; products: Product[] = []; constructor(service: ProductsService) { this.products = service.getProducts(); this.dataSource = new DataSource({ store: this.products, group: "Category" }); } }
Vue
<template> <div id="app-container"> <DxList... :data-source="dataSource" :grouped="true"> </DxList> </div> </template> <script> // ... import { products } from './products'; import DataSource from "devextreme/data/data_source"; export default { // ... data() { return { dataSource: new DataSource({ store: products, group: "Category" }), } }, } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; // ... import { products } from './products'; import DataSource from "devextreme/data/data_source"; const dataSource = new DataSource({ store: products, group: "Category" }); function App() { return ( <div className="App"> <List... dataSource={dataSource} grouped={true}> </List> </div> ); } export default App;
Search Items
To add a search bar to the List, set the searchEnabled property to true. Use the searchMode property to specify whether found list items should start with, contain, or match the search string.
jQuery
$(function () { $('#list').dxList({ // ... searchEnabled: true, searchMode: 'contains', }); });
Angular
<dx-list... [searchEnabled]="true" searchMode="contains"> </dx-list>
Vue
<template> <div id="app-container"> <DxList... :search-enabled="true" search-mode="contains"> </DxList> </div> </template> <script> // ... </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; function App() { return ( <div className="App"> <List... searchEnabled={true} searchMode="contains"> </List> </div> ); } export default App;
Reorder Items
Users can drag and drop list items to reorder them. To configure this functionality, define the itemDragging object. Within this object, set the allowReordering property to true.
jQuery
$(function () { $('#list').dxList({ // ... itemDragging: { allowReordering: true, }, }); });
Angular
<dx-list...> <dxo-item-dragging [allowReordering]="true"> </dxo-item-dragging> </dx-list>
Vue
<template> <div id="app-container"> <DxList...> <DxItemDragging :allow-reordering="true" /> </DxList> </div> </template> <script> // ... import DxList, { DxItemDragging } from "devextreme-vue/list"; export default { components: { // ... DxItemDragging }, // ... } </script>
React
//... import List, { ItemDragging } from "devextreme-react/list"; function App() { return ( <div className="App"> <List...> <ItemDragging allowReordering={true} /> </List> </div> ); } export default App;
Delete Items
To allow users to delete items from the List, set the allowItemDeleting property to true. Use the itemDeleteMode property to select the UI elements and/or user actions that remove items.
jQuery
$(function () { $('#list').dxList({ // ... allowItemDeleting: true, }); });
Angular
<dx-list... [allowItemDeleting]="true"> </dx-list>
Vue
<template> <div id="app-container"> <DxList... :allow-item-deleting="true"> </DxList> </div> </template> <script> // ... </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; function App() { return ( <div className="App"> <List... allowItemDeleting={true}> </List> </div> ); } export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.