smart-html-elements

Grid Row Span

JavaScript

Angular

Vue

React

Grid for Vue

Vue 3 version using Smart custom elements and template refs.

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

<script setup>
import { onMounted, ref } from 'vue';
import 'smart-webcomponents/source/styles/smart.default.css';
import 'smart-webcomponents/source/modules/smart.grid.js';

const component = ref();
const componentProps = {
  // Copy this topic's JavaScript configuration here.
};

onMounted(() => {
  Object.assign(component.value, componentProps);
});
</script>

<template>
  <smart-grid ref="component"></smart-grid>
</template>

Use component.value 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'.

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

const 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;
					component.value.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: Vue

Main methods: forEachRow()

Common config keys: dataSource, columns

Implementation Notes

Compatibility: Vue 3+ API access pattern: const component = ref() + component.value.method()

Lifecycle guidance: Use template refs with

Complex Components

Core Components

Grid for Vue

Grid Row Span

Enable Row Span

Merge cells with equal values

Row span based on row index

Developer Quick Reference

Implementation Notes