Columns Configuration

Columns configuration is specified by parameter columns and all settings are managed on its level.

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

With the help of the columns parameter you can:

specify headers/footers;
set widths of columns;
add built-in filter;
set built-in sorting;
set the text alignment in a column;
set the format of data presentation;
specify data of columns through math formulas;
specify data source for the column;
define templates for data presentation;
define individual CSS class for any column;
hide/show a column;
hide/show columns in groups;
add/delete columns dynamically;
group columns;
define colspans and rowspans;

Automatic Column Configuration

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 the autoConfig property:

view:"datatable", 
autoConfig:true

In this case columns array is no longer needed. Datatable will analyze the dataset passed to it and build columns automatically. The columns will have default values (no sorting or filtering, width of 50px, etc.)

Headers/Footers

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:

text - the text label of a column;
colspan - the number of columns a cell should span;
rowspan - the number of rows a cell should span;
content - the built-in filter of a column (textFilter or selectFilter).

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:" " } ]
        },
        ...]
})

For more details, read the Headers and footers article.

Widths of Columns

Setting the width of columns

To set widths of columns you should use the width attribute.

Setting the width of a column

columns:[
    { id:"col1",  width:200 }
]

Adjusting the width of columns to the parent container

To make a column or several columns fill the unused space of the parent container, use the fillspace attribute with the true value:

columns:[
   { id:"title", header:"Film title", fillspace:true},
   ...
]

The column with the "title" value will take all the free space of the container. If there are more than one column with the enabled fillspace attribute, they will divide the free space between them.

Distributing free space between columns

You can also set the fillspace attribute with numeric values for several columns. In this case their width will be calculated as a proportion defined by the values:

columns:[
    { id:"id", header:"ID", fillspace:1},
    { id:"title", header:"Film title", fillspace:4}
]

In the above code the "title" column is 4 times bigger than the "id" one, which is 20 to 80 percent relation.

Adjusting column to its content

To adjust the width of a column to the related content size, you can use the adjust attribute. There are three possible options:

data - (the default one) 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.

columns:[
    { id:"title", header:"Film title", adjust:"data"},
    { id:"rank", header:"Rank", adjust:"header"}
        ...
]

Pay attention that the resulting column's width won't be less than minWidth, in case this parameter is set for the column.

For more details, read the Sizing and resizing article.

Built-in Filters

The header or footer of a column can contain filter. The following types of filters are available:

textFilter - text filter. Retrieves values which contain mask defined through text field;
selectFilter - select filter. Retrieves values which contain mask defined through dropdown list of possible values.
and 6 more..

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" }]},
    {...}
]

For more details, read the Filtering article.

Built-in Sorting

You are allowed to sort data in columns. The way of sorting depends on the column sorting type. There are 4 predefined sorting types:

int
date
string
string_strict (case-sensitive string sorting)

You can also set a custom sorting type.

The sorting is specified by attribute sort.

Activating sorting for a specific column

columns:[
    { id:"col1", sort:"string" },
    {...}
]

For more details, read the Sorting article.

Text Alignment

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.

Data Formats

Formatting is applied to date and number values and defined for each column separately. To set some format for a column, use the format attribute.

Setting the format for a specific column

columns:[
    //data will be formatted according to the current locale
    { id:"col2", format:function(value){ return webix.i18n.numberFormat(value)};}
]

Related sample: Using date templates

For more details, read the Number and date formatting article.

Math in Columns

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.

External Data Source for the Column

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:"Quantity",     ... },
        { id:"price", header:"Unit price",  ... }
    ],
    dataFeed:"data/orderproducts.php", //main data source
};

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.

Templates

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.

Styling

Many aspects of a column can be customized to achieve the desired look-and-feel. Column style can be adjusted in a CSS class and applied through the css attribute.

Applying a CSS class to a specific column

columns:[
    { id:"col1", css:"someStyle"}
]

For more details, read the Styling article.

Hiding/Showing Columns

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");

Setting Hidden/Visible Columns in Groups

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

Adding/Deleting Columns Dynamically

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:

webix.toArray() - converts an array to "Webix" array;
array.insertAt() - inserts an element to array into the specific position;
array.removeAt() - removes an element from the array at the specific position.

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

Grouping 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:

content (string) - content-forming property, here: columnGroup. The property is also used to define header filters;
batch (string, number) - ID of the group;
groupText (string) - title of the group (it is shown when the group is in a closed state);
closed (boolean) - the initial state of the group, false by default;
colspan (number) - the number of columns in the group, including the aggregating one.

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"] },
    ...
]

Read more about colspans and rowspans in Webix datatable header.

Setting Colspans/Rowspans

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.

To enable the rowspans and colspans functionality, you should set the spans parameter with the true value in the datatable configuration.

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:[...],
    spans:true,
    data:{
        data:grid_data,
        spans:[ 
            [1, "title", 3]
        ]
    }
});

To learn more on this topic, please visit the Datatable Rowspans and Colspans article.

If you have not checked yet, be sure to visit site of our main product Webix html5 ui library
and page of datagrid javascript product.