Grouping in Vue ListView component

19 Feb 20254 minutes to read

The ListView supports grouping nested elements based on their category. The cars are grouped based on their category by using the groupBy field in the data table, that also supports single-level navigation.

In the following sample, The cars are grouped based on its category by using the groupBy field.

<template>
  <div class="control-section">
    <div id='group-list'>
      <!-- Group ListView element -->
      <ejs-listview id='sample-list-group' :dataSource='cars' :fields='fields'></ejs-listview>
    </div>
  </div>
</template>

<script setup>

import { ListViewComponent as EjsListview } from "@syncfusion/ej2-vue-lists";

const cars = [
  {
    'text': 'Audi A4',
    'id': '9bdb',
    'category': 'Audi'
  },
  {
    'text': 'Audi A5',
    'id': '4589',
    'category': 'Audi'
  },
  {
    'text': 'BMW 501',
    'id': 'f849',
    'category': 'BMW'
  },
  {
    'text': 'BMW 502',
    'id': '7aff',
    'category': 'BMW'
  }
];
const fields = { groupBy: 'category', tooltip: 'text' };

</script>
<style>
#sample-list-group {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin: auto;
}

#group-list {
  width: 50%;
  padding: 10px;
  margin: auto;
}
</style>
<template>
  <div class="control-section">
    <div id='group-list'>
      <!-- Group ListView element -->
      <ejs-listview id='sample-list-group' :dataSource='cars' :fields='fields'></ejs-listview>
    </div>
  </div>
</template>

<script>

import { ListViewComponent } from "@syncfusion/ej2-vue-lists";

export default {
  name: "App",
  components: {
    "ejs-listview": ListViewComponent
  },

  data: function () {
    return {
      cars: [
        {
          'text': 'Audi A4',
          'id': '9bdb',
          'category': 'Audi'
        },
        {
          'text': 'Audi A5',
          'id': '4589',
          'category': 'Audi'
        },
        {
          'text': 'BMW 501',
          'id': 'f849',
          'category': 'BMW'
        },
        {
          'text': 'BMW 502',
          'id': '7aff',
          'category': 'BMW'
        }
      ],
      fields: { groupBy: 'category', tooltip: 'text' }
    };
  }
}
</script>
<style>
#sample-list-group {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin: auto;
}

#group-list {
  width: 50%;
  padding: 10px;
  margin: auto;
}
</style>

Customization

The grouping header can be customized by using the groupTemplate property for both inline and fixed group header. The complete customization description and explanation with an example is given in the following link.

Group Template.