columns

Description

An array of objects with configuration parameters for columns in the grid area

Usage

columns?: [
  {
   width?: number,
   align?: "left" | "right" | "center",
   flexgrow?: number,
   header: string,
   resize?: boolean,
   id: string,
   sort?: boolean,
   template?: {
      (b: any): string;
   },
   cell?: any,
   editor?: string | any;
  } 
] | 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"
• resize - (optional) enables ("true" - default) or disables ("false") a drag handle for column resizing
• header - (required) the label for a column header
• id - (required) column id
• sort - (optional) if set to true (default), enables sorting in a column; if false, the sorting is disabled
• template - (optional) applies a template to a column; it's a function that takes an object and returns a string
• cell - (optional) the name of a custom Svelte component to be applied inside a cell; e.g., cell: CheckboxCell
• editor - (optional) enables inline editing in a grid column cell; it can be a string with the editor type (see types below) or an object with the next parameters:
  • type (string) - the editor type which can be one of the following: "text" | "combo" | "datepicker" | "richselect"
  • config - (optional) an object or a component name with editor configuration settings (for all editor types except "text"):
  • cell - (optional) any custom component
  • template - (optional) the function that takes an option and returns a string to display (template?:(obj) => string)

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

Default config

[
   { id: "text", header: "Task name", flexgrow: 1, sort: true },
   { id: "start", header: "Start date", align: "center", sort: true },
   { id: "duration", header: "Duration", width: 90, align: "center", sort: true },
   { id: "add-task", header: "", width: 50, align: "center" },
];

Example

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

  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: "add-task",
    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} />