I cannot custom column

[Thái Ph?m Qu?c]

I am having an error when customizing a column in gantt, when I customize a function component it doesn't work with that column, it doesn't show what that component renders.

the fifth column in this image is custom column 

this is my code :

const taskValues = {

    id: 'id',

    name: 'subject',

    startDate: 'startDate',

    endDate: 'endDate',

    duration: 'remaining',

    personAssigned: 'personAssigned',

    progress: 'percentComplete',

    child: 'children',

    dependency: 'Predeceesor',

    manual: 'isManual'

  }

const columnTemplate = (props:any) => {

    return (

      <div>

        uuuuuuu

        {/* <AvatarGroup4 images={[props?.personAssigned?.length > 0 ? props.personAssigned : []]}/> */}

      </div>

    )  

  }

<Fragment>

          <GanttComponent

            id="Editing"

            dataSource={data}

            taskFields={taskValues}

            allowResizing={true}

            height={`${innerHeight - 120}px`}

            splitterSettings={splitterSettings}

            allowSelection={true}

            allowReordering={true}

            allowSorting={true}

            allowFiltering={true}

            showColumnMenu={true}

            editSettings={editSettings}

            taskMode="Custom"

            labelSettings={labelSettings}

            enableContextMenu={true}

            autoCalculateDateScheduling={false}

            dateFormat="dd/MM/yyyy"

            locale="vi"

            timelineSettings={{

              timelineUnitSize: 50,

              topTier: {

                unit: 'Week',

                format: 'dd/MM/yyyy'

              },

              bottomTier: {

                unit: 'Day',

                format: 'ddd'

              }

            }}

          >

            <ColumnsDirective>

              <ColumnDirective

                field="subject"

                headerText={t("Subject Title")}

                width="300"

                maxWidth="400"

              ></ColumnDirective>

              <ColumnDirective

                field="startDate"

                headerText={t("startDate")}

                format='dd/MM/yyyy'

                width="135"

                maxWidth="200"

              ></ColumnDirective>

              <ColumnDirective

                field="endDate"

                headerText={t("endDate")}

                format='dd/MM/yyyy'

                width="135"

                maxWidth="200"

              ></ColumnDirective>

              <ColumnDirective

                field="remaining"

                headerText={t("remaining")}

                width="130"

                maxWidth="150"

              ></ColumnDirective>

              <ColumnDirective

                field="personAssigned"

                headerText={t("Người thực hiện")}

                width="200"

                maxWidth="250"

                template={columnTemplate}

                textAlign='Center'

              ></ColumnDirective>

            </ColumnsDirective>

            <Inject

              services={[

                Sort,

                Filter,

                Resize,

                ColumnMenu,

                Edit,

                Toolbar,

                Selection,

                ContextMenu

              ]}

            />

          </GanttComponent>

        </Fragment>

[Ajithkumar Gopalakrishnan]

Hi Thai,

Greetings from Syncfusion Support.

We have reviewed the shared details and validated the code snippet on our end. However, we are unable to replicate the reported issue in our Gantt chart sample. We have attached a sample for your reference.

We suspect that the issue might be due to application-level dependency conflicts. When using the Gantt chart component, ensure that the required dependencies are installed with versions compatible with the Gantt chart's version. We have attached the sample and the package.json file for reference.

You can find a working example on StackBlitz.  

For more information, you may refer to the following link:

https://ej2.syncfusion.com/react/documentation/gantt/getting-started

If the issue persists, please share the full Gantt chart code along with the package version, theme version, and package.json details. Alternatively, if you can reproduce the issue in our sample and share it with us, we will validate it and provide further details.

Regards,
Ajithkumar G