RevoGrid

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++) {
    const 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.