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.