columns

configures the columns of the table

GridColumn[] columns;

Example

// default columns definition
gantt.config.columns = [
    { name: "text",       label: "Task name",  width: "*", tree: true },
    { name: "start_date", label: "Start time", align: "center" },
    { name: "duration",   label: "Duration",   align: "center" },
    { name: "add",        label: "",           width: 44 }
];
 
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.
Related sample: Column width priority over grid width at initialization
When rendering the gantt via gantt.render(), the grid_width is a priority.
Related sample: Grid width priority over column width during rendering
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: Grid width priority when column width is undefined or set to '*' at initialization

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: (obj) => {
        return `${obj.holder} (${obj.progress})`;
    } }
];
 
gantt.init("gantt_here");