Customizing Table
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-table-border-width | Number | 1px | 1px |
Description
The width of the table border. | |||
| $kendo-table-cell-vertical-border-width | Number | 0px | 0px |
Description
The width of vertical border of table cells. | |||
| $kendo-table-cell-horizontal-border-width | Number | 1px | 1px |
Description
The width of horizontal border of table cells. | |||
| $kendo-table-cell-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the cells in the table if no size is specified. | |||
| $kendo-table-cell-padding-y | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical padding of the cells in the table if no size is specified. | |||
| $kendo-table-header-font-weight | String | var( --kendo-font-weight-bold, normal ) | var(--kendo-font-weight-bold, normal) |
Description
Font weight of the table header cells. | |||
| $kendo-table-sizes | Map | (
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
)
) | (sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, inherit), cell-padding-x: var(--kendo-spacing-3, 0.75rem), cell-padding-y: var(--kendo-spacing-1\.5, 0.375rem), group-label-padding-x: var(--kendo-spacing-0\.5, 0.125rem), group-label-padding-y: var(--kendo-spacing-0\.5, 0.125rem), group-label-font-size: var(--kendo-font-size-xs, inherit)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, inherit), cell-padding-x: var(--kendo-spacing-3, 0.75rem), cell-padding-y: var(--kendo-spacing-3, 0.75rem), group-label-padding-x: var(--kendo-spacing-1, 0.25rem), group-label-padding-y: var(--kendo-spacing-1, 0.25rem), group-label-font-size: var(--kendo-font-size-xs, inherit)), lg: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, inherit), cell-padding-x: var(--kendo-spacing-3, 0.75rem), cell-padding-y: var(--kendo-spacing-3\.5, 0.875rem), group-label-padding-x: var(--kendo-spacing-1\.5, 0.375rem), group-label-padding-y: var(--kendo-spacing-1\.5, 0.375rem), group-label-font-size: var(--kendo-font-size-xs, inherit))) |
Description
The sizes of the table. | |||
| $kendo-table-bg | String | var( --kendo-component-bg, initial ) | var(--kendo-component-bg, initial) |
Description
Background color of tables. | |||
| $kendo-table-text | String | var( --kendo-component-text, initial ) | var(--kendo-component-text, initial) |
Description
Text color of tables. | |||
| $kendo-table-border | String | var( --kendo-component-border, initial ) | var(--kendo-component-border, initial) |
Description
Border color of tables. | |||
| $kendo-table-header-bg | String | $kendo-table-bg | var(--kendo-component-bg, initial) |
Description
Background color of table headers. | |||
| $kendo-table-header-text | String | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | var(--kendo-color-on-app-surface, #323130) |
Description
Text color of table headers. | |||
| $kendo-table-header-border | String | $kendo-table-border | var(--kendo-component-border, initial) |
Description
Border color of table headers. | |||
| $kendo-table-sticky-header-text | String | $kendo-list-header-text | var(--kendo-color-primary, #0078d4) |
Description
Text color of the sticky table header. | |||
| $kendo-table-sticky-header-bg | String | $kendo-list-header-bg | var(--kendo-color-app-surface, #ffffff) |
Description
Background color of the sticky table header. | |||
| $kendo-table-sticky-header-border | String | $kendo-list-header-border | inherit |
Description
Border color of the sticky table header. | |||
| $kendo-table-sticky-header-shadow | String | $kendo-list-header-shadow | var(--kendo-elevation-3, none) |
Description
Shadow of the sticky table header. | |||
| $kendo-table-footer-bg | String | $kendo-table-header-bg | var(--kendo-component-bg, initial) |
Description
Background color of table footers. | |||
| $kendo-table-footer-text | String | $kendo-table-header-text | var(--kendo-color-on-app-surface, #323130) |
Description
Text color of table footers. | |||
| $kendo-table-footer-border | String | $kendo-table-header-border | var(--kendo-component-border, initial) |
Description
Border color of table footers. | |||
| $kendo-table-group-row-bg | String | $kendo-table-header-bg | var(--kendo-component-bg, initial) |
Description
Background color of group rows in table. | |||
| $kendo-table-group-row-text | String | $kendo-table-header-text | var(--kendo-color-on-app-surface, #323130) |
Description
Text color of group rows in table. | |||
| $kendo-table-group-row-border | String | $kendo-table-header-border | var(--kendo-component-border, initial) |
Description
Border color of group rows in table. | |||
| $kendo-table-group-label-text | String | $kendo-list-bg | var(--kendo-component-bg, transparent) |
Description
Text color of group label in table. | |||
| $kendo-table-group-label-bg | String | $kendo-list-text | var(--kendo-component-text, inherit) |
Description
Background color of group label in table. | |||
| $kendo-table-alt-row-bg | String | initial | initial |
Description
Background color of alternating rows in table. | |||
| $kendo-table-alt-row-text | String | $kendo-table-text | var(--kendo-component-text, initial) |
Description
Text color of alternating rows in table. | |||
| $kendo-table-alt-row-border | String | $kendo-table-border | var(--kendo-component-border, initial) |
Description
Border color of alternating rows in table. | |||
| $kendo-table-hover-bg | String | var( --kendo-hover-bg, inherit ) | var(--kendo-hover-bg, inherit) |
Description
Background color of hovered rows in table. | |||
| $kendo-table-hover-text | String | var( --kendo-hover-text, inherit ) | var(--kendo-hover-text, inherit) |
Description
Text color of hovered rows in table. | |||
| $kendo-table-hover-border | String | $kendo-table-border | var(--kendo-component-border, initial) |
Description
Border color of hovered rows in table. | |||
| $kendo-table-focus-bg | String | inherit | inherit |
Description
Background color of focused rows in table. | |||
| $kendo-table-focus-text | String | inherit | inherit |
Description
Text color of focused rows in table. | |||
| $kendo-table-focus-border | String | inherit | inherit |
Description
Border color of focused rows in table. | |||
| $kendo-table-focus-shadow | List | $kendo-list-item-focus-shadow | inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c) |
Description
Box shadow of focused rows in table. | |||
| $kendo-table-selected-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 13%, transparent), k-get-theme-color-var( primary-20 )) | color-mix(in srgb, var(--kendo-color-primary, #0078d4) 13%, transparent) |
Description
Background color of selected rows in table. | |||
| $kendo-table-selected-text | String | $kendo-table-text | var(--kendo-component-text, initial) |
Description
Text color of selected rows in table. | |||
| $kendo-table-selected-border | String | $kendo-table-border | var(--kendo-component-border, initial) |
Description
Border color of selected rows in table. | |||
| $kendo-table-selected-hover-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 26%, transparent), k-get-theme-color-var( primary-30 )) | color-mix(in srgb, var(--kendo-color-primary, #0078d4) 26%, transparent) |
Description
Hover background color of selected rows in table. | |||
| $kendo-table-selected-hover-text | String | $kendo-table-selected-text | var(--kendo-component-text, initial) |
Description
Hover text color of selected rows in table. | |||
| $kendo-table-selected-hover-border | String | $kendo-table-selected-border | var(--kendo-component-border, initial) |
Description
Hover border color of selected rows in table. | |||
