configures the columns of the table

array columns;


// default columns definition
    {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:"" }

Related samples


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.

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+")"} }
See also
  • Articles
  • Change log

    the onrender attribute has been added in v7.1

    Back to top