# Angular Data Grid Styling Rows

The [Angular Grid](https://www.telerik.com/kendo-angular-ui-develop/components/grid) enables you to customize the appearance of the rows depending on some conditions.

To style the rows of the Grid, use the [`rowClass`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent#rowclass) function. The callback is executed for each row and allows you to insert custom CSS classes.

> To learn more, check the article on how to [apply a background color to column cells by using the `rowClass` function](https://www.telerik.com/kendo-angular-ui-develop/components/grid/styling-and-appearance/cells#highlighting-specific-row-cells).

The following example uses a banking transaction log. Rows are highlighted in green for **Completed** transactions, yellow for **Pending** ones, and red for **Failed** or **Cancelled** entries.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/styling/cells/background-color/source.txt)

## Disabling Rows Conditionally

To prevent the user from interacting with specific rows, you can apply the `k-disabled` class to the rows.

The following example uses a healthcare appointment schedule. Rows for **Cancelled** and **No-Show** appointments are disabled using the `k-disabled` class, preventing user interaction with those records.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/styling/cells/disabled-rows/source.txt)

## Styling Rows with Sticky Columns

When the Grid has [sticky columns](https://www.telerik.com/kendo-angular-ui-develop/components/grid/columns/sticky) configured, those columns apply the `k-grid-content-sticky` CSS class to their cells. This class sets its own background color for sticky cells, which overrides any custom row background color you apply through `rowClass`.

To ensure your custom row colors also apply to sticky column cells, increase the CSS specificity by adding the `.k-grid-content-sticky` selector alongside your row selector:

```css
#my-grid tr.gold,
#my-grid tr.gold .k-grid-content-sticky {
    background-color: #ffba80;
}
```

The following example uses a global shipment tracking log. Rows are highlighted in green for **Delivered** shipments, yellow for **Delayed** ones, and red for **Exception** or **Returned** shipments. The tracking number and status columns remain sticky while scrolling horizontally.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/styling/cells/sticky-columns/source.txt)

## Suggested Links

* [Row and Cell Highlighting](https://www.telerik.com/kendo-angular-ui-develop/components/grid/rows/highlighting)
* [API Reference of the GridComponent](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent)
* [API Index of the Grid](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-angular-ui-develop/components/styling/theme-builder)