Old Documentation
You are browsing documentation for an old version of Tabulator. Consider upgrading your project to
Tabulator 6.3
CSS Styling
Tabulator is built using an extensive set of CSS classes to make styling your tables as easy as possible.
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
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
tabulator-rtl Table is running with a right to left text direction
tabulator-ltr Table is being forced into left to right text direction on a rtl direction page
tabulator-editing Applied to table containing cells being edited
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
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 rows containing cells being edited
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
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
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
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
Class
Element Description
tabulator-popup-container The containing element for any floating popup
tabulator-popup A class applied to a tabulator-popup-container to show it is functioning as popup
tabulator-tooltip A class applied to a tabulator-popup-container to show it is functioning as tooltip
tabulator-menu A class applied to a tabulator-popup-container to show it is functioning as a menu
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
Class
Element Description
tabulator-traffic-light Containing element for the traffic light editor circle
Class
Element Description
tabulator-editing Applied to a tabulator-cell when its contents is being edited
tabulator-editable Applied to a tabulator-cell when its contents available for editing (this class may not be 100% reliable when using a function on the editable column definition option)
tabulator-edit-list The containing element for select and autocomplete editor value lists
tabulator-edit-list-item An individual list item
tabulator-edit-list-placeholder An non-selectable label
tabulator-edit-list-group A group of related list items
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
Copy
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
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
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
footerSeparatorColor #999 The footer element top border colour
footerActiveColor #d00 The text colour for active pagination buttons