Thank you for posting to Infragistics Community!

I have been looking at your question and I have prepared a small sample in order to demonstrate how such behavior could be achieved.

As mentioned in our official documentation, the cellClasses input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. Having this in mind, setting multiple cell classes is a possible approach, in order to achieve your requirement.

In the attached sample I am using cellClasses property and on columnInit event I am applying custom styling to the first row and to some cells as well, by assigning the object literal cellClasses to the column object.

More information about conditional styling, which you might consider helpful could be found here.

Additionally, another possible approach introduced in version 12.2.0, is using rowStyles or rowClasses properties for styling the first row like follows:

// component.html
<igx-grid #grid [data]=”data” [rowClasses]=”rowClasses”></igx-grid>

// component.ts 
public rowClasses = {
    firstRow: (row: RowType) => row.index === 0
};

firstRow is a CSS class, where the desired styling could be applied:

::ng-deep {
    .firstRow {
        background-color: #1fe249;
    }
}

Please test these approaches on your side and let me know if you need any further assistance.

Looking forward to hearing from you.

Sincerely,
Riva Ivanova
Entry Level Software Developer