A powerful and customizable Gantt Chart component built with React, TypeScript, and Tailwind CSS.
npm install react-gantt-flowA powerful and customizable Gantt Chart component built with React, TypeScript, and Tailwind CSS.
- Multiple View Modes: Supports month, week, day, and hour views
- Interactive Timeline: Drag and resize tasks directly on the timeline
- Task Hierarchy: Support for parent-child task relationships
- Search Functionality: Search tasks across different fields
- Localization: Built-in support for multiple languages (English, Korean, Japanese, Chinese, Spanish)
- Responsive Design: Adapts to different screen sizes
- Customizable Columns: Flexible column configuration with custom rendering
- Task Grouping: Group tasks by specific fields
- Year Navigation: Easy navigation between different years
- Column Editing: Inline editing capabilities for task columns
``bash`
npm install react-gantt-flowor
yarn add react-gantt-flow
`tsx
import { GanttChart } from "react-gantt-flow";
const MyGanttChart = () => {
const data = [
{
id: 1,
projectId: "1-project",
title: "Task 1",
startDate: new Date("2025-04-01T00:00:00"),
endDate: new Date("2025-04-05T23:59:59"),
status: "진행중",
children: [
{
id: 11,
projectId: "1-project",
title: "Sub Task 1",
startDate: new Date("2025-04-06T00:00:00"),
endDate: new Date("2025-04-07T23:59:59"),
status: "진행중",
},
],
},
];
const columns = [
{
field: "title",
headerName: "Task Name",
flex: 1,
},
{
field: "status",
headerName: "Status",
width: 200,
align: "center",
},
{
field: "startDate",
headerName: "Start Date",
width: 300,
align: "center",
editable: true,
type: "datetime",
valueGetter: (row) => row.startDate.toISOString(),
},
{
field: "endDate",
headerName: "End Date",
width: 300,
align: "center",
valueGetter: (row) => row.endDate.toISOString(),
editable: true,
},
];
return (
columns={columns}
viewMode="day"
defaultGridSectionWidth={597}
defaultExpanded
onTaskClick={(taskId, task) => console.log("Task clicked:", taskId, task)}
onTaskDoubleClick={(taskId, task) => console.log("Task double clicked:", taskId, task)}
onDataUpdate={(newData, oldData) => console.log("Data updated:", newData, oldData)}
/>
);
};
`
`tsx`
groupingColumn={{
field: "projectId",
}}
/>
`tsx`
locale="ko" // Supports "en", "ko", "ja", "zh", "es"
/>
`tsx`
`tsx`
| Prop | Type | Description |
| ----------------------- | -------------------------------------- | ------------------------------------------- |
| data | GanttChartData[] | Array of tasks with their properties |GanttColumn[]
| columns | | Configuration for the grid columns |"month" \| "week" \| "day" \| "hour"
| viewMode | | Default view mode |number
| defaultGridSectionWidth | | Initial width of the grid section |boolean
| defaultExpanded | | Whether tasks should be expanded by default |"en" \| "ko" \| "ja" \| "zh" \| "es"` | Language for the component |
| locale |
MIT