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? - (string) - sets the horizontal title alignment. Possible values: 'left', 'center', or 'right'
hide? - (boolean) - hides/shows a column (PRO)
label? - (string | number) - 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 | number) - 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)
sort? (task1, task2): number - (boolean | string | Function) - the configuration of sorting after clicking on the column header. When the property is set to false, sorting is disabled. You can also set a different task property in the string to sort the column or use a custom sorting function:
- task1 - (Task) - an object of the first task that will be sorted
- task2 - (Task) - an object of the second task that will be sorted
template? (task): any - sets a data template
- task - (Task) - the Task object
tree? - (boolean) - indicates that the related column should display a tree
width? - (number | string) - defines the width of the column
onrender? (task, node): any - 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
- task - (Task) - the Task object
- node - (HTMLElement) - the HTML element of the Grid cell
editor? - (object) - attached inline editor
- type - (string) - the type of the inline editor
- map_to - (string) - specifies which property of the task should be updated by the inline editor
- min? - (Date | number) - minimal value for the date and duration types
- max? - (Date | number) - maximal value for the date and duration types
- options? - (Array <any>) - an array with the options for the select types
- formatter? - (DurationFormatter | LinkFormatter) - formatter for the date and predecessor types

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