addSpan

adds a colspan or a rowspan to the datatable

void addSpan(number|string|array id, [string column,number width,number height,string value,string css] );
idnumber|string|arraythe id of the row that starts colspan/rowspan
columnstringthe id of the column that starts colspan/rowspan
widthnumberhow many columns should the span include
heightnumberhow many rows should the span include
valuestringvalue that the span area should display
cssstringcss class that should be applied to the span area

Available only in PRO Edition

Example

grid.addSpan(1, "country", 1, 3);
grid.refresh();

Details

To enable the rowspans and colspans functionality, you should set the spans parameter to true in the datatable configuration:

webix.ui({
    view:"datatable",
    columns:[...],
    spans:true
    ...
});

The method can also take an array of arrays with the same configuration (id, column, width, height, value, css) to define several spans at a time.

grid.addSpan([
    [1, "country", 1, 3],
    [4, "country", 1, 2],
    [6, "country", 1, 3]
]);

Defaults:

  • default values for span width and height are 1;
  • span value parameter is optional and used if a custom text for the cell is required. If you need to display the initial value, omit this field or pass an empty value ("", null);
  • span css is optional. By default, colspans and rowspans don't feature any special styling.
See also
Back to top
If you have not checked yet, be sure to visit site of our main product Webix javascript dashboard framework and page of javascript data table product.