Configuring the task editor

Basic usage

To use the task editor, import both Gantt and Editor from wx-svelte-gantt and pass the api reference to both:

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

  let api = $state();
</script>

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

Configuring the Editor

The task editor dialog allows you to configure a set of fields (controls) for viewing and editing task data. The task editor modal dialog consists of configurable fields (controls) for managing task data. To define the editor fields, use the items property of the standalone Editor component.

Supported editor field types include:

• text and textarea
• date
• slider
• select
• counter
• links

For example, to define a simple text input field, add its name to the comp field:

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

  let api = $state();

  const items = [
   {
    key: "text",
    comp: "text",
    label: "Name",
    config: {
      placeholder: "Add task name"
    },
  },
];
</script>

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

To configure the default editor fields, import the defaultEditorItems array, modify it as needed, and pass the updated array to the Editor component via the items prop.

The example below shows how to remove the "Description" field (which uses the key "details") from the editor:

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

  let api = $state();

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

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

The next example demonstrates how to selectively use specific fields from defaultEditorItems to configure a custom editor layout, and how to customize the editor's bottom toolbar with Save/Delete/Close buttons.

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

  let api = $state();
  const data = getData();

  // Define only the fields you want to include
  const keys = ["text", "type", "start", "end", "duration", "progress", "details"];
  const items = keys.map(key => defaultEditorItems.find(op => op.key === key));

  const bottomBar = {
  items: [
   { comp: "button", type: "secondary", text: "Close", id: "close" },
   { comp: "spacer" },
   { comp: "button", type: "danger", text: "Delete", id: "delete" },
   { comp: "button", type: "primary", text: "Save", id: "save" },
  ],
  };
</script>

<Gantt bind:this={api} tasks={data.tasks} links={data.links} scales={data.scales} />
<Editor {api} {items} {bottomBar} topBar=false placement="modal" />

The next example demonstrates how to enable the TimePicker for comp: "date":

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

	const { tasks, links} = getData();

	let api = $state();

	const items = defaultEditorItems.map(ed => ({
		...ed,
		...(ed.comp === "date" && { config: { time: true } }),
	}));

</script>

<Gantt
	bind:this={api}
	{tasks}
	{links}
	durationUnit={"hour"}
/>
<Editor {api} {items} />
~~~svelte

---

**Related articles**: 

- [Adding a custom editor dialog](/guides/configuration/adding_custom_dialog)
- [defaultTaskTypes](/helpers/defaultTaskTypes)