configures columns of the table
webix.ui({
view:"datatable",
columns:[
{ id:"rank", header:{ text:"#", rowspan:2}, width:50, css:"rank"},
{ id:"title", header:["Film title", {text:"Second line", colspan:3}]},
{ id:"year", header:["Year",""], width:80},
{ id:"votes", header:["Votes",""], width:100}
]
});
Each object in the array specifies a single column. An object can take the following attributes:
adjust | (string,boolean) adjusts the width of the column to fit the related content size. The following values are possible:
Pay attention that the resulting column's width won't be less than minWidth, in case this parameter is set for the column. |
adjustBatch | (number) limits the number of datatable rows that will be used in the calculation of the maximum column width. |
checkValue | (any) a value used for `common.checkbox()`/`common.radio()` templates in the checked state |
collection / options | (string, object, array, function, proxy) allows specifying data source for the column or filter/editor. |
css | (string,object) CSS that will be applied to the column. Possible values are:
|
cssFormat | (function) sets a function that takes a data property value as a parameter and returns object with css properties (or the name of a css class) that will be applied to a cell
with the related value. The parameters are as follows:
|
editor |
(string) the type of the column editors. The attribute can take only one of a predefined set of values. The predefined values are:
|
editaction |
(string) the type of an action that would open datatable cell for editing. The predefined values are:
|
editFormat | (function) the function that handles a value that will be visible for a user during editing. Used for specifying custom number format in editors. Check the details. |
editParse | (function) the function that handles a real value kept by the control. Used for specifying custom number format in editors. Check the details. |
fillspace | (number,boolean) forces the column to widen for filling the unused table space. In case of numeric values other than 1 the columns will distribute the available space proportionally according to the numbers. |
format | (function) the format of data presentation |
footer |
(string,array) specifies the footer of the column. As an array, the footer can contain both string and object values.
Object values can have the following attributes:
|
header |
(string,array) specifies the header of the column. As an array, the header can contain both string and object values.
Object values can have the following attributes:
|
hidden | (boolean) hides a column initially |
id | (string) the id of the column |
liveEdit | (boolean) sets on-the-go updating for the same data property used in different columns and edited in one of them |
math | (string) the math formula that applies to all cells of the column |
minWidth | (number) defines minimal width for the column. If there's more space initially or after resizing, column width will be increased, but it can never be less than the minWidth value |
numberFormat | (string) defines the format of entering numbers into editors. Check the details |
sort |
(string,function) enables sorting for the column (triggered by a single click on the header) and assigns one of predefined sorting types or the name of a sorting function.
As a string the attribute can take only one of a predefined set of values. The predefined values are:
|
template | (string,function) the data template |
uncheckValue | (any) a value used for `common.checkbox()`/`common.radio()` templates in the unchecked state |
width | (number) the width of the column |