Cell Merging Specification

Cell Merging Specification

Contents

1. Overview
2. User Stories
3. Functionality
4. Test Scenarios
5. Accessibility
6. Assumptions and Limitations
7. References

Owned by

Team Name: Grinders

Developer Name: Maya K.

Designer Name

Requires approval from

• Peer Developer Name | Date:
• Design Manager Name | Date:

Signed off by

• Product Owner Name | Date:
• Platform Architect Name | Date:

Revision History

Version	Users	Date	Notes
1	Maya K.	04/07/2025	Initial draft.

1. Overview

Cell merging is a feature that combines two or more cells into a single, larger cell. Cell can be merged vertically, based on same data in adjacent cells in the same column.

Objectives

The feature includes the following:

• Ability to configure and merge cells in a column based on same data or other custom condition, into a single cell.

2. User Stories

Developer stories:

• Story 1: As a developer, I want to be able to enable/disable cell merging for all columns or for particular columns (when sorted or unsorted) so that data is visually merged.

• Story 2: As a developer, I want to be able to apply a custom condition bases on which to merge the cells.

• Story 3: As a developer, I want to configure how the text in the merged cell is displayed.

End-user stories:

• Story 1: As an end-user, I want to see repeating data as a single physical cell that spans multiple records.

• Story 2: As an end-user, I want to be able to interact with the cell in a meaningful way (select, update, navigate through etc.).

3. Functionality

Cells that have same data will be merged in a single cell that spans down:

3.1. End-User Experience

Integration scenarios:

• Virtualization

  Merged cells should not be lost on scroll when their original row goes outside the virtualization frame. The scrolling should feel natural, as if there's no virtualization.

• Expand/Collapse

  If a feature (like master-detail, grouping etc.) generates a non-data row, then the cell merging is interrupted and group will be split in two.

• Navigation

  Merged cell is considered as a single cell that is part of all rows it spans through. Navigation should retain information for the current active row when moving through a merged cell, so that navigation can continue in the row when moving horizontally.

• Paging

  Only data on the current page will be merged.

• Row pinning

  TBD

• Updating

  TBD

• Selection

  TBD

3.2. Developer Experience

The merge mode for the grid can be set via a cellMergeMode property with enum values:

export const GridCellMergeMode = {
    always: 'always',
    onSort: 'onSort'
} as const;

Always will merge any cells that match the merging condition and are adjacent. OnSort will merge cells only if the column is sorted.

Merging can be enabled/disabled via a boolean merge property on the column.

    <igx-column merge="true">
    </igx-column>

A custom condition by which to merge cells can be set via a mergeStrategy.

3.3. Keyboard Navigation

Same as in multi-row layout grid.

3.4. API

Options

• Grid:

  Name	Description	Type	Default value	Valid values
  cellMergeMode	Determines the mode for when to merging cells.	GridCellMergeMode	onSort	always, onSort
  mergeStrategy	Allows setting a custom merge strategy to customize the conditions by which to merge cells.	IMergeStrategy	undefined	new MyMergeStrategy() that extends base MergeStrategy.

• Column:

  Name	Description	Type	Default value	Valid values
  merge	Whether or not to merge cells for this column.	boolean	false	true/false
  mergeStrategy	Allows setting a custom merge strategy to customize the conditions by which to merge cells.	IMergeStrategy	undefined	new MyMergeStrategy() that extends base MergeStrategy.

Events

Name	Description	Cancelable	Parameters

4. Test Scenarios

Automation

• Scenario 1:
• scenario 2:

5. Accessibility

6. Assumptions and Limitations

Assumptions	Limitation Notes

7. References

Specify all referenced external sources