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 recommended 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
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-arrow
Styles arrows used for header sort direction and group open state
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
Columns & Headers
Class
Element Description
tabulator-header
Table header element
tabulator-header-hidden
Applied to the .tabulator-header element to hide headers when operating in headerless mode
tabulator-headers
Hold all column headers inside table header
tabulator-calcs-holder
Hold column calculations row, appears in both header and footer
tabulator-frozen-rows-holder
Hold rows that are frozen to the top of the table
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 rotate the text to a vertical orientation
tabulator-col-vertical-flip
applied to a vertical column header to flip the text round 180 degrees
Rows
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-group-toggle
Containing element for the groups expand/collapse toggle
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
tabulator-responsive-collapse-toggle
Element to toggle the expanded state of collapsed data
Pagination
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
Data Trees
Class
Element Description
tabulator-data-tree-control
Contains the control element for toggling the collapse state of a data tree
tabulator-data-tree-control-collapse
The collapse symbol for the data tree control element
tabulator-data-tree-control-expand
The expand symbol for the data tree control element
tabulator-data-tree-branch
Branch icon for child rows of a data tree parent
tabulator-tree-level-X
Applied to .tabulator-row to denote its level in nested tree structures, the X is replaced with the number of that depth of the child row
Printing
Class
Element Description
tabulator-print-table
Applied to .tabulator when printing to allow for custom print styling
tabulator-print-fullscreen
Containing element used to take up the full height and width of the screen when printing the table
tabulator-print-fullscreen-hide
Applied to the body element when printing to hide all other contents on the page
Menus
Class
Element Description
tabulator-menu
The containing element for context and header menus
tabulator-menu-item
An individual list item in a menu
tabulator-menu-item-disabled
Applied to a .tabulator-menu-item to denote that it is disabled
tabulator-menu-separator
A list sepearator in the menu list
tabulator-header-menu-button
Class for styling the trigger button for column header menu
Formatters
Class
Element Description
tabulator-traffic-light
Containing element for the traffic light editor circle
Editors
Class
Element Description
tabulator-edit-select-list
The containing element for select and autocomplete editor value lists
tabulator-edit-select-list-item
An individual list item
tabulator-edit-select-list-notice
An non-selectable label
tabulator-edit-select-list-group
A group of related 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
#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
Columns & Headers
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
headerSeparatorColor
#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
Rows
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.