Documentation

Styling

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:

  • set parameter rowCss to value #css#;
  • use $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",
    rowCss:"#css#",
    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 coloured. 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

Table 1 CSS image maps
CSS class Description
.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