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