DayPilot.Gantt.columns

The columns property (array) specifies row header columns that will be displayed by the JavaScript Gantt Chart component.

Description

Column object structure:

• title (string) - the column title
• width (integer) - the initial column width
• maxAutoWidth (number) - the maximum column width (in pixels) for row header width auto-fit; optional (available since 2022.4.5480)
• property (string) - the custom task tag field name (source of the cell data)

The property field will be used to load task data into the row cells. The Gantt control searches for the value in DayPilot.Task.data.tags first, then in DayPilot.Task.data.

The column cells can be further customized using onBeforeRowHeaderRender event.

Example

gantt.columns = [
  {
      title: "Name",
      width: 50,
      property: "text"
  },
  {
      title: "Info",
      width: 50,
      property: "info"
  },
  {
      title: "Duration",
      width: 50
  }
];

gantt.tasks.list = [
  {
    start: start,
    end: end,
    id: DayPilot.guid(),
    text: "Task " + i,
    tags: {
      info: "info text"
    }
  }
];