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:
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>
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:
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
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:
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>
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>
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:
(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 }
],
...
})
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>
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 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 |