columns

configures the columns of the table

array columns;

Example

// default columns definition
gantt.config.columns=[
    {name:"text",       label:"Task name",  tree:true, width:'*' },
    {name:"start_date", label:"Start time", align: "center" },
    {name:"duration",   label:"Duration",   align: "center" },
    {name:"add",        label:"" }
];
gantt.init("gantt_here");

Related samples

Progress lightbox

Details

Each object in the array specifies a single column. An object can take the following attributes:

align	('left', 'center', 'right') sets the horizontal title alignment
hide	(boolean) hides/shows a column (PRO)
label	(string) specifies the title of the column
max_width	(number) sets the maximum column width in case of resize operations
min_width	(number) sets the minimum column width in case of resize operations
name	(string) defines the column's id. The name 'add' allows you to add a column with the '+' sign
resize	(boolean) enables the possibility to resize a column by dragging the column's border (PRO)
template	(function) sets a data template
tree	(boolean) indicates that the related column should display a tree
width	(number) defines the width of the column
onrender	(function) optional, a callback function for rendering a cell into the DOM. The function takes a task object and the DOM element of the grid cell as parameters and may return a component of the framework. See details here.

The width of Grid columns depends on two attributes: the width of the column and grid_width. If the sum of the width of columns is not equal to the width of the grid, Gantt changes one of the parameters.

When initializing the gantt via gantt.init(), the width of the column is a priority.
When rendering the gantt via gantt.render(), the grid_width is a priority.
Related sample: Adjustment of column width
When initializing the gantt via gantt.init() and either the width of the column is not specified or is set to '*', the grid_width is a priority.
Related sample: Adjusting column width

The template attribute is a function that takes a data item object as a parameter and returns the final data template. The function definition allows you to present almost any content.

gantt.config.columns =  [
    {name:"text",       label:"Task name",  tree:true, width:'*' },
    {name:"start_date", label:"Start time", align: "center" },
    {name:"staff",      label:"Holder(s)", template:function(obj){
                                return obj.holder+"("+obj.progress+")"} }
];
gantt.init("gantt_here");