Columns configuration is specified by parameter columns and all settings are managed on its level.
grid = new webix.ui({
view:"datatable",
columns:[{...}, {...}],
...
});
With the help of the columns parameter you can:
Normally, you need to specify an array of column configurations for the datatable, which allows for setting various parameters needed by this or that datatable separately:
view:"datatable",
columns:[
{id:"id", header:"Id", width:50, sort:"int"},
{id:"title", header:[ "Film title",{content:"textFilter"}]
]
At the same time, you can switch to data-based column configuration provided by autoconfig property:
view:"datatable",
autoconfig:true
In this case columns array is no longer needed. Datatable will analyse the dataset passed to it and build columns automatically. The columns will have default values (no sorting or filtering, width of 50px, etc.)
Enabled by parameters header, footer (by default, headers are enabled).
Specified by attributes header, footer and can be both string and object.
In case of string, you can specify just the label.
Object definition allows you to specify more complex column presentation. As an object, header/footer can contain the following properties:
Defining header and footer for a specific column
//simple string
grid = new webix.ui({
view:"datatable",
...
footer:true,
columns:[
{ id:"col1", header:"Column 1", footer:"Footer 1"},
{...}
]
})
//object
grid = new webix.ui({
view:"datatable",
...
footer:true,
columns:[{
id:"col1",
header:[{ text:"Column1", colspan:"2"}, { content:"selectFilter" }],
footer:[{ text:"Total", rowspan:"2"}, { text:" " } ]
},
...]
})
Related sample: Standard header(footer) implementation
For more details, read the Headers and footers article.
To set widths of columns you should use attribute width.
Setting the width of a column
columns:[
{ id:"col1", width:200 }
]
Related sample: Sizing through the 'width', 'height' parameters
For more details, read the Sizing and resizing article.
The header or footer of a column can contain filter. The following types of filters are available:
Filter is set by property content of the header attribute.
Adding filter to the header of a specific column
columns:[
{ id:"col1", header:[{ text:"Column 1", colspan:"2"}, { content:"selectFilter" }]},
{...}
]
Related sample: Filtering. Built-in Text Filter, Select Filter
For more details, read the Filtering article.
You are allowed to sort data in columns. The way of sorting depends on the column sorting type. There are 3 predefined sorting types:
Last one is a case-sensitive string sorting
The sorting is specified by attribute sort.
Activating sorting for a specific column
columns:[
{ id:"col1", sort:"string" },
{...}
]
Related sample: Sorting. Using built-in means
For more details, read the Sorting article.
To set the text alignment in a column you should use attribute css:
Setting the text alignment in a column
<style>
.myStyle{
text-align:right;
}
</style>
columns:[
{ id:"col1" css:"myStyle"},//in a separate css class
{ id:"col2", css:{'text-align':'right'} //directly in the attribute
]
Read more about using the css attribute in the Styling article.
Formatting is applied to date and number values and defined for each column separately. To set some format for a column, use attribute format.
Setting the format for a specific column
columns:[
//data will be formatted according to the current locale
{ id:"col2", format:function(value){ return webix.ui.numberFormat(value)};}
]
Related sample: Using date templates
For more details, read the Number and date formatting article.
You can write simple math formulas to specify values in column cells. Formulas can be set for a whole column or for a single cell.
Using formulas for setting values in the whole column
columns:[
{ id:"col1", math:"[row_id,col_name] + [row_id,col_name]"}
]
Related sample: Using formulas
For more details, read the Using formulas article.
The collection property of the column allows syncing column data with that of a dataCollection object or any data management component.
{ id:"order-1",
view:"datatable",
columns:[
{ id:"product", header:"Product", collection:"dash-pro" },
{ id:"quantity", header:"Quatity", ... },
{ id:"price", header:"Unit price", ... }
],
dataFeed:"data/orderproducts.php", //main datasource
};
Collection for the first column points to other datatable with "dash-pro" ID.
{ view:"datatable", id:"dash-pro",
columns:[
{ id:"name", header:"Product name", .. },
{..//other columns}
],
url:"data/products.php",
save:"connector->data/products.php" //dataprocessor
};
With the help of this property you can also sync the datatable with various dataCollections.
Through attribute template you can set a template of cells presentation corresponding to your needs.
Using templates for configuration data of a column
columns:[
{ id:"col4", template:function(obj){return obj.col1+obj.col2*2+obj.col3*3;}}
]
Related sample: Using string templates
For more details, read the Data templates article.
Many aspects of column can be customized to achieve the desired look-and-feel. Column style can be adjusted in a css class and applied through attribute css.
Applying a css class to a specific column
columns:[
{ id:"col1", css:"someStyle"}
]
For more details, read the Styling article.
Initially, all the datatable columns are visible by default unless a specific hidden property is used in its configuration:
var grid = new webix.ui({
view:"datatable",
columns:[
{ id:"col1", header:"Title", hidden:true}, //this column is hidden initially
{ id:"col2", header:"Rating"} //this column is visible
]
})
Through the hideColumn() and showColumn() methods you can manipulate visibility of columns dynamically.
Hiding a column
grid.hideColumn("col2");
Datatable API allows for setting the initially visible group of columns (visibleBatch) as well as show and hide any chosen column group defined by batch property:
grida = new webix.ui({
view:"datatable",
visibleBatch:1,
columns:[
{ id:"id", header:"#", css:"rank", batch:2, width:50},
{ id:"title", header:"Film title", fillspace:true },
{ id:"year", batch:1, header:"Released" , width:80},
{ id:"category", header:"Category", batch:1},
{ id:"votes", batch:3, header:"Votes", width:100},
{ id:"rating", batch:3, header:"Rating", width:100},
{ id:"rank", header:"Rank", css:"rank", batch:2,width:50}
]
});
Any column group can be shown with the showColumnBatch method that takes column batch value as parameter:
//show show id, rank
grida.showColumnBatch(2);
//show votes, rating
grida.showColumnBatch(3);
Related sample: Column Batches
Since datatable columns is an array of JSON objects, you can treat it like any JavaScript array. At any moment you can add elements (columns) to this array and delete elements from it - and then repaint the datatable with the new configuration.
Replacing current columns with new ones
grid.config.columns = [..new collection of columns..];
grid.refreshColumns();
In addition, Webix offers its own API for working with arrays:
Adding/Removing Separate Columns
var columns = webix.toArray(grid.config.columns);
//adding
columns.insertAt({
id:"c"+webix.uid(),
header:"New column"
},2);
//deleting
columns.removeAt(2);
//refreshing
grid.refreshColumns();
Related sample: Adding/removing columns
The functionality is available in Webix Pro edition only.
Column batches can be used to organize groups of columns that are shown/hidden by clicking on the header of an aggregating column:
For these needs a multiple line header is used. The first line of an aggregating column is defined via an object with the following properties:
Also, each column that belongs to some group, should be given a group ID defined by batch property:
columns:[
//aggregating column
{ id:"2008_1", header:[
{ content:"columnGroup", closed:true, batch:"2008", groupText:"2008", colspan:12},
"January"
]},
//other columns from the group
{ id:"2008_2", batch:"2008", header:[null, "February"] },
{ id:"2008_3", batch:"2008", header:[null, "March"] },
{ id:"2008_4", batch:"2008", header:[null, "April"] },
...
]
Related sample: Grouped columns in DataTable
Read more about colspans and rowspans in Webix datatable header.
The feature is available in Webix Pro edition only.
Datatable allows defining colspans and rowspans by span configuration provided with the dataset within the data property of the grid.
Each rowspan/colspan definition consists of the row id, column id, width and height of the span, value to display and css class to apply:
grida = new webix.ui({
view:"datatable",
columns:[...],
data:{
data:grid_data,
spans:[
[1, "title", 3]
]
}
});
Related sample: Colspans in the DataTable
To learn more on this topic, please visit the Datatable Rowspans and Colspans article.
Back to top