Skip to content
RevoGrid [Pro]

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 ts 
import { defineCustomElements } from '@revolist/revogrid/loader';
import { SameValueMergePlugin } from '@revolist/revogrid-pro';

defineCustomElements();

const regions = ['EMEA', 'AMER', 'APAC'];
const categories = ['Electronics', 'Books', 'Clothing', 'Home'];
const statuses = ['In Stock', 'Back Ordered', 'Discontinued'];
const items = ['Laptop', 'Mouse', 'Keyboard', 'Guide', 'Desk Lamp', 'T-Shirt', 'Notebook', 'Monitor'];

const columns = [
  { prop: 'id', name: 'ID', size: 70 },
  { prop: 'region', name: 'Region', merge: true, size: 120 },
  { prop: 'category', name: 'Category', merge: true, size: 140 },
  { prop: 'status', name: 'Status', merge: true, size: 140 },
  { prop: 'name', name: 'Product', size: 160 },
  { prop: 'manager', name: 'Owner', size: 120 },
  { prop: 'revenue', name: 'Revenue', size: 110 },
];

const source = Array.from({ length: 60 }, (_, index) => {
  const region = regions[Math.floor(index / 20) % regions.length];
  const category = categories[Math.floor(index / 5) % categories.length];
  const status = statuses[Math.floor(index / 2) % statuses.length];

  return {
    id: index + 1,
    region,
    category,
    status,
    name: `${items[index % items.length]} ${String(index + 1).padStart(2, '0')}`,
    manager: ['Ava', 'Ben', 'Cara', 'Dmitri'][index % 4],
    revenue: 1200 + index * 75,
  };
});

export function load(parentSelector: string) {
  const parent = document.querySelector(parentSelector);
  if (!parent) return;

  const container = document.createElement('div');
  container.style.display = 'grid';
  container.style.gap = '8px';

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

  grid.plugins = [SameValueMergePlugin];
  grid.columns = columns;
  grid.theme = 'compact';
  grid.hideAttribution = true;

  container.append(grid);
  parent.appendChild(container);
  grid.source = source;

  return () => container.remove();
}
Vue vue 
<template>
  <div class="same-value-merge-demo grow flex flex-col gap-2">
    <RevoGrid
      class="overflow-hidden grow"
      :source="rows"
      :columns="columns"
      :plugins="plugins"
      :theme="isDark ? 'darkCompact' : 'compact'"
      stretch="all"
      hide-attribution
    />
  </div>
</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: 70 },
  { prop: 'region', name: 'Region', merge: true, size: 120 },
  { prop: 'category', name: 'Category', merge: true, size: 140 },
  { prop: 'status', name: 'Status', merge: true, size: 140 },
  { prop: 'name', name: 'Product', size: 160 },
  { prop: 'manager', name: 'Owner', size: 120 },
  { prop: 'revenue', name: 'Revenue', size: 110 },
];

const regions = ['EMEA', 'AMER', 'APAC'];
const categories = ['Electronics', 'Books', 'Clothing', 'Home'];
const statuses = ['In Stock', 'Back Ordered', 'Discontinued'];
const items = ['Laptop', 'Mouse', 'Keyboard', 'Guide', 'Desk Lamp', 'T-Shirt', 'Notebook', 'Monitor'];

const rows = ref(Array.from({ length: 60 }, (_, index) => {
  const region = regions[Math.floor(index / 20) % regions.length];
  const category = categories[Math.floor(index / 5) % categories.length];
  const status = statuses[Math.floor(index / 2) % statuses.length];

  return {
    id: index + 1,
    region,
    category,
    status,
    name: `${items[index % items.length]} ${String(index + 1).padStart(2, '0')}`,
    manager: ['Ava', 'Ben', 'Cara', 'Dmitri'][index % 4],
    revenue: 1200 + index * 75,
  };
}));
</script>
React tsx 
import React, { useMemo } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import { SameValueMergePlugin } from '@revolist/revogrid-pro';

const columns = [
  { prop: 'id', name: 'ID', size: 70 },
  { prop: 'region', name: 'Region', merge: true, size: 120 },
  { prop: 'category', name: 'Category', merge: true, size: 140 },
  { prop: 'status', name: 'Status', merge: true, size: 140 },
  { prop: 'name', name: 'Product', size: 160 },
  { prop: 'manager', name: 'Owner', size: 120 },
  { prop: 'revenue', name: 'Revenue', size: 110 },
];

