is it possible to add custom columns in the task list table?

[MrWorldWide101]

I am using it in a very large scale react project and the stake holders want to see planned duration and planned end date as well along with name , from and to Is it possible to add custom columns and make them editable?

[Graeme43]

Yes, by overriding providing the default TaskListTable and TaskListHeader functions. You will need to extend the Task interface if you want to add new columns in the data that you provide. See the styling options in the documentation at the bottom Link

[MaurilioNovais]

@MrWorldWide101 , as @Graeme43 mentioned, I created a slightly more didactic example, overwriting columns and rows, see:

Create a custom component for the columns (I created an interface following the original component's typing)

interface ITaskListColumn {
  rowHeight: number;
  rowWidth: string;
  fontFamily: string;
  fontSize: string;
  locale: string;
  tasks: Task[];
  selectedTaskId: string;
  setSelectedTask: (taskId: string) => void;
}

const TaskListColumn: React.FC<ITaskListColumn> = ({ tasks }) => {
  return (
    <div>
      {tasks.map((item) => {
        return (
          <Row style={{ marginTop: 32 }}>
            <Col breakPoint={{ xs: 4 }}>{item.name}</Col>
            <Col breakPoint={{ xs: 4 }}>{format(item.start, 'dd/MM/yyyy')}</Col>
            <Col breakPoint={{ xs: 4 }}>{format(item.end, 'dd/MM/yyyy')}</Col>
          </Row>
        );
      })}
    </div>
  );
};

Create a custom component for the header

interface ITaskListHeader {
  headerHeight: number;
  rowWidth: string;
  fontFamily: string;
  fontSize: string;
}

const TaskListHeader: React.FC<ITaskListHeader> = () => {
  return (
    <Row style={{ width: 400, marginTop: 18 }}>
      <Col breakPoint={{ xs: 4 }}>Título:</Col>
      <Col breakPoint={{ xs: 4 }}>Início:</Col>
      <Col breakPoint={{ xs: 4 }}>Fim:</Col>
    </Row>
  );
};

Use custom components by overwriting original rows and columns

<Gantt tasks={tasks} TaskListHeader={TaskListHeader} TaskListTable={TaskListColumn} />

The tasks is an array of task typed by Task[]

Hope I helped, thanks