Vue List - Customize Group Headers

You can define a groupTemplate to customize group headers. Without a groupTemplate, group headers display the text of the key field in bold font.

App.vue
  • <template>
  • <DxList
  • :data-source="listDataSource"
  • :grouped="true"
  • item-template="list-item"
  • group-template="group-header">
  • <template #list-item="{ data }">
  • <p style="margin:0px">{{ data.name }} | {{ data.count }}</p>
  • </template>
  • <template #group-header="{ data }">
  • <p>{{ data.key }} | {{ data.overallCount }}</p>
  • </template>
  • </DxList>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxList from 'devextreme-vue/list';
  • import DataSource from 'devextreme/data/data_source';
  •  
  • const fruitsVegetables = [{
  • key: "Fruits",
  • items: [
  • { name: "Apples", count: 10 },
  • { name: "Oranges", count: 12 },
  • { name: "Lemons", count: 15 }
  • ]
  • }, {
  • key: "Vegetables",
  • items: [
  • { name: "Potatoes", count: 5 },
  • { name: "Tomatoes", count: 9 },
  • { name: "Turnips", count: 8 }
  • ]
  • }];
  •  
  • const listDataSource = new DataSource({
  • store: fruitsVegetables,
  • map: function(groupedItem) {
  • let overallCount = 0;
  • groupedItem.items.forEach(function(item) {
  • overallCount += item.count;
  • });
  • return Object.assign(groupedItem, { overallCount: overallCount });
  • }
  • });
  •  
  • export default {
  • components: {
  • DxList
  • },
  • data() {
  • return {
  • listDataSource
  • }
  • }
  • }
  • </script>

View Demo

See Also