Custom Theming

The following chart depicts all the SASS variables that are publicly exposed with a brief description. By overriding those variables, can make a new data table out of the box.

VariableDefault ValueDescription
$data-table-icon-color#333Icon color used in data table ( Row Expand, Refresh Table, Column Selector Menu, Table Header Sorting, Pagination )
$data-table-icon-close-color#d32f2fIcon color of remove search criteria in table header
$data-table-loading-animation-color#333Data table Loading spinner icon color
$delete-color#d32f2fBorder color of the invalid data input in pagination input boxes
$data-table-container-border.07rem solid #dddBorder width, style and color of the data table outer-edge
$data-table-container-border-radius-value0Specify the radius value of the data table outer-edge
$data-table-container-box-shadow-valuenoneBox shadow value of the data table
$data-table-top-header-background#dddData table main title container background color
$data-table-top-header-border#cccBottom Border color of the main title container
$data-table-top-header-text-color#222Text color of the main title
$data-table-dropdown-background#fffBackground color of the Data table column selector menu
$data-table-dropdown-box-shadow-value2px 2px 10px rgba(0, 0, 0, .2)Box shadow value of the data table column selector menu
$data-table-dropdown-border#cccBorder color of Data table column selector menu
$data-table-dropdown-border-radius-value#cccSpecify the radius of the outer-edge of data table column selector menu
$data-table-dropdown-heading-background#f5f5f5Background color of the data table column selector menu title
$data-table-dropdown-heading-text-color#333Text color of the data table column selector menu title
$data-table-dropdown-text-color#333Text color of the data table column selector menu items
$data-table-content-header-background#f1f1f1Background color of the data table column title container and column filter container
$data-table-content-header-border#dddBorder color of the data table column title container and column filter container
$data-table-content-header-text-color#333Text color of the data table column title container and column filter container
$data-table-input-background#fffBackground color of the data table column filter input boxes
$data-table-input-border#dddBorder color of the data table column filter input boxes
$data-table-input-border-radius-value0Specify the radius of the outer-edge of data table column filter input boxes
$data-table-input-text-color#333Text color of the data table column filter input boxes
$data-table-content-background#f1f1f1Main background color of the data table rows container
$data-table-border#dddBorder color of the data table rows
$data-table-row-background#cccMain background color of the data table rows
$data-table-cell-text-color#333Main text color of the data table cells
$data-table-row-hover-background#333Mouse over background color of the data table rows
$data-table-row-hover-cell-text-color#333Text color of the data table cells when mouse over each row
$data-table-odd-row-background#fffBackground color of the data table odd number rows
$data-table-odd-row-cell-text-color#333Text color of the data table odd number rows
$data-table-odd-row-hover-background#eeeMouse over background color of the data table odd number rows
$data-table-odd-row-hover-cell-text-color#333Mouse over text color of the data table odd number rows
$data-table-even-row-background#f5f5f5Background color of the data table even number rows
$data-table-even-row-cell-text-color#333Text color of the data table even number rows
$data-table-even-row-hover-background#eeeMouse over background color of the data table even number rows
$data-table-even-row-hover-cell-text-color#333Mouse over text color of the data table even number rows
$data-table-selected-row-background#a8c2f1Background color of the data table selected row
$data-table-selected-row-cell-text-color#333Text color of the data table selected row
$data-table-selected-row-hover-background#a8c2f1Mouse over background color of the data table selected row
$data-table-selected-row-hover-cell-text-color#333Mouse over text color of the data table selected row
$data-table-loading-window-background#f1f1f1Background color of the data table loading spinner window
$data-table-loading-window-border#cccBorder color of the data table loading spinner window
$data-table-no-records-main-heading-message-text-color#3b78e7Main Heading Text color of the data table no records message window
$data-table-no-records-sub-heading-message-text-color#333Sub Heading Text color of the data table no records message window
$data-table-no-records-button-background#fffbackground color of the data table no records message window reload button
$data-table-no-records-button-border#3b78eborder color of the data table no records message window reload button
$data-table-no-records-button-text-color#3b78e7text color of the data table no records message window reload button
$data-table-no-records-button-border-radius-value.2remSpecify the radius of the outer-edge of data table no records message window reload button
$data-table-pagination-background#fffMain background color of the pagination container
$data-table-pagination-border#dddBorder color of the pagination container
$data-table-pagination-range-text-color#333Text color of the pagination range
$data-table-pagination-range-value-text-color#3b78e7Text color of the pagination range values
$data-table-pagination-input-border#333Border color of the pagination input boxes ( Limit, Current Page Number )
$data-table-pagination-input-label-border#dddBorder color of the pagination input label ( Total number of pages )
$data-table-pagination-input-label-text-color#333text color of the pagination input label ( Total number of pages )
$data-table-pagination-input-background#fffBackground color of the pagination input boxes ( Limit, Current Page Number )
$data-table-pagination-input-text-color#333Text color of the pagination input boxes ( Limit, Current Page Number )
$data-table-pagination-action-button-background#f5f5f5Background color of the data table pagination Previous, First, Next, Last buttons
$data-table-pagination-action-button-background-hover#f5f5f5Mouse over background color of the data table pagination Previous, First, Next, Last buttons
$data-table-pagination-action-button-border#cccBorder color of the data table pagination Previous, First, Next, Last buttons
$data-table-pagination-action-button-border-radius-value0Border radius value of the data table pagination Previous, First, Next, Last buttons outer-edge
$data-table-pagination-action-button-hover-border#fffMouse over border color of the data table pagination Previous, First, Next, Last buttons
$data-table-pagination-disabled-action-button-background#f5f5f5Background color of the data table pagination Previous, First, Next, Last buttons when disabled state
$data-table-pagination-disabled-action-button-border#cccBorder color of the data table pagination Previous, First, Next, Last buttons when disabled state
$data-table-pagination-first-page-action-button-background#f5f5f5Background color of the data table pagination first page navigation button
$data-table-pagination-first-page-action-button-background-hover#f5f5f5Mouse over background color of the data table pagination first page navigation button
$data-table-pagination-first-page-action-button-border#cccborder color of the data table pagination first page navigation button
$data-table-pagination-first-page-action-button-hover-border#cccMouse over border color of the data table pagination first page navigation button
$data-table-pagination-previous-page-action-button-background#f5f5f5Background color of the data table pagination previous page navigation button
$data-table-pagination-previous-page-action-button-background-hover#f5f5f5Mouse over background color of the data table pagination previous page navigation button
$data-table-pagination-previous-page-action-button-border#cccborder color of the data table pagination previous page navigation button
$data-table-pagination-previous-page-action-button-hover-border#cccMouse over border color of the data table pagination previous page navigation button
$data-table-pagination-next-page-action-button-background#cccBackground color of the data table pagination next page navigation button
$data-table-pagination-next-page-action-button-background-hover#cccMouse over background color of the data table pagination next page navigation button
$data-table-pagination-next-page-action-button-border#cccborder color of the data table pagination next page navigation button
$data-table-pagination-next-page-action-button-hover-border#cccMouse over border color of the data table pagination next page navigation button
$data-table-pagination-last-page-action-button-background#cccBackground color of the data table pagination last page navigation button
$data-table-pagination-last-page-action-button-background-hover#cccMouse over background color of the data table pagination last page navigation button
$data-table-pagination-last-page-action-button-border#cccborder color of the data table pagination last page navigation button
$data-table-pagination-last-page-action-button-hover-border#cccMouse over border color of the data table pagination last page navigation button
Themes
API Doc for Data Table Custom Theming
  • Content