New to Kendo UI for Vue? Start a free 30-day trial
Customizing Grid
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $grid-bg | $table-bg | ||
Description Background color of the grid component | |||
| $grid-text | $table-color | ||
Description Text color of the grid component | |||
| $grid-border | $table-border-color | ||
Description Border color of the grid component | |||
| $grid-header-bg | $header-bg | ||
Description Background color of grid header | |||
| $grid-header-text | $header-text | ||
Description Text color of grid header | |||
| $grid-header-border | $header-border | ||
Description Border color of grid header | |||
| $grid-header-gradient | $header-gradient | ||
Description Background gradient of grid header | |||
| $grid-footer-bg | $grid-header-bg | ||
Description Background color of grid footer | |||
| $grid-footer-text | $grid-header-text | ||
Description Text color of grid footer | |||
| $grid-footer-border | $grid-header-border | ||
Description Border color of grid footer | |||
| $grid-alt-bg | $table-accent-bg | ||
Description Background color of alternating rows in grid | |||
| $grid-alt-text | null | null | |
Description Text color of alternating rows in grid | |||
| $grid-alt-border | null | null | |
Description Border color of alternating rows in grid | |||
| $grid-hovered-bg | $table-hover-bg | ||
Description Background color of hovered rows in grid | |||
| $grid-hovered-text | $table-hover-color | ||
Description Text color of hovered rows in grid | |||
| $grid-hovered-border | null | null | |
Description Border color of hovered rows in grid | |||
| $grid-selected-bg | rgba($selected-bg, .25) | rgba($selected-bg, .25) | |
Description Background color of selected rows in grid | |||
| $grid-selected-text | $grid-text | ||
Description Text color of selected rows in grid | |||
| $grid-selected-border | $grid-border | ||
Description Border color of selected rows in grid | |||
