React 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.

jQuery
JavaScript
const fruitsVegetables = [{
    key: "Fruits",
    items: [
        { name: "Apples", count: 10 },
        { name: "Oranges", count: 12 },
        { name: "Lemons", count: 15 }
    ]
}, {
    // ...
}];

$(function() {
    $("#listContainer").dxList({
        dataSource: fruitsVegetables,
        grouped: true,
        collapsibleGroups: true
    });
});
Angular
HTML
TypeScript
<dx-list
    [dataSource]="fruitsVegetables"
    [grouped]="true"
    [collapsibleGroups]="true">
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    fruitsVegetables = [{
        key: "Fruits",
        items: [
            { name: "Apples", count: 10 },
            { name: "Oranges", count: 12 },
            { name: "Lemons", count: 15 }
        ]
    }, {
        // ...
    }];
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxList
        :data-source="fruitsVegetables"
        :grouped="true"
        :collapsible-groups="true"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxList from 'devextreme-vue/list';

const fruitsVegetables = [{
    key: "Fruits",
    items: [
        { name: "Apples", count: 10 },
        { name: "Oranges", count: 12 },
        { name: "Lemons", count: 15 }
    ]
}, {
    // ...
}];

export default {
    components: {
        DxList
    },
    data() {
        return {
            fruitsVegetables
        }
    }
}
</script>
React
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.

jQuery
JavaScript
const list = $("#listContainer").dxList("instance");
list.collapseGroup(0); // collapses the group with index 0
list.expandGroup(4); // expands the group with index 4
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxListModule, DxListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxListComponent, { static: false }) list: DxListComponent;
    // Prior to Angular 8
    // @ViewChild(DxListComponent) list: DxListComponent;
    collapseGroup (groupIndex) {
        this.list.instance.collapseGroup(groupIndex);
    }
    expandGroup (groupIndex) {
        this.list.instance.expandGroup(groupIndex);
    }
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxList ...
        :ref="listRefKey"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxList from 'devextreme-vue/list';

const listRefKey = "my-list";
// ...
export default {
    components: {
        DxList
    },
    data() {
        return {
            // ...
            listRefKey
        }
    },
    methods: {
        collapseGroup(groupIndex) {
            this.list.collapseGroup(groupIndex);
        },
        expandGroup(groupIndex) {
            this.list.expandGroup(groupIndex);
        }
    },
    computed: {
        list: function() {
            return this.$refs[listRefKey].instance;
        }
    }
}
</script>
React
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
jQuery
Angular
Vue
React