Skip to main content

defaultEditorItems

Description​

An array of objects with the default configuration for the Editor component

This array defines the default set of fields (items) used in the task editor dialog. You can modify or extend it and pass it to the Editor component via the items property.

Default config​

defaultEditorItems = [
    {
        key: "text",
        comp: "text",
        label: "Name",
        config: {
            placeholder: "Add task name",
        },
    },
    {
        key: "details",
        comp: "textarea",
        label: "Description",
        config: {
            placeholder: "Add description",
        },
    },
    {
        key: "type",
        comp: "select",
        label: "Type",
    },
    {
        key: "start",
        comp: "date",
        label: "Start date",
    },
    {
        key: "end",
        comp: "date",
        label: "End date",
    },
    {
        key: "duration",
        comp: "counter",
        label: "Duration",
        config: {
            min: 1,
        },
    },
    {
        key: "progress",
        comp: "slider",
        label: "Progress",
        config: {
            min: 1,
            max: 100,
        },
    },
    {
        key: "links",
        comp: "links",
        label: "",
    },
];

Parameters​

Each item follows the structure documented in the Editor API.

Example​

The example shows how to use the default fields, remove "details" (description), and pass the result to the Editor:

<script>
  import { Gantt, Editor, defaultEditorItems } from "wx-svelte-gantt";

  let api;

  // Remove the "Description" field
  const items = defaultEditorItems.filter(item => item.key !== "details");
</script>

<Gantt bind:this={api} />
<Editor {api} {items} />

Related articles: