CSS Styling

Overview

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

Class	Element Description
tabulator	Tabulator container element
tabulator-tableHolder	Contain table and scroll bars
tabulator-table	Contain table rows
tabulator-loader	Ajax loader message holder
tabulator-loader-msg	Ajax loader message
tabulator-loading	Applied to .tabulator-load-msg to style a loading message
tabulator-error	Applied to .tabulator-load-msg to style an error message
tabulator-placeholder	The containing element for the empty table placeholder
tabulator-moving	Applied to rows and columns when they are being moved
tabulator-block-select	Applied to the .tabulator element when the mouse is dragging to prevent accidental text selection
tabulator-moving	Applied to rows and columns when they are being moved
tabulator-movingrow-sending	Applied to table when it is sending a row to another table
tabulator-movingrow-receiving	Applied to table when it is receiving a row from another table

Class	Element Description
tabulator-header	Table header element
tabulator-headers	Hold all column headers inside table header
tabulator-calcs-holder	Hold column calculations row, appears in both header and footer
tabulator-col	Column header (in header row)
tabulator-col-content	Holds the contents for the column header
tabulator-col-title	Holds the text for the column header title
tabulator-col-group	Marks a column header as a group that contains other columns
tabulator-col-group-cols	Holds the column headers contained in a column group
tabulator-handle	Invisible resize handle on the right of each column header
tabulator-title-editor	The input box used for editing titles when the editableTitle option is set
tabulator-header-filter	The containing element for the header filter elements, when the headerFilter option is set
tabulator-sortable	Applied to columns with header sorting enabled
tabulator-frozen	The containing element for all frozen columns
tabulator-frozen-left	Applied to frozen columns on the left edge of the table
tabulator-frozen-right	Applied to frozen columns on the right edge of the table
tabulator-row-resize-handle	Container for frozen rows in the header
tabulator-col-vertical	Applied to a column header to roate the text to a vertical orientation
tabulator-col-vertical-flip	applied to a vertical column header to flip the text round 180 degrees

Class	Element Description
tabulator-row	Row of table
tabulator-row-odd	Odd numbered row
tabulator-row-even	Even numbered row
tabulator-cell	Data cell
tabulator-selectable	Styling for selectable rows
tabulator-unselectable	Styling for unselectable rows
tabulator-selected	Currently selected row
tabulator-editing	Applied to cells being edited and the rows that contain them
tabulator-validation-fail	Applied to cells being edited that have failed validation
tabulator-group	The header element for a row group
tabulator-group-visible	Applied to .tabulator-group when the group is visible
tabulator-group-level-X	Applied to .tabulator-group to denote its level in multi level grouping, the X is replaced with the number of that grouping level
tabulator-calcs	A row that contains column calculations instead of data
tabulator-calcs-top	A column calculations row at the top of a group
tabulator-calcs-bottom	A column calculations row at the bottom of a group
tabulator-row-handle	A cell that is setup as a row handle
tabulator-row-handle-box	containing element for the row handle icon
tabulator-row-handle-bar	one of the bars in the row handle icon
tabulator-row-resize-handle	Invisible resize handle on the top and bottom of each row
tabulator-responsive-collapse	Element to hold collapsed column data in responsive layout mode

Class	Element Description
tabulator-footer	Tabulator footer element
tabulator-paginator	Contains the pagination controls
tabulator-pages	Contains individual page buttons
tabulator-page	Page selection button

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

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

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

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

Variable	Default Value	Description
rowBackgroundColor	#fff	The background colour of the table rows
rowAltBackgroundColor	#e0e0e0	The background colour of the even numbered table rows
rowBorderColor	#fff	The table row border colour
rowTextColor	#333	The table row text colour
rowHoverBackground	#bbb	The table row background colour when hovered over.
rowSelectedBackground	#9ABCEA	The table row background colour when selected.
rowSelectedBackgroundHover	#769BCC	The table row background colour when selected and hovered over.
editBoxColor	#1D68CD	The border colour of a cell being edited.

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