const regions = ['EMEA', 'AMER', 'APAC'];
const categories = ['Electronics', 'Books', 'Clothing', 'Home'];
const statuses = ['In Stock', 'Back Ordered', 'Discontinued'];
const items = ['Laptop', 'Mouse', 'Keyboard', 'Guide', 'Desk Lamp', 'T-Shirt', 'Notebook', 'Monitor'];

const createRows = () => Array.from({ length: 60 }, (_, index) => {
  const region = regions[Math.floor(index / 20) % regions.length];
  const category = categories[Math.floor(index / 5) % categories.length];
  const status = statuses[Math.floor(index / 2) % statuses.length];

  return {
    id: index + 1,
    region,
    category,
    status,
    name: `${items[index % items.length]} ${String(index + 1).padStart(2, '0')}`,
    manager: ['Ava', 'Ben', 'Cara', 'Dmitri'][index % 4],
    revenue: 1200 + index * 75,
  };
});

export const SameValueMerged = () => {
  const rows = useMemo(createRows, []);
  const plugins = useMemo(() => [SameValueMergePlugin], []);

  return (
    <div className="flex grow flex-col gap-2 same-value-merge-demo">
      <RevoGrid
        className="overflow-hidden grow"
        columns={columns}
        source={rows}
        plugins={plugins}
        theme="compact"
        hideAttribution
      />
    </div>
  );
}
Angular ts 
import { SameValueMergePlugin } from '@revolist/revogrid-pro';

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

const regions = ['EMEA', 'AMER', 'APAC'];
const categories = ['Electronics', 'Books', 'Clothing', 'Home'];
const statuses = ['In Stock', 'Back Ordered', 'Discontinued'];
const items = ['Laptop', 'Mouse', 'Keyboard', 'Guide', 'Desk Lamp', 'T-Shirt', 'Notebook', 'Monitor'];

const createRows = () => Array.from({ length: 60 }, (_, index) => {
  const region = regions[Math.floor(index / 20) % regions.length];
  const category = categories[Math.floor(index / 5) % categories.length];
  const status = statuses[Math.floor(index / 2) % statuses.length];

  return {
    id: index + 1,
    region,
    category,
    status,
    name: `${items[index % items.length]} ${String(index + 1).padStart(2, '0')}`,
    manager: ['Ava', 'Ben', 'Cara', 'Dmitri'][index % 4],
    revenue: 1200 + index * 75,
  };
});

@Component({
  selector: 'same-value-merge-grid',
  standalone: true,
  imports: [RevoGrid],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="same-value-merge-demo">
      <revo-grid
        [source]="rows"
        [columns]="columns"
        [plugins]="plugins"
        [theme]="'compact'"
        [hideAttribution]="true"
        style="min-height: 400px;"
      ></revo-grid>
    </div>
  `,
  styles: [`
    .same-value-merge-demo {
      display: grid;
      gap: 8px;
    }
  `],
})
export class SameValueMergeGridComponent {
  plugins = [SameValueMergePlugin];

  columns = [
    { prop: 'id', name: 'ID', size: 70 },
    { prop: 'region', name: 'Region', merge: true, size: 120 },
    { prop: 'category', name: 'Category', merge: true, size: 140 },
    { prop: 'status', name: 'Status', merge: true, size: 140 },
    { prop: 'name', name: 'Product', size: 160 },
    { prop: 'manager', name: 'Owner', size: 120 },
    { prop: 'revenue', name: 'Revenue', size: 110 },
  ];

  rows = createRows();
}

Why Use Same Value Merge?

Section titled “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

Section titled “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

Section titled “How It Works”

The Same Value Merge plugin works by:

  1. Checking each cell against the nearest comparable visible rows above and below it in columns marked with merge: true
  2. If the values are identical, repeated values are hidden and internal borders are removed
  3. This creates a visual effect of merged cells while maintaining the original data structure

When row grouping or Pivot row drill-down inserts group rows, those rows participate in the comparison only when they carry the merged column’s value. Deeper group rows without that column value are skipped.

Configuration

Section titled “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' }
];