{"id":15069977,"url":"https://github.com/matematuk/gantt-task-react","last_synced_at":"2025-05-14T15:06:02.212Z","repository":{"id":37615589,"uuid":"281748078","full_name":"MaTeMaTuK/gantt-task-react","owner":"MaTeMaTuK","description":"Gantt chart for React with Typescript","archived":false,"fork":false,"pushed_at":"2024-08-12T09:05:56.000Z","size":5632,"stargazers_count":985,"open_issues_count":151,"forks_count":572,"subscribers_count":20,"default_branch":"main","last_synced_at":"2025-05-10T11:35:08.087Z","etag":null,"topics":["gantt","gantt-chart","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MaTeMaTuK.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-22T18:00:14.000Z","updated_at":"2025-05-09T15:48:20.000Z","dependencies_parsed_at":"2023-11-23T17:26:35.652Z","dependency_job_id":"aa7ce8bd-bcf3-4a16-b389-ffad3fd10c32","html_url":"https://github.com/MaTeMaTuK/gantt-task-react","commit_stats":{"total_commits":141,"total_committers":12,"mean_commits":11.75,"dds":"0.43262411347517726","last_synced_commit":"e287736e7af865492345c815ae88ab2784bfff91"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaTeMaTuK%2Fgantt-task-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaTeMaTuK%2Fgantt-task-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaTeMaTuK%2Fgantt-task-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaTeMaTuK%2Fgantt-task-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MaTeMaTuK","download_url":"https://codeload.github.com/MaTeMaTuK/gantt-task-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254169172,"owners_count":22026209,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gantt","gantt-chart","react","typescript"],"created_at":"2024-09-25T01:46:06.636Z","updated_at":"2025-05-14T15:06:02.163Z","avatar_url":"https://github.com/MaTeMaTuK.png","language":"TypeScript","readme":"# gantt-task-react\n\n## Interactive Gantt Chart for React with TypeScript.\n\n![example](https://user-images.githubusercontent.com/26743903/88215863-f35d5f00-cc64-11ea-81db-e829e6e9b5c8.png)\n\n## [Live Demo](https://matematuk.github.io/gantt-task-react/)\n\n## Install\n\n```\nnpm install gantt-task-react\n```\n\n## How to use it\n\n```javascript\nimport { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';\nimport \"gantt-task-react/dist/index.css\";\n\nlet tasks: Task[] = [\n    {\n      start: new Date(2020, 1, 1),\n      end: new Date(2020, 1, 2),\n      name: 'Idea',\n      id: 'Task 0',\n      type:'task',\n      progress: 45,\n      isDisabled: true,\n      styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },\n    },\n    ...\n];\n\u003cGantt tasks={tasks} /\u003e\n```\n\nYou may handle actions\n\n```javascript\n\u003cGantt\n  tasks={tasks}\n  viewMode={view}\n  onDateChange={onTaskChange}\n  onTaskDelete={onTaskDelete}\n  onProgressChange={onProgressChange}\n  onDoubleClick={onDblClick}\n  onClick={onClick}\n/\u003e\n```\n\n## How to run example\n\n```\ncd ./example\nnpm install\nnpm start\n```\n\n## Gantt Configuration\n\n### GanttProps\n\n| Parameter Name                  | Type          | Description                                        |\n| :------------------------------ | :------------ | :------------------------------------------------- |\n| tasks\\*                         | [Task](#Task) | Tasks array.                                       |\n| [EventOption](#EventOption)     | interface     | Specifies gantt events.                            |\n| [DisplayOption](#DisplayOption) | interface     | Specifies view type and display timeline language. |\n| [StylingOption](#StylingOption) | interface     | Specifies chart and global tasks styles            |\n\n### EventOption\n\n| Parameter Name     | Type                                                                          | Description                                                                             |\n| :----------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |\n| onSelect           | (task: Task, isSelected: boolean) =\u003e void                                     | Specifies the function to be executed on the taskbar select or unselect event.          |\n| onDoubleClick      | (task: Task) =\u003e void                                                          | Specifies the function to be executed on the taskbar onDoubleClick event.               |\n| onClick            | (task: Task) =\u003e void                                                          | Specifies the function to be executed on the taskbar onClick event.                     |\n| onDelete\\*         | (task: Task) =\u003e void/boolean/Promise\u003cvoid\u003e/Promise\u003cboolean\u003e                   | Specifies the function to be executed on the taskbar on Delete button press event.      |\n| onDateChange\\*     | (task: Task, children: Task[]) =\u003e void/boolean/Promise\u003cvoid\u003e/Promise\u003cboolean\u003e | Specifies the function to be executed when drag taskbar event on timeline has finished. |\n| onProgressChange\\* | (task: Task, children: Task[]) =\u003e void/boolean/Promise\u003cvoid\u003e/Promise\u003cboolean\u003e | Specifies the function to be executed when drag taskbar progress event has finished.    |\n| onExpanderClick\\*  | onExpanderClick: (task: Task) =\u003e void;                                        | Specifies the function to be executed on the table expander click                       |\n| timeStep           | number                                                                        | A time step value for onDateChange. Specify in milliseconds.                            |\n\n\\* Chart undoes operation if method return false or error. Parameter children returns one level deep records.\n\n### DisplayOption\n\n| Parameter Name | Type    | Description                                                                                                 |\n| :------------- | :------ | :---------------------------------------------------------------------------------------------------------- |\n| viewMode       | enum    | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, QuarterYear, Year. |\n| viewDate       | date    | Specifies display date and time for display.                                                                |\n| preStepsCount  | number  | Specifies empty space before the fist task                                                                  |\n| locale         | string  | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                                    |\n| rtl            | boolean | Sets rtl mode.                                                                                              |\n\n### StylingOption\n\n| Parameter Name             | Type   | Description                                                                                    |\n| :------------------------- | :----- | :--------------------------------------------------------------------------------------------- |\n| headerHeight               | number | Specifies the header height.                                                                   |\n| ganttHeight                | number | Specifies the gantt chart height without header. Default is 0. It`s mean no height limitation. |\n| columnWidth                | number | Specifies the time period width.                                                               |\n| listCellWidth              | string | Specifies the task list cell width. Empty string is mean \"no display\".                         |\n| rowHeight                  | number | Specifies the task row height.                                                                 |\n| barCornerRadius            | number | Specifies the taskbar corner rounding.                                                         |\n| barFill                    | number | Specifies the taskbar occupation. Sets in percent from 0 to 100.                               |\n| handleWidth                | number | Specifies width the taskbar drag event control for start and end dates.                        |\n| fontFamily                 | string | Specifies the application font.                                                                |\n| fontSize                   | string | Specifies the application font size.                                                           |\n| barProgressColor           | string | Specifies the taskbar progress fill color globally.                                            |\n| barProgressSelectedColor   | string | Specifies the taskbar progress fill color globally on select.                                  |\n| barBackgroundColor         | string | Specifies the taskbar background fill color globally.                                          |\n| barBackgroundSelectedColor | string | Specifies the taskbar background fill color globally on select.                                |\n| arrowColor                 | string | Specifies the relationship arrow fill color.                                                   |\n| arrowIndent                | number | Specifies the relationship arrow right indent. Sets in px                                      |\n| todayColor                 | string | Specifies the current period column fill color.                                                |\n| TooltipContent             |        | Specifies the Tooltip view for selected taskbar.                                               |\n| TaskListHeader             |        | Specifies the task list Header view                                                            |\n| TaskListTable              |        | Specifies the task list Table view                                                             |\n\n- TooltipContent: [`React.FC\u003c{ task: Task; fontSize: string; fontFamily: string; }\u003e;`](https://github.com/MaTeMaTuK/gantt-task-react/blob/main/src/components/other/tooltip.tsx#L56)\n- TaskListHeader: `React.FC\u003c{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}\u003e;`\n- TaskListTable: `React.FC\u003c{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) =\u003e void; }\u003e;`\n\n### Task\n\n| Parameter Name | Type     | Description                                                                                           |\n| :------------- | :------- | :---------------------------------------------------------------------------------------------------- |\n| id\\*           | string   | Task id.                                                                                              |\n| name\\*         | string   | Task display name.                                                                                    |\n| type\\*         | string   | Task display type: **task**, **milestone**, **project**                                               |\n| start\\*        | Date     | Task start date.                                                                                      |\n| end\\*          | Date     | Task end date.                                                                                        |\n| progress\\*     | number   | Task progress. Sets in percent from 0 to 100.                                                         |\n| dependencies   | string[] | Specifies the parent dependencies ids.                                                                |\n| styles         | object   | Specifies the taskbar styling settings locally. Object is passed with the following attributes:       |\n|                |          | - **backgroundColor**: String. Specifies the taskbar background fill color locally.                   |\n|                |          | - **backgroundSelectedColor**: String. Specifies the taskbar background fill color locally on select. |\n|                |          | - **progressColor**: String. Specifies the taskbar progress fill color locally.                       |\n|                |          | - **progressSelectedColor**: String. Specifies the taskbar progress fill color globally on select.    |\n| isDisabled     | bool     | Disables all action for current task.                                                                 |\n| fontSize       | string   | Specifies the taskbar font size locally.                                                              |\n| project        | string   | Task project name                                                                                     |\n| hideChildren   | bool     | Hide children items. Parameter works with project type only                                           |\n\n\\*Required\n\n## License\n\n[MIT](https://oss.ninja/mit/jaredpalmer/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatematuk%2Fgantt-task-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatematuk%2Fgantt-task-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatematuk%2Fgantt-task-react/lists"}