🔗 Same Value Merge

The Same Value Merge feature automatically combines cells in a column when they contain identical values. This creates a cleaner, more organized view of your data by visually grouping repeated values.

Source code

TypeScript

import { defineCustomElements } from '@revolist/revogrid/loader';
import { SameValueMergePlugin } from '@revolist/revogrid-pro';

defineCustomElements();

const grid = document.createElement('revo-grid');

// Add plugin and set data
grid.plugins = [SameValueMergePlugin];
// Configure columns with merge property
grid.columns = [
  { prop: 'id', name: 'ID', size: 80 },
  { prop: 'category', name: 'Category', merge: true },
  { prop: 'name', name: 'Name' },
  { prop: 'status', name: 'Status', merge: true }
];
grid.source = [
  { id: 1, category: 'Electronics', name: 'Laptop', status: 'In Stock' },
  { id: 2, category: 'Electronics', name: 'Mouse', status: 'In Stock' },
  { id: 3, category: 'Electronics', name: 'Keyboard', status: 'In Stock' },
  { id: 4, category: 'Books', name: 'JavaScript Guide', status: 'Out of Stock' },
  { id: 5, category: 'Books', name: 'TypeScript Guide', status: 'Out of Stock' },
  { id: 6, category: 'Clothing', name: 'T-Shirt', status: 'In Stock' }
];

document.body.appendChild(grid);

Vue

<template>
  <RevoGrid
    class="overflow-hidden"
    :source="rows"
    :columns="columns"
    :plugins="plugins"
    :theme="isDark ? 'darkCompact' : 'compact'"
    :additional-data="{
      stretch: 'all'
    }"
    hide-attribution
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import RevoGrid from '@revolist/vue3-datagrid';
import { SameValueMergePlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { currentThemeVue } from '../composables/useRandomData';
const { isDark } = currentThemeVue();

const plugins = [SameValueMergePlugin, ColumnStretchPlugin];

const columns = [
  { prop: 'id', name: 'ID', size: 80 },
  { prop: 'category', name: 'Category', merge: true },
  { prop: 'name', name: 'Name' },
  { prop: 'status', name: 'Status', merge: true }
];

const rows = ref([
  { id: 1, category: 'Electronics', name: 'Laptop', status: 'In Stock' },
  { id: 2, category: 'Electronics', name: 'Mouse', status: 'In Stock' },
  { id: 3, category: 'Electronics', name: 'Keyboard', status: 'In Stock' },
  { id: 4, category: 'Books', name: 'JavaScript Guide', status: 'Out of Stock' },
  { id: 5, category: 'Books', name: 'TypeScript Guide', status: 'Out of Stock' },
  { id: 6, category: 'Clothing', name: 'T-Shirt', status: 'In Stock' }
]);
</script>

React

src/components/same-value-merge/SameValueMerged.tsx

import React, { useState, useMemo } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import { SameValueMergePlugin } from '@revolist/revogrid-pro';

const columns = [
  { prop: 'id', name: 'ID', size: 80 },
  { prop: 'category', name: 'Category', merge: true },
  { prop: 'name', name: 'Name' },
  { prop: 'status', name: 'Status', merge: true },
];

export const SameValueMerged = () => {
  const [rows] = useState(() => {
    return [
      { id: 1, category: 'Electronics', name: 'Laptop', status: 'In Stock' },
      { id: 2, category: 'Electronics', name: 'Mouse', status: 'In Stock' },
      { id: 3, category: 'Electronics', name: 'Keyboard', status: 'In Stock' },
      {
        id: 4,
        category: 'Books',
        name: 'JavaScript Guide',
        status: 'Out of Stock',
      },
      {
        id: 5,
        category: 'Books',
        name: 'TypeScript Guide',
        status: 'Out of Stock',
      },
      { id: 6, category: 'Clothing', name: 'T-Shirt', status: 'In Stock' },
    ];
  });

  return (
    <RevoGrid
      columns={columns}
      source={rows}
      plugins={[SameValueMergePlugin]}
    />
  );
}

Angular

import { SameValueMergePlugin } from '@revolist/revogrid-pro';

import { Component, OnInit } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';

@Component({
  selector: 'same-value-merge-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [source]="rows"
      [columns]="columns"
      [plugins]="plugins"
      [hideAttribution]="true"
      style="height: 400px;"
    ></revo-grid>
  `,
})
export class SameValueMergeGridComponent implements OnInit {
  plugins = [SameValueMergePlugin];

  columns = [
    { prop: 'id', name: 'ID', size: 80 },
    { prop: 'category', name: 'Category', merge: true },
    { prop: 'name', name: 'Name' },
    { prop: 'status', name: 'Status', merge: true }
  ];

  rows = [
    { id: 1, category: 'Electronics', name: 'Laptop', status: 'In Stock' },
    { id: 2, category: 'Electronics', name: 'Mouse', status: 'In Stock' },
    { id: 3, category: 'Electronics', name: 'Keyboard', status: 'In Stock' },
    { id: 4, category: 'Books', name: 'JavaScript Guide', status: 'Out of Stock' },
    { id: 5, category: 'Books', name: 'TypeScript Guide', status: 'Out of Stock' },
    { id: 6, category: 'Clothing', name: 'T-Shirt', status: 'In Stock' }
  ];

  ngOnInit() {
    // Any additional initialization logic if needed
  }
}

Why Use Same Value Merge?

Same Value Merge is particularly useful when you want to:

• Reduce Visual Clutter: Hide repeated values in a column, making the data easier to read
• Highlight Data Patterns: Quickly identify groups of identical values
• Improve Data Presentation: Create a cleaner, more professional look for your grids

Example Use Cases

• Category Grouping: When displaying items grouped by category, merge cells with the same category name
• Status Display: Merge cells with the same status to make state changes more apparent
• Hierarchical Data: Visually group related items in hierarchical data structures

How It Works

The Same Value Merge plugin works by:

1. Checking each cell against the cell above it in columns marked with merge: true
2. If the values are identical, the current cell’s value is hidden and its top border is removed
3. This creates a visual effect of merged cells while maintaining the original data structure

Configuration

To enable Same Value Merge for specific columns, set the merge property to true in your column configuration:

const columns = [
  { prop: 'id', name: 'ID' },
  { prop: 'category', name: 'Category', merge: true }, // Enable merging for this column
  { prop: 'name', name: 'Name' }
];