# Same Value Merge
URL: https://pro.rv-grid.com/guides/cells/same-value-merge/
Source: src/content/docs/guides/cells/same-value-merge.mdx
Description: Automatically merge cells with identical values in a column.
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.

### 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 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.

Same Value Merge is a visual merge. It does not create real merged grid ranges and does not change selection, focus, copy, or edit behavior. Use the Cell Merge plugin when you need explicit row or column spans.

### Configuration

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

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

### Sticky Merge Start Cells

Use `merge: { sticky: true }` when the first visible cell in a same-value run should stay visible while users scroll. This marks only the merge start cell as sticky; it does not pin every cell in that row.

```ts
import {
  SameValueMergePlugin,
  StickyCellsPlugin,
} from '@revolist/revogrid-pro';

const columns = [
  { prop: 'id', name: 'ID' },
  {
    prop: 'region',
    name: 'Region',
    merge: { sticky: true },
  },
  { prop: 'category', name: 'Category' },
];

grid.plugins = [SameValueMergePlugin, StickyCellsPlugin];
grid.columns = columns;
```

`SameValueMergePlugin` can register Sticky Cells automatically for `merge.sticky`, but adding `StickyCellsPlugin` explicitly keeps the dependency visible and matches the standalone Sticky Cells setup.

### Grouped Merge Boundaries

Some datasets need repeated values to merge only inside another column's run. For example, a `quantity` column may contain the same value across many rows, but it should stop merging when the controlling `workcenter` or operation changes.

Use a merge group with one leader column:

```javascript
const columns = [
  { prop: 'batch', name: 'Batch', merge: true },
  { prop: 'material', name: 'Material' },
  { prop: 'operationNo', name: 'Operation' },
  {
    prop: 'workcenter',
    name: 'Work Center',
    merge: {
      mergeGroup: 'operation',
      mergeLeader: true,
      mergeDependsOn: ['material', 'operationNo'],
    },
  },
  {
    prop: 'quantity',
    name: 'Quantity',
    merge: { mergeGroup: 'operation' },
  },
  {
    prop: 'tool',
    name: 'Tool',
    merge: { mergeGroup: 'operation' },
  },
];
```

`workcenter` is the leader for the `operation` group. It merges only while its own value, `material`, and `operationNo` all match. `quantity` and `tool` are followers: they still require their own values to match, but they cannot merge beyond the leader's boundary.

### Merge Configuration

```ts
type SameValueMergeConfig = {
  mergeGroup?: string;
  mergeLeader?: boolean;
  mergeDependsOn?: ColumnProp[];
  sticky?: boolean;
};
```

- `mergeGroup` connects columns that should share a leader boundary.
- `mergeLeader` marks the column that defines the boundary for a group.
- `mergeDependsOn` adds row fields that must match before the configured column can merge.
- `sticky` marks merge start cells for Sticky Cells. Only cells rendered as the start of a merge run become sticky.

If a column uses `merge: { mergeGroup: '...' }` and no matching leader is found, it falls back to ordinary same-value merge behavior.
