RevoGrid

Appearance

Row Grouping in Data Grid ​

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.

typescript

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
// 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:

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

For more details, check the GroupingOptions interface.

Pro features ​

Row Grouping Drag and Drop ​

Let users drag columns into a grouping panel to create grouped rows interactively. This is useful when users need to change grouping dimensions while exploring operational or reporting data.

Grouping Aggregation ​

Add summary values such as sum, average, count, and other calculations to grouped rows. Use it when row groups need totals or rollups instead of only visual separation.

Pivot Table ​

Extend row grouping into multidimensional analysis with row dimensions, column dimensions, values, subtotals, grand totals, and drill-down state. This is the next step when grouping becomes an analytics workflow.

Hierarchical Data View ​

Represent parent-child row structures with expand and collapse behavior, hierarchy-aware visibility, and row integration. Use it when the row relationship is a tree rather than a flat group.

Row Advanced Drag and Drop ​

Enable advanced row movement with custom drag handles, drop behavior, and multi-item workflows. This helps when grouped or structured rows also need controlled reordering.

Row Checkbox Selection ​

Add checkbox-based row selection with keyboard interactions and bulk selection behavior. This is useful when users need to act on full groups or selected rows inside grouped datasets.