configures the columns of the table
// 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");
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 |
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.
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");