Available only in PRO Edition
Datatable API allows for setting rowspans and colspans with the help of span configuration that is passed together with datatable data.
The data you want to display in the datatable is passed in the data object that contains:
webix.ui({
view:"datatable",
columns:[...],
data:{
data:grid_data,
spans:[
//span for 3 rows
[1, "country", 1, 3],
//span for 4 columns, styled
["sub1", "country", 4, 1, null, "highlight"],
]
}
});
Related sample: Colspans in the DataTable
Each definition of a rowspan or colspan includes:
The simplest way to add styling to the rowspan or colspan is to mention its css class in the configuration (as shown above).
Extra rules for span elements should be applied to properly position long texts in case of a row span:
Span CSS
<!-- ensuring proper display-->
.webix_span_layer{
background: transparent;
position:absolute;
left:0px;
top:0px;
height:0px;
width:0px;
overflow: visible;
}
.webix_dtable_span{
position:absolute;
background: #fff;
white-space: normal;
}
<!--colouring-->
.hrow{
background: #DFF;
}
Datatable configuration:
Styled Spans
var text2 = "Learn more about each film, read recent reviews and explore ratings...";
webix.ui({
view:"datatable",
columns:[...],
data:{
data:grid_data,
spans:[
//span for 3 columns
[ "2", "rank", 6, 1, text2, "hrow"]
]
}
});
Related sample: Colspans in the Big DataTable
Back to top