Themes
Overview
Tabulator comes with a number of pre packaged theme stylesheets to make styling your table really simple. To use one of these simply include the matching css file instead of the default tabulator.css
All stylesheets can be found in the /dist/css directory, with standard CSS and minified versions available.
For example to use the simple theme, you would need to use the following css link:
<link href="/dist/css/tabulator_simple.min.css" rel="stylesheet">
Standard Themes
Alongside the default theme, the following standard themes are available:
- Simple - A plain, simplistic layout showing only basic grid lines. (/themes/tabulator_simple.css)
- Midnight - A dark, stylish layout using simple shades of grey. (/themes/tabulator_midnight.css)
- Modern - A neat, stylish layout using one primary color. (/themes/tabulator_modern.css)
- Site Dark - The theme used for tables on this site.(/themes/tabulator_site_dark.css)
- Site - The theme used for the light mode version of tables on this site.(/themes/tabulator_site.css)
Framework Themes
Tabulator also comes with a number of themes to ie in with popular frontend layout frameworks.
Bootstrap 3 Theme
A Bootstrap 3 compatible theme that can be included from:
<link href="/dist/css/tabulator_bootstrap.min.css" rel="stylesheet">
The stylesheet maps the standard bootstrap table styling onto Tabulator. If you have customised your bootstrap theme, then the /src/scss/bootstrap directory also contains a variables.scss file containing all the standard bootstrap variables. Make any changes in here to match your custom theme and recompile the tabulator_bootstrap.css file and Tabulator will now match your theme.
The theme also maps some of the standard table styling classes. You can use any of these classes on your Tabulator element and get the same effect as bootstrap:
- table-striped - alternating row colors
- table-bordered - borders around table and between cells
- table-condensed - minimal cell and header padding
You can also apply the following classes to rows using the rowFormatter to get the same results as in bootstrap:
- active
- success
- info
- warning
- danger
var table = new Tabulator("#example-table", {
rowFormatter:function(row){
if(row.getData().age >= 18){
row.getElement().classList.add("success"); //mark rows with age greater than or equal to 18 as successful;
}
},
});
For full details on the bootstrap table layout, checkout the Bootstrap Website.
Bootstrap 4 Theme
A Bootstrap 4 compatible theme that can be included from:
<link href="/dist/css/tabulator_bootstrap4.min.css" rel="stylesheet">
The stylesheet maps the standard bootstrap table styling onto Tabulator. If you have customised your bootstrap theme, then the /src/scss/bootstrap directory also contains a variables4.scss file containing all the standard bootstrap variables. Make any changes in here to match your custom theme and recompile the tabulator_bootstrap4.css file and Tabulator will now match your theme.
The theme also maps some of the standard table styling classes. You can use any of these classes on your Tabulator element and get the same effect as bootstrap:
- thead-dark - inverted header colour scheme
- table-dark - inverted colour scheme
- table-light - light header on dark table body (when used with table-dark)
- table-striped - alternating row colors
- table-bordered - borders around table and between cells
- table-borderless - no borders anywhere on the table
- table-sm - minimal cell and header padding
You can also apply the following classes to rows or cells using the rowFormatter option or the formatter column definition property, to get the same results as in bootstrap:
- table-primary
- table-secondary
- table-success
- table-info
- table-warning
- table-danger
- table-light
- table-dark
- table-active
- bg-primary
- bg-secondary
- bg-success
- bg-info
- bg-warning
- bg-danger
- bg-light
- bg-dark
- bg-active
var table = new Tabulator("#example-table", {
rowFormatter:function(row){
if(row.getData().age >= 18){
row.getElement().classList.add("table-primary"); //mark rows with age greater than or equal to 18 as successful;
}
},
});
For full details on the bootstrap table layout, checkout the Bootstrap 4 Website.
Bootstrap 5 Theme
A Bootstrap 5 compatible theme that can be included from:
<link href="/dist/css/tabulator_bootstrap5.min.css" rel="stylesheet">
The stylesheet maps the standard bootstrap table styling onto Tabulator. If you have customised your bootstrap theme, then the /src/scss/bootstrap directory also contains a variables5.scss file containing all the standard bootstrap variables. Make any changes in here to match your custom theme and recompile the tabulator_bootstrap5.css file and Tabulator will now match your theme.
The theme also maps some of the standard table styling classes. You can use any of these classes on your Tabulator element and get the same effect as bootstrap:
- thead-dark - inverted header colour scheme
- table-dark - inverted colour scheme
- table-light - light header on dark table body (when used with table-dark)
- table-striped - alternating row colors
- table-bordered - borders around table and between cells
- table-borderless - no borders anywhere on the table
- table-sm - minimal cell and header padding
You can also apply the following classes to rows or cells using the rowFormatter option or the formatter column definition property, to get the same results as in bootstrap:
- table-primary
- table-secondary
- table-success
- table-info
- table-warning
- table-danger
- table-light
- table-dark
- table-active
- bg-primary
- bg-secondary
- bg-success
- bg-info
- bg-warning
- bg-danger
- bg-light
- bg-dark
- bg-active
var table = new Tabulator("#example-table", {
rowFormatter:function(row){
if(row.getData().age >= 18){
row.getElement().classList.add("table-primary"); //mark rows with age greater than or equal to 18 as successful;
}
},
});
For full details on the bootstrap table layout, checkout the Bootstrap 5 Website.
Semantic UI Theme
A Semantic UI compatible theme that can be included from:
<link href="/dist/css/tabulator_semanticui.min.css" rel="stylesheet">
The stylesheet maps the standard semantic ui table styling onto Tabulator. If you have customised your theme, then the /src/scss/semantic-ui directory also contains the variables.scss and variables_table.scss files containing all the standard semantic ui variables. Make any changes in here to match your custom theme and recompile the tabulator_semantic-ui.css file and Tabulator will now match your theme.
The theme also maps some of the standard table styling classes. You can use any of these classes on your Tabulator element and get the same effect as semantic ui:
- striped - alternating row colors
- celled - borders between cells
- compact - minimal cell and header padding
- very compact - almost no cell and header padding
- padded - more cell and header padding
- very padded - a lot more cell and header padding
The full range of colour classes can also be used:
- inverted
- red
- orange
- yellow
- olive
- green
- teal
- blue
- violet
- purple
- brown
- grey
- black
You can also apply the following classes to rows or cells using the rowFormatter to get the same results as in semantic ui:
- positive
- negative
- error
- warning
- active
- disabled
var table = new Tabulator("#example-table", {
rowFormatter:function(row){
if(row.getData().age < 18){
row.getElement().classList.add("warning"); //mark rows with age less than 18 with a warning state;
}
},
});
For full details on the Semantic UI table layout, checkout the Semantic UI Website.
Bulma Theme
A Bulma compatible theme that can be included from:
<link href="/dist/css/tabulator_bulma.min.css" rel="stylesheet">
The stylesheet maps the standard Bulma table styling onto Tabulator. If you have customised your Bulma theme, then the /src/scss/bulma directory also contains a variables.scss file containing all the standard bulma variables. Make any changes in here to match your custom theme and recompile the tabulator_bulma.css file and Tabulator will now match your theme.
The theme also maps some of the standard table styling classes. You can use any of these classes on your Tabulator element and get the same effect as bulma:
- is-striped - alternating row colors
- is-bordered - borders around table and between cells
- is-narrow - minimal cell and header padding
For full details on the bulma table layout, checkout the Bulma Website.
Materialize Theme
A Materialize compatible theme that can be included from:
<link href="/dist/css/tabulator_materialize.min.css" rel="stylesheet">
The stylesheet maps the standard Materialize table styling onto Tabulator. If you have customised your Materialize theme, then the /src/scss/materialize directory also contains a variables.scss file containing all the standard materialize variables. Make any changes in here to match your custom theme and recompile the tabulator_materialize.css file and Tabulator will now match your theme.
The theme also maps some of the standard table styling classes. You can use any of these classes on your Tabulator element and get the same effect as materialize:
- striped - alternating row colors
For full details on the materialize table layout, checkout the Materialize Website.
Building a Custom Theme
As well as a the built in themes, feel free to build out a custom theme to meet your needs. The steps below will take you through the steps needed to integrate your theme with the rest of Tabulator.
Source Files
The source files for existing themes can be found in the /src/scss/ folder, with framework specific themes being grouped in folders so they can share any theme specific variable files.
Import Core Stylesheet
All themes start by importing the core stylesheet from /src/scss/tabulator.scss and then defining any specific SCSS variable overrides needed to adjust the core styles.
//first define any variables you want to overrides
$backgroundColor:#f00; //change background color of table
//then import the core SCSS
@import "../tabulator.scss";
//then add your overriding CSS
.tabulator{
...
}
Full details of the SCSS variables used by Tabulator can be found in the Styling Documentation
Add CSS Overrides
Once you have imported the core stylesheet you can then add any CSS you like to change the default table styling
A full list of CSS Classes used by Tabulator can be found in the Styling Documentation
Build Tools
Once you have finished your stylesheet you will need to build the file into SCSS. For information on how to built dist files, have a look at the Build Documentation