I tried to make custom gantt chart by this github project.
react gantt chart github project
The reason I chose this project among many projects was because most of the features were implemented, so it was suitable for me, who had just started using React.
The first thing I tried was adding a column to the table.
For this, I added a few column items defined in TaskListHeader.tsx.
export const defaultProps: TOptionalProps = {
//columns: ["Name", "From", "To"],
columns2: ["Name", "From", "To","Duration","Progress","Cost"],
...
},
These column items are stored in an array of type JSX.Element[] called headerBody and then rendered between div elements.
// *** CONDITIONALS ***
const headerBody: JSX.Element[] = [];
columns2.forEach((column, index) => {
const columnElement = (
<React.Fragment key={index}>
{/* COLUMN */}
<div style={columnStyle}>{column}</div>
{/* SEPARATOR */}
{index !== columns2.length - 1 && <div style={columnSeparatorStyle} />}
</React.Fragment>
);
headerBody.push(columnElement);
});
return (
// ROOT
<div style={rootStyle}>
{/* HEADER */}
<div style={headerStyle}>
{/* BODY */}
{headerBody}
</div>
</div>
);};
TaskListHeader.defaultProps = defaultProps;
but the page is not modified although refresh and the previous columns value is displayed.
I would know what additional changes I need to make that column items can be added properly.