Customizing Table

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-table-border-widthNumber1px1px
Description
The width of the table border.
$kendo-table-cell-vertical-border-widthNumber1px1px
Description
The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-widthNumber0px0px
Description
The width of horizontal border of table cells.
$kendo-table-font-sizeNullnullnull
Description
The font size of the table if no size is specified.
$kendo-table-line-heightNullnullnull
Description
The line-height of the table if no size is specified.
$kendo-table-cell-padding-xNullnullnull
Description
The horizontal padding of the cells in the table if no size is specified.
$kendo-table-cell-padding-yNullnullnull
Description
The vertical padding of the cells in the table if no size is specified.
$kendo-table-sizesMap( sm: ( font-size: var( --kendo-font-size, inherit ), line-height: var( --kendo-line-height, normal ), cell-padding-x: $kendo-table-sm-cell-padding-x, cell-padding-y: $kendo-table-sm-cell-padding-y ), md: ( font-size: var( --kendo-font-size, inherit ), line-height: var( --kendo-line-height, normal ), cell-padding-x: $kendo-table-md-cell-padding-x, cell-padding-y: $kendo-table-md-cell-padding-y ), lg: ( font-size: var( --kendo-font-size, inherit ), line-height: var( --kendo-line-height, normal ), cell-padding-x: $kendo-table-lg-cell-padding-x, cell-padding-y: $kendo-table-lg-cell-padding-y ) )
  • sm: "font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)","cell-padding-x":"var(--kendo-spacing-2, 0.5rem)","cell-padding-y":"var(--kendo-spacing-1, 0.25rem)"
  • md: "font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)","cell-padding-x":"var(--kendo-spacing-3, 0.75rem)","cell-padding-y":"var(--kendo-spacing-2, 0.5rem)"
  • lg: "font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)","cell-padding-x":"var(--kendo-spacing-2, 0.5rem)","cell-padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)"
Description
The sizes of the table.
$kendo-table-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
Background color of tables.
$kendo-table-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
Text color of tables.
$kendo-table-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
Border color of tables.
$kendo-table-header-bgString$kendo-component-header-bgvar(--kendo-color-surface, #fafafa)
Description
Background color of table headers.
$kendo-table-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
Text color of table headers.
$kendo-table-header-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
Border color of table headers.
$kendo-table-header-gradientNull$kendo-component-header-gradientnull
Description
Gradient of table headers.
$kendo-table-footer-bgString$kendo-table-header-bgvar(--kendo-color-surface, #fafafa)
Description
Background color of table footers.
$kendo-table-footer-textString$kendo-table-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
Text color of table footers.
$kendo-table-footer-borderString$kendo-table-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
Border color of table footers.
$kendo-table-group-row-bgString$kendo-table-header-bgvar(--kendo-color-surface, #fafafa)
Description
Background color of group rows in table.
$kendo-table-group-row-textString$kendo-table-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
Text color of group rows in table.
$kendo-table-group-row-borderString$kendo-table-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
Border color of group rows in table.
$kendo-table-alt-row-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-legacy( $kendo-table-bg ), .04 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent)
Description
Background color of alternating rows in table.
$kendo-table-alt-row-textNullnullnull
Description
Text color of alternating rows in table.
$kendo-table-alt-row-borderNullnullnull
Description
Border color of alternating rows in table.
$kendo-table-hover-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 11%, transparent), k-color-darken($kendo-table-bg, 7%))color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent)
Description
Background color of hovered rows in table.
$kendo-table-hover-textNullnullnull
Description
Text color of hovered rows in table.
$kendo-table-hover-borderNullnullnull
Description
Border color of hovered rows in table.
$kendo-table-focus-bgNullnullnull
Description
Background color of focused rows in table.
$kendo-table-focus-textNullnullnull
Description
Text color of focused rows in table.
$kendo-table-focus-borderNullnullnull
Description
Border color of focused rows in table.
$kendo-table-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
Box shadow of focused rows in table.
$kendo-table-selected-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)
Description
Background color of selected rows in table.
$kendo-table-selected-textNullnullnull
Description
Text color of selected rows in table.
$kendo-table-selected-borderNullnullnull
Description
Border color of selected rows in table.

In this article

Not finding the help you need?