JavaScript/jQuery List - Expand and Collapse a Group

If the user should be able to collapse or expand a group in the List, set the collapsibleGroups property to true. In this case, the user can collapse or expand a group with a click on the group header.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import List from 'devextreme-react/list';
  •  
  • const fruitsVegetables = [{
  • key: "Fruits",
  • items: [
  • { name: "Apples", count: 10 },
  • { name: "Oranges", count: 12 },
  • { name: "Lemons", count: 15 }
  • ]
  • }, {
  • // ...
  • }];
  •  
  • export default function App() {
  • return (
  • <List
  • dataSource={fruitsVegetables}
  • grouped={true}
  • collapsibleGroups={true}
  • />
  • );
  • }

View Demo

To collapse or expand a specific group programmatically, call the collapseGroup(groupIndex) or expandGroup(groupIndex) method.

App.js
  • import React, { useRef } from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import List from 'devextreme-react/list';
  • // ...
  • export default function App() {
  • const list = useRef(null);
  • const collapseGroup = (groupIndex) => {
  • list.current.instance().collapseGroup(groupIndex);
  • };
  • const expandGroup = (groupIndex) => {
  • list.current.instance().expandGroup(groupIndex);
  • };
  • return (
  • <List ...
  • ref={list}
  • />
  • );
  • }
See Also