Configuring the editor

The task editor modal dialog consists of the fields for managing tasks data. To configure the editor fields (controls), use the editorShape property with the following types of the editor fields:

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

For example, the editor fields of the text type you can set in the following way:

const editorShape = [
  {
    key: "text",
    type: "text",
    label: "Name",
    config: {
      placeholder: "Add task name",
      focus: true,
    },
  },
  //other settings
];

To configure default editor fields, import the defaultEditorShape array, modify it, and pass the modified array to Gantt.

The example below shows how to remove the "Description" field that has the "details" key from the editor:

import { getData } from "./data";
import { Gantt, defaultEditorShape } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import React from "react";

const GanttComponent = () => {
  const data = getData();
  const editorShape = defaultEditorShape.filter(item => item.key !== 'details');

  return (
    <Gantt
      columns={false}
      tasks={data.tasks}
      editorShape={editorShape}
    />
  );
};

export default GanttComponent;