New to Kendo UI for Vue? Start a free 30-day trial
Customizing Table
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-table-border-width | 1px | ||
Description
The width of the table border. | |||
| $kendo-table-cell-vertical-border-width | 0px | ||
Description
The width of vertical border of table cells. | |||
| $kendo-table-cell-horizontal-border-width | 1px | ||
Description
The width of horizontal border of table cells. | |||
| $kendo-table-cell-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the cells in the table if no size is specified. | |||
| $kendo-table-cell-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the cells in the table if no size is specified. | |||
| $kendo-table-header-font-weight | var( --kendo-font-weight-bold, normal ) | ||
Description
Font weight of the table header cells. | |||
| $kendo-table-sizes | (
sm: (
font-size: var( --kendo-font-size, inherit ),
line-height: var( --kendo-line-height, inherit ),
cell-padding-x: $kendo-table-sm-cell-padding-x,
cell-padding-y: $kendo-table-sm-cell-padding-y,
group-label-padding-x: $kendo-list-item-group-label-sm-padding-x,
group-label-padding-y: $kendo-list-item-group-label-sm-padding-y,
group-label-font-size: $kendo-list-item-group-label-sm-font-size
),
md: (
font-size: var( --kendo-font-size, inherit ),
line-height: var( --kendo-line-height, inherit ),
cell-padding-x: $kendo-table-md-cell-padding-x,
cell-padding-y: $kendo-table-md-cell-padding-y,
group-label-padding-x: $kendo-list-item-group-label-md-padding-x,
group-label-padding-y: $kendo-list-item-group-label-md-padding-y,
group-label-font-size: $kendo-list-item-group-label-md-font-size
),
lg: (
font-size: var( --kendo-font-size, inherit ),
line-height: var( --kendo-line-height, inherit ),
cell-padding-x: $kendo-table-lg-cell-padding-x,
cell-padding-y: $kendo-table-lg-cell-padding-y,
group-label-padding-x: $kendo-list-item-group-label-lg-padding-x,
group-label-padding-y: $kendo-list-item-group-label-lg-padding-y,
group-label-font-size: $kendo-list-item-group-label-lg-font-size
)
) | ||
Description
The sizes of the table. | |||
| $kendo-table-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of tables. | |||
| $kendo-table-text | var( --kendo-component-text, initial ) | ||
Description
Text color of tables. | |||
| $kendo-table-border | var( --kendo-component-border, initial ) | ||
Description
Border color of tables. | |||
| $kendo-table-header-bg | $kendo-table-bg | ||
Description
Background color of table headers. | |||
| $kendo-table-header-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
Text color of table headers. | |||
| $kendo-table-header-border | $kendo-table-border | ||
Description
Border color of table headers. | |||
| $kendo-table-sticky-header-text | $kendo-list-header-text | ||
Description
Text color of the sticky table header. | |||
| $kendo-table-sticky-header-bg | $kendo-list-header-bg | ||
Description
Background color of the sticky table header. | |||
| $kendo-table-sticky-header-border | $kendo-list-header-border | ||
Description
Border color of the sticky table header. | |||
| $kendo-table-sticky-header-shadow | $kendo-list-header-shadow | ||
Description
Shadow of the sticky table header. | |||
| $kendo-table-footer-bg | $kendo-table-header-bg | ||
Description
Background color of table footers. | |||
| $kendo-table-footer-text | $kendo-table-header-text | ||
Description
Text color of table footers. | |||
| $kendo-table-footer-border | $kendo-table-header-border | ||
Description
Border color of table footers. | |||
| $kendo-table-group-row-bg | $kendo-table-header-bg | ||
Description
Background color of group rows in table. | |||
| $kendo-table-group-row-text | $kendo-table-header-text | ||
Description
Text color of group rows in table. | |||
| $kendo-table-group-row-border | $kendo-table-header-border | ||
Description
Border color of group rows in table. | |||
| $kendo-table-group-label-text | $kendo-list-bg | ||
Description
Text color of group label in table. | |||
| $kendo-table-group-label-bg | $kendo-list-text | ||
Description
Background color of group label in table. | |||
| $kendo-table-alt-row-bg | initial | ||
Description
Background color of alternating rows in table. | |||
| $kendo-table-alt-row-text | $kendo-table-text | ||
Description
Text color of alternating rows in table. | |||
| $kendo-table-alt-row-border | $kendo-table-border | ||
Description
Border color of alternating rows in table. | |||
| $kendo-table-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
Background color of hovered rows in table. | |||
| $kendo-table-hover-text | var( --kendo-hover-text, inherit ) | ||
Description
Text color of hovered rows in table. | |||
| $kendo-table-hover-border | $kendo-table-border | ||
Description
Border color of hovered rows in table. | |||
| $kendo-table-focus-bg | inherit | ||
Description
Background color of focused rows in table. | |||
| $kendo-table-focus-text | inherit | ||
Description
Text color of focused rows in table. | |||
| $kendo-table-focus-border | inherit | ||
Description
Border color of focused rows in table. | |||
| $kendo-table-focus-shadow | $kendo-list-item-focus-shadow | ||
Description
Box shadow of focused rows in table. | |||
| $kendo-table-selected-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 13%, transparent), k-get-theme-color-var( primary-20 )) | ||
Description
Background color of selected rows in table. | |||
| $kendo-table-selected-text | $kendo-table-text | ||
Description
Text color of selected rows in table. | |||
| $kendo-table-selected-border | $kendo-table-border | ||
Description
Border color of selected rows in table. | |||
| $kendo-table-selected-hover-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 26%, transparent), k-get-theme-color-var( primary-30 )) | ||
Description
Hover background color of selected rows in table. | |||
| $kendo-table-selected-hover-text | $kendo-table-selected-text | ||
Description
Hover text color of selected rows in table. | |||
| $kendo-table-selected-hover-border | $kendo-table-selected-border | ||
Description
Hover border color of selected rows in table. | |||
