Styling DataTable

You can use CSS in conjunction with DataTable content to achieve the desired look-and-feel. This article will help you to cover support of cascading style sheets (CSS) in DataTable.

You can fine-tune the style of:

  1. A whole table;
  2. Columns;
  3. Rows;
  4. Cells;
  5. The header.

A whole table

To apply some style to a whole table you can use the css parameter. As the value of the parameter you must specify the name of the appropriate CSS class.

Styling the whole table

<style>
    .my_style .webix_hcell{
        background:#009966;
        color:white;
        font-weight:bold;
 
    }
    .my_style .webix_column{
        font-style:italic;
        background:#ddFFdd;
    }
    .my_style .webix_column > div{
        border-color:#ddd;
    }
</style>   <script>
webix.ui({
    view:"datatable",
    css:"my_style",
    ...
})
</script>

Related sample:  Basic styling

Columns

For applying some style to a specific column, you should specify css attribute within columns parameter while configuring the column.

As the value of the attribute you can specify:

  • the name of the appropriate CSS class;
  • an object containing the CSS properties.

Styling of a single column

<style>
    .my_style {
        font-weight:bold;
        color:#B51454;
    }
</style>   <script>
webix.ui({
    view:"datatable",       
    columns:[
        // a separate CSS class
        { id:"title", header:"Film title", css:"my_style" },
        // an object with CSS properties
        { id:"votes", header:"Votes",      css:{"text-align":"right"}}
    ],
...
})
</script>

Related sample:  Columns styling

Rows

Generally, to apply some style to a specific row, you may use the $change key of the scheme parameter. The key is a function that runs each time data is changed in the table. As a parameter, the function takes the data item object.

General styling of rows

<style>
    .highlight{
        background-color:#FFAAAA;
    }
</style>
 
<script>
webix.ui({
    view:"datatable",       
    scheme:{
        $change:function(item){
            if (item.year > 1980)
                item.$css = "highlight";
        }
    },
    columns:[
        { id:"title", header:"Film title"},
        { id:"votes", header:"Votes"}
    ],
...
})
</script>

If you specify data directly inside the DataTable constructor, you have one more way to set the desired style for a row.

You can use the $css attribute inside the data parameter to set the desired style.

We don't recommend to dynamically change attributes with the '$' prefix (e.g. $css, $cellCss). Please, use the addCellCss, addRowCss methods instead.

Setting rows style directly in the dataset

<style>
    .my_style{
        background-color:#FFAAAA;
    }
</style>
 
<script>
grid = new webix.ui({
    view:"datatable",
    columns:[
        { id:"title",   header:"Film title"},
        { id:"votes",   header:"Votes"}
    ],
    data:[
        { id:1,
            $css:"my_style",
            title:"The Shawshank Redemption",
            votes:678790
        },
        { id:2,
            $css:{ "text-align":"right" },
            title:"The Godfather",
            votes:511495,
        }
    ],
...
}); 
</script>

Related sample:  Rows styling

Applying hover styles

You can specify a custom style for selection of a row when the mouse pointer is over it.

For this purpose, you should define your css style in the hover property.

<style>
    .myhover{
        background: #F0DCB6;
    }
</style>
 
<script>
grid = webix.ui({
    view:"datatable",   
    columns:[
        { id:"title",   header:"Film title",    width:200},
        { id:"year",    header:"Released",      width:80},
        { id:"votes",   header:"Votes",         width:100}
    ],
    hover:"myhover"
    ...
}); 
</script>

Related sample:  Row hover

Cells

Applying cssFormat method

Generally, to apply some style to specific cells in a column, you should use the cssFormat attribute inside the columns parameter. The attribute sets a function that will define how cells of the column must be colored. The function takes the following parameters:

  • cell value (compulsory) - current cell value;
  • row item object - all values for the current row;
  • row id - ID of the row in question;
  • column id - ID of the column in question.

(function).

General styling of cells

function mark_votes(value, config){
    if (value > 400000)
        return { "text-align":"right" };
    return value;
}
 
grid = new webix.ui({
    view:"datatable",
    columns:[
        { id:"title",   header:"Film title"},
        { id:"votes",   header:"Votes",   cssFormat:mark_votes }
    ],
    ...
})

Cell styling within configuration

If you specify data directly inside the DataTable constructor, you have one more way to set the desired style for a cell - property $cellCss:

We don't recommend to dynamically change attributes with the '$' prefix (e.g. $css, $cellCss). Please, use the addCellCss, addRowCss methods instead.

Setting cells style directly in the dataset

<style>
    .my_style{
        background-color:#FFAAAA;
    }
</style>
 
<script>
grid = new webix.ui({
    view:"datatable",
    columns:[
        { id:"title",   header:"Film title"},
        { id:"votes",   header:"Votes"}
    ],
    data:[
        { id:1,
          title:"The Shawshank Redemption",
          votes:678790,
          $cellCss:{
              votes:"highlight"
          }
        },
        { id:2,
          title:"The Godfather",
          votes:511495, 
          $cellCss:{
              votes:{ "text-align":"right" }
          }
        }
    ],
...
})
</script>

Related sample:  Cells styling

The header

To set style for a specific cell of the header you should use the following technique:

General styling of the header

<style>
    .my_style{
        background-color:#FFAAAA;
    }
</style>
 
<script>
grid = new webix.ui({
    view:"datatable",
    columns:[
        { id:"title",   header:{ text:"Film title", css:{ "background":"#AFA"}} },
        { id:"votes",   header:{ text:"Votes",      css:"my_style"} }
    ]
...
})
</script>

Related sample:  Header styling

CSS maps

CSS image maps

The list of CSS classes with their descriptions is given below:

  • .webix_dtable - container with DataTable
  • .webix_ss_header - container with the header
  • .webix_ss_header .webix_hcell - a cell of the header
  • .webix_ss_header .webix_first - the first cell of the header
  • .webix_ss_header .webix_last - the last cell of the header
  • .webix_ss_footer - container with the footer
  • .webix_ss_footer .webix_hcell - a cell of the footer
  • .webix_ss_footer .webix_first - the first cell of the footer
  • .webix_ss_footer .webix_last - the last cell of the footer
  • .webix_ss_body - container with the table body
  • .webix_column - a column of the table
  • .webix_column .webix_last - the last column of the table
  • .webix_column .webix_first - the first column of the table
  • .webix_column .webix_cell - a cell of the column
Back to top