Skip to main content

getResourceColumns

PRO

The functionality is available in PRO Edition only

Description​

Returns the default column configuration for the ResourceLoad component

You can import the helper from @svar-ui/vue-gantt.

Usage​

getResourceColumns(): IResourceColumn[];

IResourceColumn:

{
    id: string,
    header?: string,
    width?: number,
    flexgrow?: number,
    align?: "left" | "right" | "center",
    resize?: boolean,
    sort?: boolean | TSortFunction,
    getter?: (row: IComputedResource) => any,
    template?: (value: any) => string,
    cell?: any,
}

Returns​

Returns an array of the default column definitions used by ResourceLoad:

[
  { id: "name",  header: "Resources", flexgrow: 1, sort: true, resize: true },
  { id: "total", header: "Hours", width: 70, align: "center",
    getter: row => row.$total, sort: true },
]

Example​

Use getResourceColumns() as a starting point when building a custom column set. Call it once and store the result, then insert extra columns between the default ones:

<script setup>
  import { Gantt, ResourceLoad, getResourceColumns } from "@svar-ui/vue-gantt";

  const { tasks, links, scales, resources, assignments } = getData();

  const api = ref(null);

  const baseColumns = getResourceColumns();

  const columns = [
    ...baseColumns.slice(0, 1),
    {
      id: "role",
      header: "Role",
      align: "center",
      flexgrow: 1,
      resize: true,
    },
    {
      id: "overloaded",
      header: "Overloaded",
      width: 100,
      align: "center",
      getter: row => row.$overloaded,
      template: v => (v ? "yes" : "no"),
      resize: true,
    },
    ...baseColumns.slice(-1),
  ];
</script>

<template>
  <Gantt ref="api" :tasks="tasks" :links="links" :scales="scales" :resources="resources" :assignments="assignments" />
  <ResourceLoad :api="api" :columns="columns" />
</template>

Related articles: