[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Web Components Grid Cell Merging
The Ignite UI for Web Components Data Table / Data Grid supports cell merging. You may opt-in and detect when adjacent sibling records for a specific column contains the same value. While the cells are not active, selected, or in edit mode, the value displays across the cells.
Web Components Grid Cell Merging Example
Overview
Cell Merging in the Web Components data grid can be configured by using the mergedCellMode option of the entire Web Components grid or individual columns. This property can be set to one of the following options, listed below:
Never: The grid or column will never merge cells. This is the default behavior.Always: The grid or column will always attempt to merge cells.OnlyWhenSorted: The grid or column will only attempt to merge cells when a column is sorted.
Note, regardless of the value of this property, cells can only be merged across sibling records.
Cell merging can be evaluated based on whether the data is formatted or not using the mergedCellEvaluationCriteria property. This is applicable to the entire grid or individual columns and can be set to one of the following options, listed below:
RawValue: Merge cells from adjacent rows when the raw values from the cells are the same. This is the default value.FormattedText: Merge cells from adjacent rows when the formatted value from the cells is the same.