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
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
| 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-col-resize-guide | The resize guide bar shown when resizing a column with guards enabled |
| 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-row-header | The cell or column header is part of the row header column |
| 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-row-resize-guide | The resize guide bar shown when resizing a row with guards enabled |
| 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 |
| Class |
Element Description |
| tabulator-spreadsheet-tabs | The holding element for spreadsheet tabs |
| tabulator-spreadsheet-tab | A tab for a spreadsheet |
| tabulator-spreadsheet-tab-active | Applied to a spreadsheet tab when it is active |
| Class |
Element Description |
| tabulator-ranges | Applied to the table container when range selection is enabled |
| tabulator-range-highlight | Applied to a column header or row when a cell in that column is included in a range |
| tabulator-range-selected | Applied to a column header or row header when that entier row or column is included in a range |
| tabulator-range-row-header | Applied to the row header cell for a row |
| tabulator-range-overlay | The containing element for all range area overlays |
| tabulator-range | The overlayed area graphic for a range |
| tabulator-range-active | Applied to the active range overlay area |
| tabulator-range-active | Applied to the active range overlay area |
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 |
| 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 |
| Variable |
Default Value |
Description |
| rangeBorderColor | #2975DD | Range selection border colour |
| rangeHandleColor | #2975DD | Range selection handle colour |
| rangeHeaderSelectedBackground | #3876CA | Range column header selected backgroud Colour |
| rangeHeaderSelectedTextColor | #FFFFCA | Range column header selected text Colour |
| rangeHeaderHighlightBackground | #D6D6CA | Range column header highlighted backgroud Colour |
| rangeHeaderTextHighlightBackground | #0000CA | Range column header highlighted text Colour |