CSS Styling

Overview

All elements of Tabulator have CSS classes set to make styling your tables as easy as possible.

CSS Classes

General

Class Element Description
tabulatorTabulator container element
tabulator-tableHolderContain table and scroll bars
tabulator-tableContain table rows
tabulator-loaderAjax loader message holder
tabulator-loader-msgAjax loader message
tabulator-loadingApplied to .tabulator-load-msg to style a loading message
tabulator-errorApplied to .tabulator-load-msg to style an error message
tabulator-placeholderThe containing element for the empty table placeholder
tabulator-movingApplied to rows and columns when they are being moved
tabulator-block-selectApplied to the .tabulator element when the mouse is dragging to prevent accidental text selection
tabulator-movingApplied to rows and columns when they are being moved
tabulator-movingrow-sendingApplied to table when it is sending a row to another table
tabulator-movingrow-receivingApplied to table when it is receiving a row from another table

Columns & Headers

Class Element Description
tabulator-headerTable header element
tabulator-headersHold all column headers inside table header
tabulator-calcs-holderHold column calculations row, appears in both header and footer
tabulator-colColumn header (in header row)
tabulator-col-contentHolds the contents for the column header
tabulator-col-titleHolds the text for the column header title
tabulator-col-groupMarks a column header as a group that contains other columns
tabulator-col-group-colsHolds the column headers contained in a column group
tabulator-handleInvisible resize handle on the right of each column header
tabulator-title-editorThe input box used for editing titles when the editableTitle option is set
tabulator-header-filterThe containing element for the header filter elements, when the headerFilter option is set
tabulator-sortableApplied to columns with header sorting enabled
tabulator-frozenThe containing element for all frozen columns
tabulator-frozen-leftApplied to frozen columns on the left edge of the table
tabulator-frozen-rightApplied to frozen columns on the right edge of the table
tabulator-row-resize-handleContainer for frozen rows in the header
tabulator-col-verticalApplied to a column header to roate the text to a vertical orientation
tabulator-col-vertical-flipapplied to a vertical column header to flip the text round 180 degrees

Rows

Class Element Description
tabulator-rowRow of table
tabulator-row-oddOdd numbered row
tabulator-row-evenEven numbered row
tabulator-cellData cell
tabulator-selectableStyling for selectable rows
tabulator-unselectableStyling for unselectable rows
tabulator-selectedCurrently selected row
tabulator-editingApplied to cells being edited and the rows that contain them
tabulator-validation-failApplied to cells being edited that have failed validation
tabulator-groupThe header element for a row group
tabulator-group-visibleApplied to .tabulator-group when the group is visible
tabulator-group-level-XApplied to .tabulator-group to denote its level in multi level grouping, the X is replaced with the number of that grouping level
tabulator-calcsA row that contains column calculations instead of data
tabulator-calcs-topA column calculations row at the top of a group
tabulator-calcs-bottomA column calculations row at the bottom of a group
tabulator-row-handleA cell that is setup as a row handle
tabulator-row-handle-boxcontaining element for the row handle icon
tabulator-row-handle-barone of the bars in the row handle icon
tabulator-row-resize-handleInvisible resize handle on the top and bottom of each row
tabulator-responsive-collapseElement to hold collapsed column data in responsive layout mode

Pagination

Class Element Description
tabulator-footerTabulator footer element
tabulator-paginatorContains the pagination controls
tabulator-pagesContains individual page buttons
tabulator-pagePage selection button

SASS Variables

The packaged SASS theme files is included in the project with a number of setup variables to make theming a table even easier.

Overriding Default Variables

All SCSS file variables use the !default property so you can override them from outside the imported source file.

$backgroundColor:#f00; //change background color of table

@import  "tabulator_simple"; //import table scss

General

Variable Default Value Description
backgroundColor#888The background colour of the tabulator element
borderColor#999The border colour of the tabulator element
textSize14The text size for all text in the tabulator

Columns & Headers

Variable Default Value Description
headerBackgroundColor#e6e6e6The background colour for header cells
headerTextColor#555The header cells text colour
headerBorderColor#aaaThe header cells border colour
headerSeperatorColor#999The header row bottom border colour
headerMargin4The size in pixels for the header cells margin
sortArrowActive#666The colour of the column sorter arrow when sorting is active on a column
sortArrowInactive#bbbThe colour of the column sorter arrow when sorting is not active on a column

Rows

Variable Default Value Description
rowBackgroundColor#fffThe background colour of the table rows
rowAltBackgroundColor#e0e0e0The background colour of the even numbered table rows
rowBorderColor#fffThe table row border colour
rowTextColor#333The table row text colour
rowHoverBackground#bbbThe table row background colour when hovered over.
rowSelectedBackground#9ABCEAThe table row background colour when selected.
rowSelectedBackgroundHover#769BCCThe table row background colour when selected and hovered over.
editBoxColor#1D68CDThe border colour of a cell being edited.

Pagination

Variable Default Value Description
footerBackgroundColor#e6e6e6The footer background colour
footerTextColor#555The footer text colour
footerBorderColor#aaaThe footer buttons border colour
footerSeperatorColor#999The footer element top border colour
footerActiveColor#d00The text colour for axtive pagination buttons