Customizing Table

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	`1px`	`1px`
Description The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-width	Number	`0px`	`0px`
Description The width of horizontal border of table cells.
$kendo-table-font-size	Null	`null`	`null`
Description The font size of the table if no size is specified.
$kendo-table-line-height	Null	`null`	`null`
Description The line-height of the table if no size is specified.
$kendo-table-cell-padding-x	Null	`null`	`null`
Description The horizontal padding of the cells in the table if no size is specified.
$kendo-table-cell-padding-y	Null	`null`	`null`
Description The vertical padding of the cells in the table if no size is specified.
$kendo-table-sizes	Map	( sm: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-sm-cell-padding-x, cell-padding-y: $kendo-table-sm-cell-padding-y ), md: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-md-cell-padding-x, cell-padding-y: $kendo-table-md-cell-padding-y ), lg: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-lg-cell-padding-x, cell-padding-y: $kendo-table-lg-cell-padding-y ) )	`(sm: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.25rem), md: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.5rem), lg: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.625rem))`
Description The sizes of the table.
$kendo-table-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of tables.
$kendo-table-text	Color	`$kendo-component-text`	`#212529`
Description Text color of tables.
$kendo-table-border	Color	`$kendo-component-border`	`#dee2e6`
Description Border color of tables.
$kendo-table-header-bg	Color	`$kendo-component-header-bg`	`#f8f9fa`
Description Background color of table headers.
$kendo-table-header-text	Color	`$kendo-component-header-text`	`#212529`
Description Text color of table headers.
$kendo-table-header-border	Color	`$kendo-component-header-border`	`#dee2e6`
Description Border color of table headers.
$kendo-table-header-gradient	Null	`$kendo-component-header-gradient`	`null`
Description Gradient of table headers.
$kendo-table-footer-bg	Color	`$kendo-table-header-bg`	`#f8f9fa`
Description Background color of table footers.
$kendo-table-footer-text	Color	`$kendo-table-header-text`	`#212529`
Description Text color of table footers.
$kendo-table-footer-border	Color	`$kendo-table-header-border`	`#dee2e6`
Description Border color of table footers.
$kendo-table-group-row-bg	Color	`$kendo-table-header-bg`	`#f8f9fa`
Description Background color of group rows in table.
$kendo-table-group-row-text	Color	`$kendo-table-header-text`	`#212529`
Description Text color of group rows in table.
$kendo-table-group-row-border	Color	`$kendo-table-header-border`	`#dee2e6`
Description Border color of group rows in table.
$kendo-table-alt-row-bg	Color	`rgba( k-contrast-color( $kendo-table-bg ), .04 )`	`rgba(0, 0, 0, 0.04)`
Description Background color of alternating rows in table.
$kendo-table-alt-row-text	Null	`null`	`null`
Description Text color of alternating rows in table.
$kendo-table-alt-row-border	Null	`null`	`null`
Description Border color of alternating rows in table.
$kendo-table-hover-bg	Color	`rgba( k-contrast-color( $kendo-table-bg ), .08 )`	`rgba(0, 0, 0, 0.08)`
Description Background color of hovered rows in table.
$kendo-table-hover-text	Null	`null`	`null`
Description Text color of hovered rows in table.
$kendo-table-hover-border	Null	`null`	`null`
Description Border color of hovered rows in table.
$kendo-table-focus-bg	Null	`null`	`null`
Description Background color of focused rows in table.
$kendo-table-focus-text	Null	`null`	`null`
Description Text color of focused rows in table.
$kendo-table-focus-border	Null	`null`	`null`
Description Border color of focused rows in table.
$kendo-table-focus-shadow	List	`inset 0 0 0 2px rgba( $kendo-color-black, .08)`	`inset 0 0 0 2px rgba(0, 0, 0, 0.08)`
Description Box shadow of focused rows in table.
$kendo-table-selected-bg	Color	`rgba( $kendo-selected-bg, .25 )`	`rgba(13, 110, 253, 0.25)`
Description Background color of selected rows in table.
$kendo-table-selected-text	Color	`$kendo-table-text`	`#212529`
Description Text color of selected rows in table.
$kendo-table-selected-border	Null	`null`	`null`
Description Border color of selected rows in table.

Customizing Table

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!

Getting Started

Support Resources

Community

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Customizing Table

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!