smart-html-elements

Grid Row Span

JavaScript

Angular

Vue

React

Grid for Angular

Angular standalone version of this topic (compatible with Angular 17+). Import both the Smart UI component and module in the standalone component.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { GridComponent, GridModule } from 'smart-webcomponents-angular/grid';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GridModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  @ViewChild('grid', { read: GridComponent, static: false }) grid!: GridComponent;
}

<!-- app.component.html -->
<smart-grid #grid></smart-grid>

Use this.grid for API methods in this topic.

Grid Row Span

Enable Row Span

You can configure row spanning in the Grid. The feature is also known as 'cell merging'.

componentProps = {
    dataSourceSettings: {
        dataFields: [
            { name: 'firstName', dataType: 'string' },
            { name: 'lastName', dataType: 'string' },
            { name: 'productName', map: 'product.name', dataType: 'string' },
            { name: 'quantity', map: 'product.quantity', dataType: 'number' },
            { name: 'price', map: 'product.price', dataType: 'number' },
            { name: 'total', map: 'product.total', dataType: 'number' }
        ]
    },
    dataSource: [
        {
            firstName: 'Andrew',
            lastName: 'Burke',
            product: {
                name: 'Ice Coffee', price: 10, quantity: 3, total: 30
            }
        },
        {
            firstName: 'Petra',
            lastName: 'Williams',
            product: {
                name: 'Espresso', price: 7, quantity: 5, total: 35
            }
        },
        {
            firstName: 'Anthony',
            lastName: 'Baker',
            product: {
                name: 'Frappucino', price: 6, quantity: 4, total: 24
            }
        },
        {
            firstName: 'Nancy',
            lastName: 'Green',
            product: {
                name: 'Frappucino', price: 6, quantity: 4, total: 24
            }
        },
        {
            firstName: 'Robin',
            lastName: 'Gray',
            product: {
                name: 'Cappucino', price: 6, quantity: 4, total: 24
            }
        },
        {
            firstName: 'John',
            lastName: 'Smith',
            product: {
                name: 'Espresso', price: 6, quantity: 4, total: 24
            }
        },
        {
            firstName: 'Mark',
            lastName: 'Hughes',
            product: {
                name: 'Latte', price: 6, quantity: 4, total: 24
            }
        },
        {
            firstName: 'Fred',
            lastName: 'Lochte',
            product: {
                name: 'Cappucino', price: 6, quantity: 4, total: 24
            }
        },
        {
            firstName: 'Malcolm',
            lastName: 'Franclin',
            product: {
                name: 'Espresso', price: 6, quantity: 4, total: 24
            }
        }
    ],
    columns: [
        {
            label: 'First Name', dataField: 'firstName', cellsVerticalAlign: 'center', rowSpan: (value) => {
                if (value === "Andrew") {
                    return 2;
                }
                else if (value === "Nancy") {
                    return 3;
                }
            }
        },
        { label: 'Last Name', dataField: 'lastName' },
        { label: 'Product', dataField: 'productName' },
        {
            label: 'Quantity', dataField: 'quantity', cellsAlign: 'right'
        },
        { label: 'Unit Price', dataField: 'price', cellsAlign: 'right', cellsFormat: 'c2' }
    ]
}

The CSS applied to the spanned cells is:

smart-grid-cell[rowSpan] {
    background: #0179D4;
    color: white;
}

Note that when you apply sorting or filtering along with row spanning, you should be take into account which rows you span.
For example, if in the above example, Nancy and Andrew were to subsequent rows, the result will look strange.

An alternative way to merge cells is by using the rowSpan property of the cell object.

For example this spans the first cell of the second row.

rows[1].cells[0].rowSpan = 2;

Merge cells with equal values

If we have a data source with equal values in a column, we may want to merge them. Let's look at this data source:

