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>