# Styling

[The Kendo UI for Vue Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid) enables you to style its columns, rows, and cells.

<CtaPanelOverview></CtaPanelOverview>

## Columns

To style the columns of the Grid, either:

* [Add custom cells for columns](https://www.telerik.com/kendo-vue-ui-develop/components/grid/styling/basics#adding-custom-cells), or
* [Add class names for `td` elements](https://www.telerik.com/kendo-vue-ui-develop/components/grid/styling/basics#adding-class-names).

### Adding Custom Cells

Adding a custom [`cell`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcolumnprops#cell) for the Grid columns allows you to change the appearance of that cell based on the provided value. By using the custom-cell approach, you can include icons, buttons, links, or any other HTML elements in the cell.

The following example demonstrates changing the background color of the `UnitPrice` cells based on the price value.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/styling/styling-cell/source.txt)

### Adding Custom Header Cells

Adding a custom [`headerCell`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcolumnprops#headercell) for the column header of the Grid allows you to change the appearance and to include icons, buttons, links, or any other HTML elements in that header.

The following example demonstrates changing the text color of the `ProductName` header cell.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/styling/styling-header-cell/source.txt)

### Adding Class Names

The [`className`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcolumnprops#className) property applies additional class to the `td` element and can be used for styling the background, text color, text alignment, and other styling options of the Grid.

```jsx
    { field: 'ProductName', title: 'Product Name', className: "product-name " },
```

```css
    .product-name {
        color: #F0FFFF;
        background-color: #888888;
    }
```

The following example demonstrates how to add a class name to the `ProductName` column and style the background and text color of that column.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/styling/styling-class-name/source.txt)

## Rows

To style the rows of the Grid, use the [`rowRender`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#rowrender) function. `rowRender` allows you to modify the appearance of the rows based on the provided values.

The following example demonstrates how to change the background color of all rows in the Grid based the `Discontinued` value of the records.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/styling/styling-row/source.txt)

## Individual Elements

You can individually style the elements of the Grid by using CSS.

> The Grid provides multiple elements that can be individually styled. Before you apply the styling options to the desired elements, inspect the element and use selectors of higher priority.

### Filter Icons

The following example demonstrates how to style the appearance of the filter icon in the Grid.

```css
    .k-dropdown-wrap>.k-select>.k-i-filter {
        color: white
    }
```

### Sort Icons

The following example demonstrates how to style the appearance of the sort ascending-order icon in the Grid.

```css
    .k-header>.k-link>.k-i-sort-asc-sm {
        color: red
    }
```

### Page Numbers

The following example demonstrates how to style the appearance of the page numbers in the Grid.

```css
    .k-pager-numbers .k-link, .k-pager-numbers .k-link:link {
        color: black;
    }
```

## Conditional Styling

You can use the custom-cell approach of the Grid to change the appearance of the cells on condition and based on the provided value.

The following example demonstrates how to change the background color of the `Total value` cells based on the numeric value.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/styling/styling-dynamic/source.txt)

## Suggested Links

* [GridProps](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops)
* [API Index of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-vue-ui-develop/components/styling/theme-builder)