Skip to main content

defaultEditorItems

Description​

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

defaultEditorItems contains only the editor fields that are always available. Fields that appear conditionally (such as Unscheduled support) are not included in this list.

This property gets deprecated in version 3.0. To obtain the full set of editor items, including conditional fields, use getEditorItems()

Default config​

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.

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 in React.

import { useRef, useState, useEffect } from "react";
import { Gantt, Editor, defaultEditorItems } from "@svar-ui/react-gantt";

export default function App() {
  const ganttRef = useRef(null);
  const [api, setApi] = useState(null);

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

  // After mount, the Gantt instance should be available on ref.current
  useEffect(() => {
    if (ganttRef.current) {
      setApi(ganttRef.current);
    }
  }, []);

  return (
    <>
      <Gantt ref={ganttRef} />
      <Editor api={api} items={items} />
    </>
  );
}

Related articles: