New to Kendo UI for Angular? Start a free 30-day trial

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-widthNumber0px0px
Description
The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-widthNumber1px1px
Description
The width of horizontal border of table cells.
$kendo-table-cell-padding-xStringk-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-yStringk-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-weightStringvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)
Description
Font weight of the table header cells.
$kendo-table-sizesMap( 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-bgStringvar( --kendo-component-bg, initial )var(--kendo-component-bg, initial)
Description
Background color of tables.
$kendo-table-textStringvar( --kendo-component-text, initial )var(--kendo-component-text, initial)
Description
Text color of tables.
$kendo-table-borderStringvar( --kendo-component-border, initial )var(--kendo-component-border, initial)
Description
Border color of tables.
$kendo-table-header-bgString$kendo-table-bgvar(--kendo-component-bg, initial)
Description
Background color of table headers.
$kendo-table-header-textStringif($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-borderString$kendo-table-bordervar(--kendo-component-border, initial)
Description
Border color of table headers.
$kendo-table-sticky-header-textString$kendo-list-header-textvar(--kendo-color-primary, #0078d4)
Description
Text color of the sticky table header.
$kendo-table-sticky-header-bgString$kendo-list-header-bgvar(--kendo-color-app-surface, #ffffff)
Description
Background color of the sticky table header.
$kendo-table-sticky-header-borderString$kendo-list-header-borderinherit
Description
Border color of the sticky table header.
$kendo-table-sticky-header-shadowString$kendo-list-header-shadowvar(--kendo-elevation-3, none)
Description
Shadow of the sticky table header.
$kendo-table-footer-bgString$kendo-table-header-bgvar(--kendo-component-bg, initial)
Description
Background color of table footers.
$kendo-table-footer-textString$kendo-table-header-textvar(--kendo-color-on-app-surface, #323130)
Description
Text color of table footers.
$kendo-table-footer-borderString$kendo-table-header-bordervar(--kendo-component-border, initial)
Description
Border color of table footers.
$kendo-table-group-row-bgString$kendo-table-header-bgvar(--kendo-component-bg, initial)
Description
Background color of group rows in table.
$kendo-table-group-row-textString$kendo-table-header-textvar(--kendo-color-on-app-surface, #323130)
Description
Text color of group rows in table.
$kendo-table-group-row-borderString$kendo-table-header-bordervar(--kendo-component-border, initial)
Description
Border color of group rows in table.
$kendo-table-group-label-textString$kendo-list-bgvar(--kendo-component-bg, transparent)
Description
Text color of group label in table.
$kendo-table-group-label-bgString$kendo-list-textvar(--kendo-component-text, inherit)
Description
Background color of group label in table.
$kendo-table-alt-row-bgStringinitialinitial
Description
Background color of alternating rows in table.
$kendo-table-alt-row-textString$kendo-table-textvar(--kendo-component-text, initial)
Description
Text color of alternating rows in table.
$kendo-table-alt-row-borderString$kendo-table-bordervar(--kendo-component-border, initial)
Description
Border color of alternating rows in table.
$kendo-table-hover-bgStringvar( --kendo-hover-bg, inherit )var(--kendo-hover-bg, inherit)
Description
Background color of hovered rows in table.
$kendo-table-hover-textStringvar( --kendo-hover-text, inherit )var(--kendo-hover-text, inherit)
Description
Text color of hovered rows in table.
$kendo-table-hover-borderString$kendo-table-bordervar(--kendo-component-border, initial)
Description
Border color of hovered rows in table.
$kendo-table-focus-bgStringinheritinherit
Description
Background color of focused rows in table.
$kendo-table-focus-textStringinheritinherit
Description
Text color of focused rows in table.
$kendo-table-focus-borderStringinheritinherit
Description
Border color of focused rows in table.
$kendo-table-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)
Description
Box shadow of focused rows in table.
$kendo-table-selected-bgStringif($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-textString$kendo-table-textvar(--kendo-component-text, initial)
Description
Text color of selected rows in table.
$kendo-table-selected-borderString$kendo-table-bordervar(--kendo-component-border, initial)
Description
Border color of selected rows in table.
$kendo-table-selected-hover-bgStringif($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-textString$kendo-table-selected-textvar(--kendo-component-text, initial)
Description
Hover text color of selected rows in table.
$kendo-table-selected-hover-borderString$kendo-table-selected-bordervar(--kendo-component-border, initial)
Description
Hover border color of selected rows in table.

In this article

Not finding the help you need?