Version 6.3 Released!

Click to checkout the new features
Old Documentation
You are browsing documentation for an old version of Tabulator. Consider upgrading your project to Tabulator 6.3

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 - The theme used for tables on this site.

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/bootstrap/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/bootstrap/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.

Semantic UI Theme

A Semantic UI compatible theme that can be included from: 

<link href="/dist/css/semantic-ui/tabulator_semantic-ui.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/bulma/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/materialize/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.

Donate