New to Kendo UI for Vue? Start a free 30-day trial

Customizing Grid

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$grid-bgColor

$component-bg

#ffffff

Description
Background color of the grid component
$grid-textColor

$component-text

#212529

Description
Text color of the grid component
$grid-borderColor

$component-border

#dee2e6

Description
Border color of the grid component
$grid-header-bgColor

$header-bg

#f8f9fa

Description
Background color of grid header
$grid-header-textColor

$header-text

#212529

Description
Text color of grid header
$grid-header-borderColor

$header-border

#dee2e6

Description
Border color of grid header
$grid-header-gradientNull

$header-gradient

null

Description
Background gradient of grid header
$grid-footer-bgColor

$grid-header-bg

#f8f9fa

Description
Background color of grid footer
$grid-footer-textColor

$grid-header-text

#212529

Description
Text color of grid footer
$grid-footer-borderColor

$grid-header-border

#dee2e6

Description
Border color of grid footer
$grid-alt-bgColor

rgba( contrast-wcag( $grid-bg ), .04 )

rgba(0, 0, 0, 0.04)

Description
Background color of alternating rows in grid
$grid-alt-textNull

null

null

Description
Text color of alternating rows in grid
$grid-alt-borderNull

null

null

Description
Border color of alternating rows in grid
$grid-hovered-bgColor

rgba( contrast-wcag( $grid-bg ), .08 )

rgba(0, 0, 0, 0.08)

Description
Background color of hovered rows in grid
$grid-hovered-textNull

null

null

Description
Text color of hovered rows in grid
$grid-hovered-borderNull

null

null

Description
Border color of hovered rows in grid
$grid-selected-bgColor

rgba( $selected-bg, .25 )

rgba(13, 110, 253, 0.25)

Description
Background color of selected rows in grid
$grid-selected-textColor

$grid-text

#212529

Description
Text color of selected rows in grid
$grid-selected-borderColor

$grid-border

#dee2e6

Description
Border color of selected rows in grid

In this article

Not finding the help you need?