[{
 "id": "1",
 "name": "Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "370",
 "totalfat": "16g",
 "protein": "14g"
 }, {
 "id": 2,
 "name": "Peppermint Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "440",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "id": "3",
 "name": "Salted Caramel Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "450",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "id": "4",
 "name": "White Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "420",
 "totalfat": "16g",
 "protein": "12g"
}, {
 "id": "5",
 "name": "Caffe Americano",
 "type": "Espresso Beverage",
 "calories": "15",
 "totalfat": "0g",
 "protein": "1g"
}, {
 "id": "6",
 "name": "Caffe Latte",
 "type": "Espresso Beverage",
 "calories": "190",
 "totalfat": "7g",
 "protein": "12g"
}, {
 "id": "7",
 "name": "Caffe Mocha",
 "type": "Espresso Beverage",
 "calories": "330",
 "totalfat": "15g",
 "protein": "13g"
}, {
 "id": "8",
 "name": "Cappuccino",
 "type": "Espresso Beverage",
 "calories": "120",
 "totalfat": "4g",
 "protein": "8g"
}, {
 "id": "9",
 "name": "Caramel Brulee Latte",
 "type": "Espresso Beverage",
 "calories": "420",
 "totalfat": "9g",
 "protein": "8g"
}, {
 "id": "10",
 "name": "Caramel Macchiato",
 "type": "Espresso Beverage",
 "calories": "240",
 "totalfat": "11g",
 "protein": "10g"
}, {
 "id": "11",
 "name": "Peppermint Hot Chocolate",
 "type": "Espresso Beverage",
 "calories": "440",
 "totalfat": "10g",
 "protein": "13g"
}, {
 "id": "12",
 "name": "Cinnamon Dolce Latte",
 "type": "Espresso Beverage",
 "calories": "260",
 "totalfat": "6g",
 "protein": "10g"
}, {
 "id": "13",
 "name": "Eggnog Latte",
 "type": "Espresso Beverage",
 "calories": "460",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "id": "14",
 "name": "Espresso",
 "type": "Espresso Beverage",
 "calories": "5",
 "totalfat": "1g",
 "protein": "1g"
}, {
 "id": "15",
 "name": "Espresso Con Panna",
 "type": "Espresso Beverage",
 "calories": "30",
 "totalfat": "1g",
 "protein": "0g"
}, {
 "id": "16",
 "name": "Espresso Macchiato",
 "type": "Espresso Beverage",
 "calories": "100",
 "totalfat": "1g",
 "protein": "0g"
}, {
 "id": "17",
 "name": "Flavored Latte",
 "type": "Espresso Beverage",
 "calories": "250",
 "totalfat": "6g",
 "protein": "12g"
}, {
 "id": "18",
 "name": "Gingerbread Latte",
 "type": "Espresso Beverage",
 "calories": "320",
 "totalfat": "13g",
 "protein": "12g"
}, {
 "id": "19",
 "name": "White Chocolate Mocha",
 "type": "Espresso Beverage",
 "calories": "470",
 "totalfat": "18g",
 "protein": "15g"
}, {
 "id": 20,
 "name": "Skinny Peppermint Mocha",
 "type": "Espresso Beverage",
 "calories": 130,
 "totalfat": "15g",
 "protein": "13g"
}, {
 "id": "21",
 "name": "Skinny Flavored Latte",
 "type": "Espresso Beverage",
 "calories": "120",
 "totalfat": "0g",
 "protein": "12g"
}, {
 "id": "22",
 "name": "Pumpkin Spice Latte",
 "type": "Espresso Beverage",
 "calories": "380",
 "totalfat": "13g",
 "protein": "14g"
}, {
 "id": "23",
 "name": "Caffe Vanilla Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "310",
 "totalfat": "3g",
 "protein": "3g"
}, {
 "id": "24",
 "name": "Caffe Vanilla Frappuccino Light",
 "type": "Frappuccino Blended Beverage",
 "calories": "180",
 "totalfat": "0g",
 "protein": "3g"
}, {
 "id": "25",
 "name": "Caramel Brulee Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "410",
 "totalfat": "13g",
 "protein": "4g"
}, {
 "id": "26",
 "name": "Caramel Brulee Frappuccino Light",
 "type": "Frappuccino Blended Beverage",
 "calories": "190",
 "totalfat": "0g",
 "protein": "3g"
}, {
 "id": "27",
 "name": "Eggnog Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "420",
 "totalfat": "18g",
 "protein": "7g"
}, {
 "id": "28",
 "name": "Mocha Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "400",
 "totalfat": "15g",
 "protein": "5g"
}, {
 "id": "29",
 "name": "Tazo Green Tea Creme Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "430",
 "totalfat": "16g",
 "protein": "6g"
}]

We have rows with equal beverage type. To merge these cells, we will need to dynamically calculate the rowSpan. In the sample code below, the 'rowSpan' function is called for each item in the 'Beverage Type' column. To calculate the row span, we traverse all rows and find these which match the cell value.

componentProps = {
	dataSourceSettings: {
		dataFields: [
			{ name: 'name', dataType: 'string' },
			{ name: 'type', dataType: 'string' },
			{ name: 'calories', dataType: 'int' },
			{ name: 'totalfat', dataType: 'string' },
			{ name: 'protein', dataType: 'string' }
		]
	},
	dataSource: '../../../scripts/beverages.json',
	columns:
		[
			{ label: 'Name', dataField: 'name', width: 150 },
			{
				label: 'Beverage Type', dataField: 'type', width: 200, rowSpan: (value, row) => {
					let itemsCount = 0;
					this.grid.forEachRow((record) => {
						if (record.data['type'] === value) {
							itemsCount++;
						}
					});

					return itemsCount;
				}
			},
			{ label: 'Calories', dataField: 'calories', width: 150 },
			{ label: 'Total Fat', dataField: 'totalfat', width: 120 },
			{ label: 'Protein', dataField: 'protein' }
		]
}

Row span based on row index

The following code applies row span depending on the value of the row index.

columns: [
	{
		label: 'First Name', dataField: 'firstName', rowSpan: (value, rowIndex, data) => {
			if (rowIndex % 2 === 0) {
				return 2;
			}
		}
	},
	{ label: 'Last Name', dataField: 'lastName'},
	{ label: 'Product', dataField: 'productName'},
	{ label: 'Order Date', cellsFormat: 'MM/dd/yyyy', dataField: 'date', columnGroup: 'order' },
	{ label: 'Quantity', dataField: 'quantity', columnGroup: 'order' },
	{ label: 'Unit Price', dataField: 'price', cellsFormat: 'c2', columnGroup: 'order' }
]

For AI tooling

Developer Quick Reference

Topic: grid-row-span Component: Grid Framework: Angular

Main methods: forEachRow()

Common config keys: dataSource, columns

Implementation Notes

Compatibility: Angular 17+ (standalone) API access pattern: @ViewChild(...) + this.component.method()

Lifecycle guidance: Bind inputs declaratively and call imperative API through @ViewChild in/after ngAfterViewInit.

Common pitfalls:

Using @ViewChild API too early (before view init).
Omitting standalone imports for Smart modules in @Component.imports.
Type mismatches between configuration fields and template bindings.

Validation checklist:

Ensure module import exists in standalone component imports array.
Use typed @ViewChild(..., { read: ComponentType }).
Call imperative methods after view initialization.

Complex Components

Core Components

Grid for Angular

Grid Row Span

Enable Row Span

Merge cells with equal values

Row span based on row index

Developer Quick Reference

Implementation Notes