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.
{{snippet 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>{{sample 15_datatable/21_styling/01_basic.html }}
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.
{{snippet 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>{{sample 15_datatable/21_styling/02_column_styling.html }}
Generally, to apply some style to a specific row, you may use the $change key of the api/link/ui.datatable_scheme_config.md 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.
{{snippet 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.
{{note We don't recommend to dynamically change attributes with the '$' prefix (e.g. $css, $cellCss). Please, use the api/ui.datatable_addcellcss.md, api/ui.datatable_addrowcss.md methods instead. }}
{{snippet 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>{{sample 15_datatable/21_styling/04_rows_styling.html }}
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>{{sample 15_datatable/05_selection/12_hover.html }}
###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).
{{snippet 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:
{{note We don't recommend to dynamically change attributes with the '$' prefix (e.g. $css, $cellCss). Please, use the api/ui.datatable_addcellcss.md, api/ui.datatable_addrowcss.md methods instead. }}
{{snippet 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>{{sample 15_datatable/21_styling/03_cell_styling.html }}
To set style for a specific cell of the header you should use the following technique:
{{snippet 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>{{sample 15_datatable/21_styling/05_header_styling.html }}
###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
@metadescr: Learn how to change the appearance of DataTable. You can apply CSS styles to the header, rows, columns or the whole table. The page contains code examples and samples. @doctitle: Styling Webix DataTable elements: header, cells, rows, etc.
@keyword: css, styling, style
@seolinktop: javascript ui components library @seolink: ui datagrid