Hi,

The onRowClass can be used as callback property of the Grid. Using the onRowClass function you can dynamically apply a CSS class(es) to an entire row. onRowClass should return a CSS class name string or an array of CSS class names divided by space.

You can set the callback initially:
window.Smart(‘#grid’, class {
get properties() {
return {
behavior: { columnResizeMode: ‘growAndShrink’ },
dataSource: new Smart.DataAdapter({
dataSource: window.generateData(1000),
dataFields: [
‘id: number’,
‘firstName: string’,
‘lastName: string’,
‘productName: string’,
‘quantity: number’,
‘price: number’,
‘total: number’
]
}),
onRowClass(index, data, row) {
if (index % 2 === 0) {
return ‘row-class-1’
}
if (data.firstName === ‘Andrew’) {
return ‘row-class-2’;
}
},
columns: [
{ label: ‘First Name’, dataField: ‘firstName’ },
{ label: ‘Last Name’, dataField: ‘lastName’ },
{ label: ‘Product’, dataField: ‘productName’ },
{ label: ‘Quantity’, dataField: ‘quantity’ },
{ label: ‘Unit Price’, dataField: ‘price’ },
{ label: ‘Total’, dataField: ‘total’ }
]
}
}
});

If you want to set it dynamically, you can do so:
const grid = document.querySelector(‘#grid’)

grid.onRowClass = (index, data, row) => {
if (index % 2 === 0) {
return ‘row-class-1’
}
if (data.firstName === ‘Andrew’) {
return ‘row-class-2’;
}
}

We have a topic for different ways of styling Grid rows, you can find it here:
https://www.htmlelements.com/docs/grid-styling-rows/

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/