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}
- />
- );
- }
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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.