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: "unscheduled",
        comp: "twostate",
        label: "",
        config: { value: true, text: "Unschedule", textActive: "Schedule" },
    },
    {
        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);
    }
  }, [ganttRef.current]);

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

FIXME: The Gantt component must forward its instance via React refs (forwardRef). If the library does not forward refs, replace the ref usage with the library's provided method for obtaining the API (for example a callback prop like onReady or an explicit getApi function).

Related articles: