DayPilot.Gantt.columns

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

Declaration

DayPilot.Gantt.columns

Item Structure

• title (string) - column title.

• width (integer) - initial column width.

• maxAutoWidth (number) - maximum column width in pixels for row header width auto-fit; optional.

• property (string) - custom task tag field name used as the source of the cell data.

Notes

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

You can further customize the column cells using onBeforeRowHeaderRender.

Examples

JavaScript

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

const gantt = new DayPilot.Gantt("dp", {
  columns,
  // ...
});

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

gantt.init();

Angular

<daypilot-gantt [config]="config"></daypilot-gantt>

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

config: DayPilot.GanttConfig = {
  columns,
  // ...
};

React

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

<DayPilotGantt
  columns={columns}
  {/* ... */}
/>

Vue

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

<DayPilotGantt
  :columns="columns"
  <!-- ... -->
/>

See Also

DayPilot.Gantt Class