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
$kendo-grid-padding-xNumber

$kendo-table-md-cell-padding-x

0.5rem

Description
Horizontal padding of the grid.
$kendo-grid-padding-yNumber

$kendo-table-md-cell-padding-y

0.5rem

Description
Vertical padding of the grid.
$kendo-grid-header-padding-xNumber

$kendo-grid-padding-x

0.5rem

Description
Horizontal padding of the grid header.
$kendo-grid-header-padding-yNumber

$kendo-grid-padding-y

0.5rem

Description
Vertical padding of the grid header.
$kendo-grid-grouping-header-padding-xNumber

$kendo-grid-padding-y

0.5rem

Description
Horizontal padding of the grid grouping header.
$kendo-grid-grouping-header-padding-yNumber

$kendo-grid-grouping-header-padding-x

0.5rem

Description
Vertical padding of the grid grouping header.
$kendo-grid-cell-padding-xNumber

$kendo-grid-padding-x

0.5rem

Description
Horizontal padding of the grid cell.
$kendo-grid-cell-padding-yNumber

$kendo-grid-padding-y

0.5rem

Description
Vertical padding of the grid cell.
$kendo-grid-filter-cell-padding-xNumber

$kendo-grid-padding-y

0.5rem

Description
Horizontal padding of the grid filter cell.
$kendo-grid-filter-cell-padding-yNumber

$kendo-grid-filter-cell-padding-x

0.5rem

Description
Vertical padding of the grid filter cell.
$kendo-grid-edit-cell-padding-xNumber

$kendo-grid-cell-padding-x

0.5rem

Description
Horizontal padding of the grid edit cell.
$kendo-grid-edit-cell-padding-yNumber

5px

5px

Description
Vertical padding of the grid edit cell.
$kendo-grid-bgColor

$kendo-table-bg

#ffffff

Description
Background color of the grid component
$kendo-grid-textColor

$kendo-table-text

#212529

Description
Text color of the grid component
$kendo-grid-borderColor

$kendo-table-border

#dee2e6

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

$kendo-table-header-bg

#f8f9fa

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

$kendo-table-header-text

#212529

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

$kendo-table-header-border

#dee2e6

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

$kendo-table-header-gradient

null

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

$kendo-table-footer-bg

#f8f9fa

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

$kendo-table-footer-text

#212529

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

$kendo-table-footer-border

#dee2e6

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

$kendo-table-alt-row-bg

rgba(0, 0, 0, 0.04)

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

$kendo-table-alt-row-text

null

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

$kendo-table-alt-row-border

null

Description
Border color of alternating rows in grid
$kendo-grid-hover-bgColor

$kendo-table-hover-bg

rgba(0, 0, 0, 0.08)

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

$kendo-table-hover-text

null

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

$kendo-table-hover-border

null

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

$kendo-table-selected-bg

rgba(13, 110, 253, 0.25)

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

$kendo-table-selected-text

#212529

Description
Text color of selected rows in grid
$kendo-grid-selected-borderNull

$kendo-table-selected-border

null

Description
Border color of selected rows in grid

In this article

Not finding the help you need?