columns

configures columns of the grid

 let columns: WebixDatatableColumn[]

Example

webix.grid({
  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}
  ]
});

also check the next samples:

Details

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: "data" - adjusts column width to the content of the widest item in it "header" - adjusts column width to its header content true - searches for the widest item among data and header(s) and adjusts column width to its content :::note Pay attention that the resulting column width won't be less than minWidth or bigger than maxWidth, in case these parameters are set for the column. :::
adjustBatch	(number) limits the number of datagrid 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: name of the CSS class object with CSS rules, e.g. {"text-align":"center"}
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: cell value row item object( all values for the current row ) row id column id
editor	(string) the type of the column editors. The attribute can take only one of these values: "text" - a single line text editor "inline-text" - a custom text editor "select" - a dropdown list and others
editaction	(string) the type of an action that would open datagrid cell for editing. The predefined values are: "click" - (default) a single mouse click "dblclick" - a double mouse click "custom" - allows adding any custom action to open the cell (described separately)
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.
editParse	(function) the function that handles a real value kept by the control. Used for specifying custom number format in editors.
fillspace	(number, boolean) If fillspace is a boolean, the column will take all the free space of the grid. If there is more than one column with the enabled fillspace attribute, they will equally divide the space. If fillspace is a number greater 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: text - (string) the text label of the column footer content - ('textFilter', 'selectFilter' or 'summColumn') the built-in filter or counter colspan - (number) the number of rows a cell should span rowspan - (number) the number of columns a cell should span css - (string) the name of a css class that will be applied to the column footer rotate - (boolean) if set to true, switches the footer to the rotated state height - (number) defines a custom height for the footer line autoheight - (boolean) adjusts the height of the footer to show its content
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: text - (string) the text label of the column content - ('textFilter', 'selectFilter' or 'summColumn') the built-in filter or counter colspan - (number) the number of rows a cell should span rowspan - (number) the number of columns a cell should span css - (string) the name of a css class that will be applied to the column header rotate - (boolean) if set to true, switches the header to the rotated state height - (number) defines a custom height for the header line autoheight - (boolean) adjusts the height of the header to show its content
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 the minimum width for the column. If there's more space initially or after resizing, the column width will be increased, but it can never be less than minWidth
maxWidth	(number) defines the maximum width for the column. If there is not enough space for the specified width, the view will shrink. During resizing the column can't take the size bigger than maxWidth
numberFormat	(string) defines the format of entering numbers into editors.
resize	(boolean) defines whether the column can be resized
sort	(string,function) enables sorting for the column (triggered by a single click on the header) and assigns one of the predefined sorting types or the name of a sorting function. As a string, the attribute can be one of these values: "int" "date" "string" "string_strict" (case-sensitive 'string') "text" "server" "raw" custom sorting type Read more
template	(string,function) the data template If a template is set as a function, the parameters are as follows: obj - each data item common - common elements declared in type value - the value of the current cell col - the column configuration ind - the index of the current data item Read more
uncheckValue	(any) a value used for `common.checkbox()`/`common.radio()` templates in the unchecked state
width	(number) the width of the column

columns

Example

Details

See also