Nested list in React ListView component
23 Jan 202524 minutes to read
The ListView component supports Nested lists. To implement this, define the child property for the nested list in an array of JSON objects.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
// define the array of Json
let arts = [
{
text: "Asia",
id: "01",
category: "Continent",
child: [
{
text: "India",
id: "1",
category: "Asia",
child: [
{
text: "Delhi",
id: "1001",
category: "India"
},
{
text: "Kashmir",
id: "1002",
category: "India"
},
{
text: "Goa",
id: "1003",
category: "India"
}
]
},
{
text: "China",
id: "2",
category: "Asia",
child: [
{
text: "Zhejiang",
id: "2001",
category: "China"
},
{
text: "Hunan",
id: "2002",
category: "China"
},
{
text: "Shandong",
id: "2003",
category: "China"
}
]
}
]
},
{
text: "North America",
id: "02",
category: "Continent",
child: [
{
text: "USA",
id: "3",
category: "North America",
child: [
{
text: "California",
id: "3001",
category: "USA"
},
{
text: "New York",
id: "3002",
category: "USA"
},
{
text: "Florida",
id: "3003",
category: "USA"
}
]
},
{
text: "Canada",
id: "4",
category: "North America",
child: [
{
text: "Ontario",
id: "4001",
category: "Canada"
},
{
text: "Alberta",
id: "4002",
category: "Canada"
},
{
text: "Manitoba",
id: "4003",
category: "Canada"
}
]
}
]
},
{
text: "Europe",
id: "03",
category: "Continent",
child: [
{
text: "Germany",
id: "5",
category: "Europe",
child: [
{
text: "Berlin",
id: "5001",
category: "Germany"
},
{
text: "Bavaria",
id: "5002",
category: "Germany"
},
{
text: "Hesse",
id: "5003",
category: "Germany"
}
]
},
{
text: "France",
id: "6",
category: "Europe",
child: [
{
text: "Paris",
id: "6001",
category: "France"
},
{
text: "Lyon",
id: "6002",
category: "France"
},
{
text: "Marseille",
id: "6003",
category: "France"
}
]
}
]
},
{
text: "Australia",
id: "04",
category: "Continent",
child: [
{
text: "Australia",
id: "7",
category: "Australia",
child: [
{
text: "Sydney",
id: "7001",
category: "Australia"
},
{
text: "Melbourne",
id: "7002",
category: "Australia"
},
{
text: "Brisbane",
id: "7003",
category: "Australia"
}
]
},
{
text: "New Zealand",
id: "8",
category: "Australia",
child: [
{
text: "Milford Sound",
id: "8001",
category: "New Zealand"
},
{
text: "Tongariro National Park",
id: "8002",
category: "New Zealand"
},
{
text: "Fiordland National Park",
id: "8003",
category: "New Zealand"
}
]
}
]
},
{
text: "Africa",
id: "05",
category: "Continent",
child: [
{
text: "Morocco",
id: "9",
category: "Africa",
child: [
{
text: "Rabat",
id: "9001",
category: "Morocco"
},
{
text: "Toubkal",
id: "9002",
category: "Morocco"
},
{
text: "Todgha Gorge",
id: "9003",
category: "Morocco"
}
]
},
{
text: "South Africa",
id: "10",
category: "Africa",
child: [
{
text: "Cape Town",
id: "10001",
category: "South Africa"
},
{
text: "Pretoria",
id: "10002",
category: "South Africa"
},
{
text: "Bloemfontein",
id: "10003",
category: "South Africa"
}
]
}
]
}
];
let fields = { tooltip: "text" };
let animation = { duration: 0 };
return (
// specifies the tag to render the ListView component
<ListViewComponent id="list" dataSource={arts} fields={fields} showHeader={true} headerTitle="Continent" animation={animation} />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
// define the array of Json
let arts: any[] = [
{
text: "Asia",
id: "01",
category: "Continent",
child: [
{
text: "India",
id: "1",
category: "Asia",
child: [
{
text: "Delhi",
id: "1001",
category: "India"
},
{
text: "Kashmir",
id: "1002",
category: "India"
},
{
text: "Goa",
id: "1003",
category: "India"
}
]
},
{
text: "China",
id: "2",
category: "Asia",
child: [
{
text: "Zhejiang",
id: "2001",
category: "China"
},
{
text: "Hunan",
id: "2002",
category: "China"
},
{
text: "Shandong",
id: "2003",
category: "China"
}
]
}
]
},
{
text: "North America",
id: "02",
category: "Continent",
child: [
{
text: "USA",
id: "3",
category: "North America",
child: [
{
text: "California",
id: "3001",
category: "USA"
},
{
text: "New York",
id: "3002",
category: "USA"
},
{
text: "Florida",
id: "3003",
category: "USA"
}
]
},
{
text: "Canada",
id: "4",
category: "North America",
child: [
{
text: "Ontario",
id: "4001",
category: "Canada"
},
{
text: "Alberta",
id: "4002",
category: "Canada"
},
{
text: "Manitoba",
id: "4003",
category: "Canada"
}
]
}
]
},
{
text: "Europe",
id: "03",
category: "Continent",
child: [
{
text: "Germany",
id: "5",
category: "Europe",
child: [
{
text: "Berlin",
id: "5001",
category: "Germany"
},
{
text: "Bavaria",
id: "5002",
category: "Germany"
},
{
text: "Hesse",
id: "5003",
category: "Germany"
}
]
},
{
text: "France",
id: "6",
category: "Europe",
child: [
{
text: "Paris",
id: "6001",
category: "France"
},
{
text: "Lyon",
id: "6002",
category: "France"
},
{
text: "Marseille",
id: "6003",
category: "France"
}
]
}
]
},
{
text: "Australia",
id: "04",
category: "Continent",
child: [
{
text: "Australia",
id: "7",
category: "Australia",
child: [
{
text: "Sydney",
id: "7001",
category: "Australia"
},
{
text: "Melbourne",
id: "7002",
category: "Australia"
},
{
text: "Brisbane",
id: "7003",
category: "Australia"
}
]
},
{
text: "New Zealand",
id: "8",
category: "Australia",
child: [
{
text: "Milford Sound",
id: "8001",
category: "New Zealand"
},
{
text: "Tongariro National Park",
id: "8002",
category: "New Zealand"
},
{
text: "Fiordland National Park",
id: "8003",
category: "New Zealand"
}
]
}
]
},
{
text: "Africa",
id: "05",
category: "Continent",
child: [
{
text: "Morocco",
id: "9",
category: "Africa",
child: [
{
text: "Rabat",
id: "9001",
category: "Morocco"
},
{
text: "Toubkal",
id: "9002",
category: "Morocco"
},
{
text: "Todgha Gorge",
id: "9003",
category: "Morocco"
}
]
},
{
text: "South Africa",
id: "10",
category: "Africa",
child: [
{
text: "Cape Town",
id: "10001",
category: "South Africa"
},
{
text: "Pretoria",
id: "10002",
category: "South Africa"
},
{
text: "Bloemfontein",
id: "10003",
category: "South Africa"
}
]
}
]
}
];
let fields = { tooltip: "text" };
let animation: Object = { duration: 0 };
return (
// specifies the tag to render the ListView component
<ListViewComponent
id="list"
dataSource={arts}
fields={fields}
showHeader={true}
headerTitle="Continent"
animation={animation}
/>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));#list {
display: block;
max-width: 400px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-lists/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element' style="margin:0 auto; max-width:400px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>