Update readme.md
This commit is contained in:
committed by
GitHub
parent
2d22d3f5be
commit
b11f64ffe2
58
readme.md
58
readme.md
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
# SVAR React Gantt Chart
|
# SVAR React Gantt Chart
|
||||||
|
|
||||||
:globe_with_meridians: [Website](https://svar.dev/react/gantt/) • :bulb: [Getting Started](https://docs.svar.dev/react/gantt/getting_started/) • :eyes: [Demos](https://docs.svar.dev/react/gantt/samples/)
|
[Website](https://svar.dev/react/gantt/) • [Getting Started](https://docs.svar.dev/react/gantt/getting_started/) • [Live Demos](https://docs.svar.dev/react/gantt/samples/)
|
||||||
|
|
||||||
[](https://www.npmjs.com/package/@svar-ui/react-gantt)
|
[](https://www.npmjs.com/package/@svar-ui/react-gantt)
|
||||||
[](https://github.com/svar-widgets/react-gantt/blob/main/license.txt)
|
[](https://github.com/svar-widgets/react-gantt/blob/main/license.txt)
|
||||||
@@ -10,51 +10,50 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
[SVAR React Gantt](https://svar.dev/react/gantt/) is a customizable, high-performance React Gantt chart component that helps you visualize and manage project timelines. Its intuitive interface allows users to add, edit, and organize tasks and dependencies directly on the timeline via drag-and-drop or through a simple task edit form.
|
[SVAR React Gantt](https://svar.dev/react/gantt/) is a customizable, high-performance Gantt chart component written in React. It offers a developer-friendly API, full TypeScript support, React 19 compatibility, and flexible CSS styling.
|
||||||
|
|
||||||
TypeScript support, React 19 compatibility, and clean UI make it a modern and reliable choice for building interactive Gantt charts.
|
The component supports multiple task types, dependencies, custom time scales, and light/dark themes. It is designed to handle thousands of tasks efficiently (see [demo with 10k tasks](https://docs.svar.dev/react/gantt/samples/#/performance/willow)).
|
||||||
|
|
||||||
<div align="center">
|
<div align="center">
|
||||||
<img src="https://cdn.svar.dev/public/gantt-chart-ui.png" alt="SVAR React Gantt Chart - Screenshot">
|
<img src="https://svar.dev/images/github/basic-gantt-react.gif" alt="SVAR React Gantt UI">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
### ✨ Key Features
|
Interactive, drag-and-drop interface allows users to add, edit, and organize tasks and dependencies directly on the timeline or through a simple task edit form.
|
||||||
|
|
||||||
- Interactive drag-and-drop interface
|
### ✨ Core Features
|
||||||
- Intuitive and customizable task edit form
|
|
||||||
- Set task dependencies on the timeline or in a popup form
|
- Interactive timeline with drag-and-drop
|
||||||
- Showing task progress on the taskbar
|
- Customizable task edit form
|
||||||
|
- Task dependencies
|
||||||
|
- Task progress visualization
|
||||||
- Hierarchical view of sub tasks
|
- Hierarchical view of sub tasks
|
||||||
- Configurable timeline (hours, days, weeks)
|
- Configurable time scale (hours, days, weeks, sprints or stages)
|
||||||
- Flexible time units: support for hours and minutes
|
- Flexible time units: support for hours and minutes
|
||||||
- Custom time scales: define custom periods like sprints or stages
|
- Customizable grid columns
|
||||||
- Ability to use custom HTML in grid cells
|
|
||||||
- Sorting tasks in grid
|
- Sorting tasks in grid
|
||||||
- Toolbar and context menu
|
- Toolbar and context menu
|
||||||
- Tooltips for taskbars
|
- Tooltips for taskbars
|
||||||
- Weekends/holidays highlights
|
|
||||||
- Zooming with scroll
|
- Zooming with scroll
|
||||||
- Hotkey support for common actions
|
- Hotkey support for common actions
|
||||||
- Fast performance with large data sets
|
- Fast performance with large data sets
|
||||||
- Localization
|
- Localization
|
||||||
- Light and dark skins
|
|
||||||
- Full TypeScript support
|
- Full TypeScript support
|
||||||
- React 18 & 19 compatible
|
|
||||||
|
|
||||||
### 🚀 PRO Edition
|
### 🚀 PRO Edition
|
||||||
|
|
||||||
SVAR React Gantt is available in open-source and PRO Editions. The PRO Edition offers additional features and automation logic:
|
In addition to free, open-source core, SVAR React Gantt offers the PRO Edition with additional features and automation logic:
|
||||||
|
|
||||||
- Work days calendar
|
- Work days calendar (non-linear calendar)
|
||||||
- Auto-scheduling (forward mode and Finish-to-Start dependencies)
|
- Auto-scheduling (forward mode and Finish-to-Start dependencies)
|
||||||
- Critical path
|
- Critical path
|
||||||
- Baselines
|
- Baselines
|
||||||
- Split tasks
|
- Split tasks
|
||||||
- Vertical markers
|
- Vertical markers
|
||||||
- Unscheduled tasks
|
|
||||||
- Undo/redo
|
- Undo/redo
|
||||||
|
- Summary task automation
|
||||||
|
- Export to PNG, PDF, Excel, and MS Project (export/import)
|
||||||
|
|
||||||
Visit the [pricing page](https://svar.dev/react/gantt/pricing/) for full feature comparison and licensing details.
|
Visit the [pricing page](https://svar.dev/react/gantt/pricing/) for full feature comparison and free trial.
|
||||||
|
|
||||||
[Check out the demos](https://docs.svar.dev/react/gantt/samples/) to see all SVAR React Gantt features in action.
|
[Check out the demos](https://docs.svar.dev/react/gantt/samples/) to see all SVAR React Gantt features in action.
|
||||||
|
|
||||||
@@ -63,36 +62,43 @@ Visit the [pricing page](https://svar.dev/react/gantt/pricing/) for full feature
|
|||||||
To start using **SVAR React Gantt**, simply import the package and include the desired component in your React file:
|
To start using **SVAR React Gantt**, simply import the package and include the desired component in your React file:
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import { Gantt } from "@svar-ui/react-gantt";
|
import { Gantt } from '@svar-ui/react-gantt';
|
||||||
import "@svar-ui/react-gantt/all.css";
|
import '@svar-ui/react-gantt/all.css';
|
||||||
|
|
||||||
|
export default function MyComponent() {
|
||||||
const tasks = [
|
const tasks = [
|
||||||
{
|
{
|
||||||
id: 20,
|
id: 20,
|
||||||
text: "New Task",
|
text: 'New Task',
|
||||||
start: new Date(2024, 5, 11),
|
start: new Date(2024, 5, 11),
|
||||||
end: new Date(2024, 6, 12),
|
end: new Date(2024, 6, 12),
|
||||||
duration: 1,
|
duration: 1,
|
||||||
progress: 2,
|
progress: 2,
|
||||||
type: "task",
|
type: 'task',
|
||||||
lazy: false,
|
lazy: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 47,
|
id: 47,
|
||||||
text: "[1] Master project",
|
text: '[1] Master project',
|
||||||
start: new Date(2024, 5, 12),
|
start: new Date(2024, 5, 12),
|
||||||
end: new Date(2024, 7, 12),
|
end: new Date(2024, 7, 12),
|
||||||
duration: 8,
|
duration: 8,
|
||||||
progress: 0,
|
progress: 0,
|
||||||
parent: 0,
|
parent: 0,
|
||||||
type: "summary",
|
type: 'summary',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const myComponent => (<Gantt tasks={tasks} />);
|
|
||||||
|
return <Gantt tasks={tasks} />;
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
See the [getting started guide](https://docs.svar.dev/react/gantt/getting_started/) to learn how to configure data sources, customize columns, and enable editing.
|
See the [getting started guide](https://docs.svar.dev/react/gantt/getting_started/) to learn how to configure data sources, customize columns, and enable editing.
|
||||||
|
|
||||||
|
### ⭐ Show Your Support
|
||||||
|
|
||||||
|
If SVAR React Gantt helps your project, consider giving us a star! It helps other developers discover this library and motivates us to keep improving.
|
||||||
|
|
||||||
### :speech_balloon: Need Help?
|
### :speech_balloon: Need Help?
|
||||||
|
|
||||||
[Post an Issue](https://github.com/svar-widgets/react-gantt/issues/) or use our [community forum](https://forum.svar.dev).
|
[Post an Issue](https://github.com/svar-widgets/react-gantt/issues/) or use our [community forum](https://forum.svar.dev).
|
||||||
|
|||||||
Reference in New Issue
Block a user