columns

Description

An array of objects with configuration parameters for columns

Usage

columns?: [
  {
    width?: number,
    align?: "left" | "right" | "center",
    flexgrow?: number,
    header: string,
    id: string,
    template?: {
        (b: any): string;
    };
  } 
] | false;

Parameters

• flexgrow - (optional) specifies how much space (width) relative to the grid width the column will take (it will take no effect on columns with the set width); the property is specified as a number (if flexgrow is set to 1 in one column only, the column will take the full available width)
• width - (optional) the column width value from here; the default value is "120px"
• align - (optional) the text align value from here; the default value is "left"
• header - (required) the label for a column header
• id - (required) column id
• template - (optional) applies a template to a column; it's a function that takes an object and returns a string.

The columns property can be set to false to hide the tasks tree area.

Example

<script>
  import { getData } from "./common/data";
  import { Gantt } from "../src/";

  const data = getData();

  const columns = [
    { id: "text", header: "Task name", flexgrow: 2 },
    {
      id: "start",
      header: "Start date",
      flexgrow: 1,
      align: "center",
    },
    {
      id: "duration",
      header: "Duration",
      align: "center",
      flexgrow: 1,
    },
    {
      id: "action",
      header: "",
      width: 50,
      align: "center",
    },
  ];
</script>

<Gantt tasks={data.tasks} links={data.links} scales={data.scales} {columns} />

In the next example the area with tasks tree is hidden by setting columns to false:

<script>
  import { getData } from "./common/data";
  import { Gantt } from "@wx/svelte-gantt";

  const data = getData();

</script>

<Gantt
    tasks={data.tasks}
    links={data.links}
    scales={data.scales}
    columns={false} />