Row Grouping in Data Grid

Interface: GroupingOptions

Row grouping in RevoGrid allows you to organize rows based on a specific property, making it easy to categorize and visualize hierarchical data. With RevoGrid’s powerful features, you can set up grouping with minimal configuration.

Grouping Configuration

The grouping option takes an object with the props property, which specifies the columns to group by. In the example above, rows are grouped by the projectName property.

 import { defineCustomElements } from '@revolist/revogrid/loader' import { type DataType } from '@revolist/revogrid' defineCustomElements()  // Create grid element const grid = document.createElement('revo-grid') document.body.appendChild(grid)  // Define columns const columns = [  {  name: '🎰',  prop: 'a',  }, ]  grid.columns = columns grid.source = ((rowsNumber) => {  const result: DataType[] = []  const all = rowsNumber  for (let j = 0; j < all; j++) {  let row = j  if (!result[row]) {  result[row] = {  id: row,  projectName: j % 2 ? 'yes' : 'no',  }  }  result[row]['a'] = `I am row ${row}`  }  return result })(100)  grid.grouping = { props: ['projectName'] }

Vue 3 - Row Grouping

Source code Git

vue.row-grouping.vue

// vue.row-grouping.vue <template>  <button style="border: 1px solid var(--vp-input-border-color); padding: 5px; border-radius: 5px;" @click="toggleGrouping">Expand all</button>  <br/>  <br/>  <RevoGrid  hide-attribution  :source="source"  :columns="columns"  style="height: 400px"  :theme="isDark ? 'darkCompact' : 'compact'"  :grouping="{  props: ['group'],  prevExpanded: {},  expandedAll: expanded  }"  /> </template>  <script lang="ts" setup> import { useData } from 'vitepress' const { isDark } = useData() /**  * This is an example of a Vue3 component using RevoGrid  */ /**  * Import RevoGrid, Renderer and Editor for Vue  */ import RevoGrid from '@revolist/vue3-datagrid' import { ref } from 'vue';  // Define columns const columns = [  {  name: "🎰",  prop: "projectName",  size: 300,  },  {  name: "Group field",  prop: "group",  size: 150,  }, ]; // Define source const source = makeRows(100);  const expanded = ref(false); const toggleGrouping = () => {  expanded.value = !expanded.value; }   // Make rows function makeRows(rowsNumber: number) {  const result: {  projectName: string;  group: string;  }[] = [];  const all = rowsNumber;  for (let j = 0; j < all; j++) {  let row = j;  if (!result[row]) {  result[row] = {  projectName: "Project " + row,  group: j % 2 ? "yes" : "no",  };  }  result[row]["projectName"] = `Project ${row}`;  }  return result; } </script>

Example Grouping Output

With the provided configuration:

• Rows with projectName: 'yes' are grouped together.
• Rows with projectName: 'no' are grouped separately.

Dynamic Updates

Grouping can be updated dynamically by modifying the grouping property of the grid. For example:

grid.grouping = { props: ['newGroupingProperty'] };

For more details, check the GroupingOptions interface.