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
If you have not checked yet, be sure to visit site of our main product Webix javascript ui components library and page of ui datagrid product.