Skip to main content

getDefaultColumns

Description​

Returns the default task grid column configuration

Usage​

getDefaultColumns(config?: Partial<IDataConfig>): IGanttColumn[]

Parameters​

  • config - (optional) partial Gantt data config object:
    • resources - (optional) | PRO feature if true, inserts a "resources" column between "text" and "start", and widens the "text" column from flexgrow: 1 to width: 200; Default: false
    • wbs - (optional) | PRO feature if true, prepends a "wbs" column to the grid; Default: false

Returns​

Without options, returns the standard 4-column set:

[
  { id: "text",     header: "Task name",  flexgrow: 1 },
  { id: "start",    header: "Start date", align: "center" },
  { id: "duration", header: "Duration",   align: "center", width: 100 },
  { id: "add-task", header: "Add task",   width: 37 },
]

With config.resources: true inserts "resources" column and widens "text":

[
  { id: "text",      header: "Task name",  width: 200 },
  { id: "resources", header: "Resources",  width: 110 },
  { id: "start",     header: "Start date", align: "center" },
  { id: "duration",  header: "Duration",   align: "center" },
  { id: "add-task",  header: "Add task",   width: 37 },
]

With config.wbs: true prepends a "wbs" column:

[
  { id: "wbs",      header: "WBS",        width: 80 },
  { id: "text",     header: "Task name",  flexgrow: 1 },
  { id: "start",    header: "Start date", align: "center" },
  { id: "duration", header: "Duration",   align: "center", width: 100 },
  { id: "add-task", header: "Add task",   width: 37 },
]

Example​

<script setup>
  import { Gantt, getDefaultColumns } from "@svar-ui/vue-gantt";
  import { getData } from "./common/data";

  const data = getData();
</script>

<template>
  <Gantt
    :tasks="data.tasks"
    :links="data.links"
    :scales="data.scales"
    :resources="data.resources"
    :assignments="data.assignments"
    :columns="getDefaultColumns({ resources: true })"
  />
</template>

Related articles: