CSS Styling
Overview
All elements of Tabulator have CSS classes set to make styling your tables as easy as possible.
CSS Classes
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-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 |
Columns & Headers
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 |
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-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 |
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 |
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 |
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 |
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. |
editBoxColor | #1D68CD | The border colour of a cell being edited. |
Pagination
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 |