CSS Styling

Overview

Tabulator is built using an extensive set of CSS classes to make styling your tables as easy as possible.

CSS Classes

The tables below outline the key classes involved in styling Tabulator. You can include your own custom CSS after importing the library to customise its look and feel

Selector Specificity
The lists below only describe the the roles of each class, not the specificity required to override it. In order to change the table styling after the stylesheet has been imported it is recomended that you use the developer tools in the browser to check the exact CSS combinators needed to override a specific property

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-arrowStyles arrows used for header sort direction and group open state
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
tabulator-rtlTable is running with a right to left text direction
tabulator-ltrTable is being forced into left to right text direction on a rtl direction page

Columns & Headers

Class Element Description
tabulator-headerTable header element
tabulator-header-hiddenApplied to the .tabulator-header element to hide headers when operating in headerless mode
tabulator-headersHold all column headers inside table header
tabulator-calcs-holderHold column calculations row, appears in both header and footer
tabulator-frozen-rows-holderHold rows that are frozen to the top of the table
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-group-toggleContaining element for the groups expand/collapse toggle
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
tabulator-responsive-collapse-toggleElement to toggle the expanded state of collapsed data

Pagination

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

Data Trees

Class Element Description
tabulator-data-tree-controlContains the control element for toggling the collapse state of a data tree
tabulator-data-tree-control-collapseThe collapse symbol for the data tree control element
tabulator-data-tree-control-expandThe expand symbol for the data tree control element
tabulator-data-tree-branchBranch icon for cild rows of a data tree parent
tabulator-tree-level-XApplied to .tabulator-row to denote its level in nested tree structures, the X is replaced with the number of that depth of the cild row

Printing

Class Element Description
tabulator-print-tableApplied to .tabulator when printing to allow for custom print styling
tabulator-print-fullscreenContaining element used to take up the full height and width of the screen when printing the table
tabulator-print-fullscreen-hideApplied to the body element when printing to hide all other contents on the page

Menus

Class Element Description
tabulator-menuThe containing element for context and header menus
tabulator-menu-itemAn individual list item in a menu
tabulator-menu-item-disabledApplied to a .tabulator-menu-item to denote that it is disabled
tabulator-menu-separatorA list sepearator in the menu list
tabulator-header-menu-buttonClass for styling the trigger button for column header menu

Formatters

Class Element Description
tabulator-traffic-lightContaining element for the traffic light editor circle

Editors

Class Element Description
tabulator-edit-select-listThe containing element for select and autocomplete editor value lists
tabulator-edit-select-list-itemAn individual list item
tabulator-edit-select-list-noticeAn non-selectable label
tabulator-edit-select-list-groupA group of releated list items

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