Svar React Gantt

https://github.com/svar-widgets/react-gantt
Admin
A customizable, high-performance React Gantt chart component for building project timelines and...
Tokens:32,947
Snippets:336
Trust Score:8.5
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Default Toolbar Implementation

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/Toolbar.md

Basic setup using the Toolbar component with a Gantt reference.

```jsx
import { Gantt, Toolbar } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';
import { useRef } from 'react';

export default function GanttWithToolbar() {
  const ganttRef = useRef();

  return (
    <div>
      <Toolbar api={ganttRef.current} />
      <Gantt ref={ganttRef} tasks={tasks} />
    </div>
  );
}
```

--------------------------------

### Install SVAR React Gantt

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/README.md

Use npm to install the package in your React project.

```bash
npm install @svar-ui/react-gantt
```

--------------------------------

### Basic Editor Implementation

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/Editor.md

Standard setup for an Editor component linked to a Gantt chart instance.

```jsx
import { Gantt, Editor } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';
import { useRef } from 'react';

export default function GanttWithEditor() {
  const ganttRef = useRef();

  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      <div style={{ flex: 1 }}>
        <Gantt ref={ganttRef} tasks={tasks} />
      </div>
      <div style={{ width: '400px', borderLeft: '1px solid #ccc' }}>
        <Editor api={ganttRef.current} />
      </div>
    </div>
  );
}
```

--------------------------------

### Full Gantt Theme Composition

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/ThemeComponents.md

Example of nesting multiple components like Toolbar and Editor within a single theme provider.

```jsx
import { Gantt, Toolbar, Editor, Willow } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';
import { useRef } from 'react';

export default function FullGanttWithTheme() {
  const ganttRef = useRef();

  return (
    <Willow>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
        <Toolbar api={ganttRef.current} />
        
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', flex: 1 }}>
          <Gantt ref={ganttRef} tasks={tasks} />
          <Editor api={ganttRef.current} />
        </div>
      </div>
    </Willow>
  );
}
```

--------------------------------

### Configure Gantt Component

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/INDEX.md

Various configuration patterns for the Gantt component, ranging from minimal setups to full-featured and read-only implementations.

```jsx
<Gantt tasks={tasks} />
```

```jsx
<Gantt
  tasks={tasks}
  links={links}
  resources={resources}
  scales={scales}
  cellWidth={120}
  cellHeight={40}
  zoom={true}
  readonly={false}
  onSelectTask={handleSelect}
/>
```

```jsx
<Gantt tasks={tasks} readonly={true} />
```

```jsx
<Gantt
  tasks={tasks}
  undo={true}
  splitTasks={true}
  criticalPath={true}
  calendar={workCalendar}
/>
```

--------------------------------

### Basic Gantt Implementation

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/README.md

Initialize the Gantt component by importing the library and CSS, then providing a task array.

```jsx
import { Gantt } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';

export default function MyGantt() {
  const tasks = [
    {
      id: 1,
      text: 'Task 1',
      start: new Date(2024, 0, 1),
      end: new Date(2024, 0, 10),
      duration: 9,
      progress: 50,
      type: 'task',
    },
  ];

  return <Gantt tasks={tasks} />;
}
```

--------------------------------

### Implement Basic Header Menu

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/HeaderMenu.md

Integrate the HeaderMenu by passing the Gantt API reference via a ref to enable column-specific actions.

```jsx
import { Gantt, HeaderMenu } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';
import { useRef } from 'react';

export default function GanttWithHeaderMenu() {
  const ganttRef = useRef();

  return (
    <>
      <HeaderMenu api={ganttRef.current} />
      <Gantt ref={ganttRef} tasks={tasks} />
    </>
  );
}
```

--------------------------------

### Initialize Basic Gantt Chart

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/00-START-HERE.txt

Displays a basic Gantt chart by importing the component and passing the tasks data.

```jsx
import { Gantt } from '@svar-ui/react-gantt';
<Gantt tasks={tasks} />
```

--------------------------------

### Gantt with API Access and Event Handling

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/Gantt.md

Demonstrates how to interact with the Gantt instance using a ref and handle events via both component props and direct subscription.

```jsx
import { Gantt } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';
import { useRef, useEffect } from 'react';

export default function GanttWithAPI() {
  const ganttRef = useRef();

  const handleTaskSelect = (ev) => {
    console.log('Selected task:', ev.id);
    const task = ganttRef.current.getTask(ev.id);
    console.log('Task details:', task);
  };

  const handleTaskUpdate = (ev) => {
    console.log('Updated task:', ev.id, ev.task);
  };

  useEffect(() => {
    if (ganttRef.current) {
      // Subscribe to events
      ganttRef.current.on('select-task', handleTaskSelect);
      ganttRef.current.on('update-task', handleTaskUpdate);

      return () => {
        ganttRef.current.detach('select-task', handleTaskSelect);
        ganttRef.current.detach('update-task', handleTaskUpdate);
      };
    }
  }, []);

  const tasks = [
    {
      id: 1,
      text: 'Design',
      start: new Date(2024, 0, 1),
      end: new Date(2024, 0, 10),
      duration: 9,
      type: 'task',
    },
  ];

  return (
    <Gantt
      ref={ganttRef}
      tasks={tasks}
      onSelectTask={handleTaskSelect}
      onUpdateTask={handleTaskUpdate}
    />
  );
}
```

--------------------------------

### View Project File Structure

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/INDEX.md

The directory layout for the documentation files within the project.

```text
documentation/
├── README.md (overview and quick start)
├── INDEX.md (this file)
├── configuration.md (all config options)
├── types.md (TypeScript definitions)
├── exported-utilities.md (functions and constants)
├── module-structure.md (source files and dependencies)
└── api-reference/
    ├── Gantt.md
    ├── Toolbar.md
    ├── ContextMenu.md
    ├── Editor.md
    ├── Tooltip.md
    ├── HeaderMenu.md
    ├── ResourceLoad.md
    └── ThemeComponents.md
```

--------------------------------

### Import Core Styles

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/module-structure.md

Import the core CSS file to apply basic layout, grid, and component styles.

```jsx
import '@svar-ui/react-gantt/style.css';
```

--------------------------------

### Import CSS styles

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/README.md

Include the base styles or the full suite including PRO features in your project entry point.

```jsx
// Base styles (required)
import '@svar-ui/react-gantt/style.css';

// OR all styles including PRO features
import '@svar-ui/react-gantt/all.css';
```

--------------------------------

### Minimal Gantt Configuration

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/configuration.md

The simplest implementation requiring only the tasks prop.

```jsx
<Gantt tasks={tasks} />
```

--------------------------------

### Package Import Paths

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/exported-utilities.md

All components, themes, configuration builders, and registration utilities are available from the main package export.

```jsx
import {
  // Components
  Gantt,
  Toolbar,
  ContextMenu,
  Editor,
  Tooltip,
  HeaderMenu,
  ResourceLoad,
  
  // Themes
  Material,
  Willow,
  WillowDark,
  
  // Configuration
  defaultEditorItems,
  defaultToolbarButtons,
  defaultMenuOptions,
  defaultColumns,
  defaultTaskTypes,
  
  // Configuration builders
  getDefaultColumns,
  getResourceColumns,
  getEditorItems,
  getToolbarButtons,
  getEditorButtons,
  getMenuOptions,
  
  // Registration
  registerScaleUnit,
  registerEditorItem,
  
  // Version
  version,
} from '@svar-ui/react-gantt';
```

--------------------------------

### Using Configuration Defaults

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/exported-utilities.md

Use default functions to generate configuration objects instead of hard-coding them to ensure maintainability.

```jsx
// Good: Flexible and maintainable
import { getDefaultColumns } from '@svar-ui/react-gantt';

const columns = getDefaultColumns({ resources: true });
<Gantt columns={columns} />

// Less ideal: Hard to extend
const columns = [
  { id: 'text', label: 'Task Name', width: 300 },
  { id: 'start', label: 'Start', width: 100 },
  // ... etc
];
```

--------------------------------

### Integrated Gantt + Resource Load Layout

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/ResourceLoad.md

Demonstrates a complex layout integrating Gantt, Toolbar, ContextMenu, Editor, and ResourceLoad components.

```jsx
import {
  Gantt,
  ResourceLoad,
  Toolbar,
  ContextMenu,
  Editor,
} from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';
import { useRef } from 'react';

export default function IntegratedLayout() {
  const ganttRef = useRef();

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <Toolbar api={ganttRef.current} />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 400px', flex: 1 }}>
        <ContextMenu api={ganttRef.current}>
          {() => <Gantt ref={ganttRef} tasks={tasks} resources={resources} />}
        </ContextMenu>

        <div style={{ borderLeft: '1px solid #ccc' }}>
          <Editor api={ganttRef.current} placement="sidebar" />
        </div>
      </div>

      <div
        style={{
          height: '250px',
          borderTop: '1px solid #ccc',
          overflow: 'auto',
        }}
      >
        <ResourceLoad
          api={ganttRef.current}
          mode="grid"
        />
      </div>
    </div>
  );
}
```

--------------------------------

### Gantt Actions and Events

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/README.md

Overview of how to trigger actions and listen to events within the Gantt component.

```APIDOC
## Actions and Events

### Description
The Gantt component supports various actions to manipulate data and events to track state changes. Actions can be executed via `exec(action, payload)` and events can be listened to via props, the ref, or middleware.

### Common Actions
- `select-task`, `deselect-task`
- `update-task`, `add-task`, `delete-task`
- `drag-task`, `edit-task`
- `add-link`, `delete-link`
- `undo`, `redo`
- `show-editor`, `hide-editor`

### Event Handling
- **Props**: `<Gantt onSelectTask={handler} />`
- **Ref**: `ganttRef.current.on('select-task', handler)`
- **Middleware**: `ganttRef.current.intercept('select-task', handler)`
```

--------------------------------

### Basic Context Menu implementation

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/ContextMenu.md

Wrap the Gantt component with ContextMenu to enable default menu behavior.

```jsx
import { Gantt, ContextMenu } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';
import { useRef } from 'react';

export default function GanttWithContextMenu() {
  const ganttRef = useRef();

  return (
    <ContextMenu api={ganttRef.current}>
      {() => <Gantt ref={ganttRef} tasks={tasks} />}
    </ContextMenu>
  );
}
```

--------------------------------

### Import Full Styles

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/module-structure.md

Import the full CSS file to include styles for PRO features like critical path highlighting and advanced resource load.

```jsx
import '@svar-ui/react-gantt/all.css';
```

--------------------------------

### Main Component Imports

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/module-structure.md

Import primary components from the package entry point.

```jsx
import { Gantt, Toolbar, Editor } from '@svar-ui/react-gantt';
```

--------------------------------

### Define package exports in package.json

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/module-structure.md

Configures entry points for different module systems and style files.

```json
{
  "exports": {
    ".": {
      "types": "./types/index.d.ts",
      "import": "./dist/index.es.js",
      "require": "./dist/index.cjs.js",
      "default": "./dist/index.es.js"
    },
    "./style.css": "./dist/index.css",
    "./all.css": "./dist-full/index.css"
  },
  "types": "./types/index.d.ts",
  "main": "./dist/index.cjs.js",
  "module": "./dist/index.es.js"
}
```

--------------------------------

### Initialize SVAR React Gantt

Source: https://github.com/svar-widgets/react-gantt/blob/main/readme.md

Import the Gantt component and its CSS, then pass a task array to the component to render the chart.

```jsx
import { Gantt } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/all.css';

export default function MyComponent() {
  const tasks = [
    {
      id: 20,
      text: 'New Task',
      start: new Date(2024, 5, 11),
      end: new Date(2024, 6, 12),
      duration: 1,
      progress: 2,
      type: 'task',
      lazy: false,
    },
    {
      id: 47,
      text: '[1] Master project',
      start: new Date(2024, 5, 12),
      end: new Date(2024, 7, 12),
      duration: 8,
      progress: 0,
      parent: 0,
      type: 'summary',
    },
  ];

  return <Gantt tasks={tasks} />;
}
```

--------------------------------

### Access Package Version

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/exported-utilities.md

Retrieves the current version string of the package as defined in package.json.

```javascript
const version: string = version;
```

```jsx
import { version } from '@svar-ui/react-gantt';

console.log('Gantt version:', version); // "2.7.1"
```

--------------------------------

### Generate menu options with getMenuOptions

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/exported-utilities.md

Creates context menu options based on feature configuration.

```javascript
const options = getMenuOptions({
  splitTasks?: boolean;
  taskTypes?: ITaskType[];
  summary?: boolean;
  group?: boolean;
});
```

--------------------------------

### Imperative Methods

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/INDEX.md

Methods available via the Gantt component ref.

```APIDOC
## Imperative Methods

### Methods
- **getState()** - Returns IGanttState - Snapshot of all state.
- **getReactiveState()** - Returns IReactiveState - Reactive state with subscribe().
- **getTask(id)** - Returns ITask | null - Get a specific task by ID.
- **getResource(id)** - Returns IResource | null - Get a specific resource by ID.
- **exec(action, payload)** - Returns void - Trigger an action.
- **on(action, handler)** - Returns void - Listen to an action.
- **serialize()** - Returns string - Export state as JSON.
```

--------------------------------

### Apply a Theme

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/INDEX.md

Wrap the Gantt component in a theme provider component.

```jsx
import { Gantt, Willow } from '@svar-ui/react-gantt';

<Willow>
  <Gantt tasks={tasks} />
</Willow>
```

--------------------------------

### Configure Resource Loading

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/00-START-HERE.txt

Displays resource workload information alongside the Gantt chart.

```jsx
<Gantt ... resources={resources} assignments={assignments} />
<ResourceLoad api={ganttRef.current} />
```

--------------------------------

### Implement Full-featured Gantt Layout

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/README.md

Integrates Toolbar, ContextMenu, Editor, and Tooltip components with the main Gantt chart.

```jsx
import {
  Gantt,
  Toolbar,
  ContextMenu,
  Editor,
  Tooltip,
  Willow,
} from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';
import { useRef } from 'react';

export default function FullGantt() {
  const ganttRef = useRef();

  return (
    <Willow>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
        <Toolbar api={ganttRef.current} />

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 350px', flex: 1 }}>
          <ContextMenu api={ganttRef.current}>
            {() => (
              <Tooltip api={ganttRef.current}>
                <Gantt
                  ref={ganttRef}
                  tasks={tasks}
                  links={links}
                  resources={resources}
                  assignments={assignments}
                />
              </Tooltip>
            )}
          </ContextMenu>

          <div style={{ borderLeft: '1px solid #ccc', overflow: 'auto' }}>
            <Editor api={ganttRef.current} />
          </div>
        </div>
      </div>
    </Willow>
  );
}
```

--------------------------------

### CSS Import Patterns

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/module-structure.md

Choose between core styles or full styles depending on feature requirements.

```jsx
// Core styles only
import '@svar-ui/react-gantt/style.css';

// OR all styles with PRO features
import '@svar-ui/react-gantt/all.css';
```

--------------------------------

### Basic Tooltip Wrapper

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/Tooltip.md

Wraps the Gantt component with a Tooltip, requiring a reference to the Gantt API.

```jsx
import { Gantt, Tooltip } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';
import { useRef } from 'react';

export default function GanttWithTooltip() {
  const ganttRef = useRef();

  return (
    <Tooltip api={ganttRef.current}>
      <Gantt ref={ganttRef} tasks={tasks} />
    </Tooltip>
  );
}
```

--------------------------------

### Generate toolbar buttons with getToolbarButtons

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/exported-utilities.md

Creates toolbar button configurations based on feature flags.

```javascript
const buttons = getToolbarButtons({
  undo?: boolean;
  splitTasks?: boolean;
  group?: boolean;
});
```

--------------------------------

### Individual Utility Imports

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/module-structure.md

Import specific utility functions or column configurations as needed.

```jsx
import {
  defaultColumns,
  getDefaultColumns,
  registerEditorItem,
} from '@svar-ui/react-gantt';
```

--------------------------------

### getMenuOptions(config)

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/exported-utilities.md

Generates context menu options based on feature configuration.

```APIDOC
## getMenuOptions(config)

### Description
Generate context menu options based on feature configuration.

### Returns
- **IMenuOption[]** - Array of menu option definitions
```

--------------------------------

### Basic Resource Load Display

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/ResourceLoad.md

Initializes a ResourceLoad component linked to a Gantt instance via a ref.

```jsx
import { Gantt, ResourceLoad } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';
import { useRef } from 'react';

export default function GanttWithResourceLoad() {
  const ganttRef = useRef();

  const tasks = [
    {
      id: 1,
      text: 'Task 1',
      start: new Date(2024, 0, 1),
      end: new Date(2024, 0, 10),
      duration: 9,
    },
  ];

  const resources = [
    { id: 1, name: 'Developer 1' },
    { id: 2, name: 'Developer 2' },
  ];

  const assignments = [
    { id: 1, taskId: 1, resourceId: 1 },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', height: '100vh' }}>
      <div>
        <Gantt
          ref={ganttRef}
          tasks={tasks}
          resources={resources}
          assignments={assignments}
        />
      </div>
      <div style={{ borderTop: '1px solid #ccc' }}>
        <ResourceLoad api={ganttRef.current} />
      </div>
    </div>
  );
}
```

--------------------------------

### Display a Gantt Chart

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/INDEX.md

Basic implementation of the Gantt component with required styles.

```jsx
import { Gantt } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';

<Gantt tasks={tasks} />
```

--------------------------------

### Implement TypeScript support

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/README.md

Utilize provided interfaces for type-safe task definitions and component references.

```typescript
import { Gantt, IApi } from '@svar-ui/react-gantt';
import { ITask, ILink } from '@svar-ui/gantt-store';

const ganttRef: React.RefObject<IApi> = useRef(null);

const tasks: ITask[] = [
  {
    id: 1,
    text: 'Task 1',
    start: new Date(),
    end: new Date(),
    duration: 10,
    progress: 50,
    type: 'task',
  },
];

<Gantt
  ref={ganttRef}
  tasks={tasks}
  onSelectTask={(ev) => console.log(ev.id)} // Type-safe event
/>
```

--------------------------------

### defaultMenuOptions

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/exported-utilities.md

Default context menu options for common task operations.

```APIDOC
## defaultMenuOptions

### Description
Default context menu options. Includes items for common task operations like add, edit, delete, indent, outdent, and conditional items based on feature flags.
```

--------------------------------

### Programmatically show context menu

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/ContextMenu.md

Use the IContextMenuHandle to trigger the menu display manually.

```jsx
const menuRef = useRef();

// Programmatically show the context menu at a point
menuRef.current.show(event, /* optional data object */);
```

--------------------------------

### version

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/exported-utilities.md

Retrieves the current version string of the package.

```APIDOC
## version

### Description
A string property containing the current package version, read directly from package.json.

### Usage Example
```javascript
import { version } from '@svar-ui/react-gantt';

console.log('Gantt version:', version);
```
```

--------------------------------

### Export public API from index.js

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/module-structure.md

The main entry point for the library, aggregating all public components, themes, and utility functions for external consumption.

```javascript
import Gantt from './components/Gantt.jsx';
import Toolbar from './components/Toolbar.jsx';
import ContextMenu from './components/ContextMenu.jsx';
import Editor from './components/Editor.jsx';
import HeaderMenu from './components/grid/HeaderMenu.jsx';
import ResourceLoad from './components/resource/ResourceLoad.jsx';
import Tooltip from './widgets/Tooltip.jsx';
import Material from './themes/Material.jsx';
import Willow from './themes/Willow.jsx';
import WillowDark from './themes/WillowDark.jsx';

export {
  // From gantt-store
  defaultEditorItems,
  defaultToolbarButtons,
  defaultMenuOptions,
  defaultColumns,
  defaultTaskTypes,
  getDefaultColumns,
  getResourceColumns,
  getEditorItems,
  getToolbarButtons,
  getEditorButtons,
  getMenuOptions,
  registerScaleUnit,
  // From react-editor
  registerEditorItem,
  // Version
  version,
  // Components
  Gantt,
  ContextMenu,
  HeaderMenu,
  Toolbar,
  Tooltip,
  Editor,
  ResourceLoad,
  Material,
  Willow,
  WillowDark,
};
```

--------------------------------

### Full-featured Gantt Configuration

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/configuration.md

A comprehensive configuration including data sources, display settings, scales, and event handlers.

```jsx
<Gantt
  tasks={tasks}
  links={links}
  resources={resources}
  assignments={assignments}
  selected={[1]}
  activeTask={1}
  start={new Date(2024, 0, 1)}
  end={new Date(2024, 11, 31)}
  lengthUnit="day"
  durationUnit="day"
  cellWidth={100}
  cellHeight={38}
  scaleHeight={36}
  gridWidth={300}
  displayMode="all"
  cellBorders="full"
  scales={[
    { unit: 'month', step: 1, format: '%F %Y' },
    { unit: 'week', step: 1, format: 'W%w' },
    { unit: 'day', step: 1, format: '%j' },
  ]}
  zoom={true}
  autoScale={true}
  readonly={false}
  undo={true}
  splitTasks={true}
  summary={true}
  wbs={true}
  groupBy={{ field: 'type' }}
  taskTypes={customTaskTypes}
  onSelectTask={(ev) => console.log('Selected:', ev.id)}
  onUpdateTask={(ev) => console.log('Updated:', ev.id)}
/>
```

--------------------------------

### IContextMenuHandle.show(event, data)

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/ContextMenu.md

Programmatically triggers the context menu to appear at the location of the provided event.

```APIDOC
## IContextMenuHandle.show(event, data)

### Description
Displays the context menu programmatically at the position of the specified event. An optional data object can be passed to provide context to the menu actions.

### Parameters
- **event** (Event) - Required - The DOM event that triggered the menu.
- **data** (Object) - Optional - Additional data to associate with the menu invocation.
```

--------------------------------

### Registering Custom Components

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/exported-utilities.md

Register custom editors and scale units once at application startup before using them in components.

```jsx
// App.tsx
import { registerEditorItem, registerScaleUnit } from '@svar-ui/react-gantt';

// Register once at startup
registerEditorItem('priority-select', PrioritySelectComponent);
registerScaleUnit('fortnight', fortnightConfig);

// Now use throughout the app
function MyComponent() {
  const items = [
    { key: 'priority', comp: 'priority-select', label: 'Priority' },
  ];
  return <Editor items={items} />;
}
```

--------------------------------

### IConfig

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/types.md

Configuration properties for the Gantt component.

```APIDOC
## IConfig

### Description
Defines the configuration object for the Gantt component, including tasks, links, resources, scales, and display settings.
```

--------------------------------

### Configure Webpack for react-gantt

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/module-structure.md

Standard Webpack configuration including loaders for JavaScript and CSS.

```javascript
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};
```

--------------------------------

### Define Task Dependencies

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/README.md

Links establish relationships between tasks using source and target IDs with specific types like FS, SS, FF, or SF.

```javascript
const links = [
  { source: 3, target: 4, type: 'FS' },  // Task A → Task B (Finish-to-Start)
  { source: 4, target: 5, type: 'FS', lag: 5 },  // Task B → Milestone (5 days after)
];
```

--------------------------------

### ContextMenu Component Props

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/ContextMenu.md

Configuration properties for the ContextMenu component.

```APIDOC
## ContextMenu Component Props

### Description
Properties used to configure the behavior and content of the ContextMenu.

### Parameters
- **api** (Object) - Required - The API instance from the Gantt component.
- **options** (Array) - Optional - A list of custom menu items to display instead of the default actions.
- **filter** (Function) - Optional - A function to filter menu items based on the current task state.
- **resolver** (Function) - Optional - A custom function to resolve which task is associated with the click event.
- **onClick** (Function) - Optional - Callback triggered when a menu action is selected.
```

--------------------------------

### Handle Context Clicks

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/INDEX.md

Wrap the Gantt component in a ContextMenu provider.

```jsx
<ContextMenu api={ganttRef.current}>
  {() => <Gantt ref={ganttRef} tasks={tasks} />}
</ContextMenu>
```

--------------------------------

### Define Resources and Assignments

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/README.md

Resources are defined independently and mapped to tasks via assignments.

```javascript
const resources = [
  { id: 1, name: 'Alice', type: 'person' },
  { id: 2, name: 'Bob', type: 'person' },
];

const assignments = [
  { id: 1, taskId: 1, resourceId: 1 },  // Alice on Task 1
  { id: 2, taskId: 1, resourceId: 2 },  // Bob on Task 1
];
```

--------------------------------

### Generate editor buttons with getEditorButtons

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/exported-utilities.md

Creates button configurations for editor bars.

```javascript
const buttons = getEditorButtons({
  resources?: boolean;
  autoSave?: boolean;
  splitTasks?: boolean;
});
```

--------------------------------

### Gantt Component Configuration

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/Gantt.md

The Gantt component accepts a variety of configuration props to define tasks, links, resources, and visual settings.

```APIDOC
## Gantt Component Props

### Description
Configuration properties for the Gantt component to manage tasks, timeline, and display settings.

### Parameters
- **tasks** (ITask[]) - Optional - Array of task objects to render.
- **links** (ILink[]) - Optional - Array of dependency links between tasks.
- **resources** (IResource[] | null) - Optional - Array of resource objects.
- **assignments** (Array) - Optional - Array of task-to-resource assignment mappings.
- **selected** (number[]) - Optional - Array of task IDs to highlight.
- **activeTask** (number | null) - Optional - ID of the task to show in the editor.
- **scales** (IScale[]) - Optional - Timescale configuration.
- **start** (Date | null) - Optional - Project start date.
- **end** (Date | null) - Optional - Project end date.
- **lengthUnit** ('day' | 'hour') - Optional - Unit for calculating task duration display.
- **durationUnit** ('day' | 'hour') - Optional - Unit for interpreting task duration values.
- **cellWidth** (number) - Optional - Width of each timeline cell in pixels.
- **cellHeight** (number) - Optional - Height of each row in pixels.
- **scaleHeight** (number) - Optional - Height of the timescale header in pixels.
- **gridWidth** (number | null) - Optional - Width of the left grid panel.
- **displayMode** ('all' | 'chart' | 'grid') - Optional - Visibility mode for grid and chart.
- **taskTypes** (ITaskType[]) - Optional - Task type definitions.
- **markers** (IMarker[]) - Optional - Vertical markers to overlay on timeline.
- **zoom** (boolean | IZoomConfig) - Optional - Mouse-wheel zoom configuration.
- **baselines** (boolean | IBaseline[]) - Optional - Baseline versions of tasks for comparison.
- **rollups** (boolean | IRollupConfig) - Optional - Rollup calculations configuration.
- **autoScale** (boolean) - Optional - Automatically adjust timeline to fit all tasks.
- **unscheduledTasks** (boolean) - Optional - Show tasks without start/end dates.
- **criticalPath** (boolean | null) - Optional - Highlight tasks on the critical path.
- **schedule** ({ type: 'forward' | 'backward' }) - Optional - Auto-scheduling direction.
- **projectStart** (Date | null) - Optional - Explicit project start date.
- **projectEnd** (Date | null) - Optional - Explicit project end date.
- **calendar** (ICalendar | null) - Optional - Work-time calendar.
- **calendars** (ICalendar[]) - Optional - Multiple calendars.
- **undo** (boolean) - Optional - Enable undo/redo functionality (PRO).
- **splitTasks** (boolean) - Optional - Allow splitting tasks (PRO).
- **summary** (boolean | null) - Optional - Auto-calculate summary task dates (PRO).
- **slack** (boolean) - Optional - Show slack/float time (PRO).
- **groupBy** ({ field: string; ... } | null) - Optional - Group tasks by field (PRO).
- **wbs** (boolean) - Optional - Show WBS codes (PRO).
```

--------------------------------

### IApi Interface Methods

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/Gantt.md

A collection of methods available on the Gantt component's ref to manage state, retrieve data, and handle events.

```APIDOC
## IApi Methods

### getState
- **Signature**: `() => IGanttState`
- **Returns**: Immutable state snapshot
- **Description**: Get the current complete state object.

### getReactiveState
- **Signature**: `() => IReactiveState`
- **Returns**: Reactive store
- **Description**: Get reactive state with `.subscribe()` support.

### getStores
- **Signature**: `() => { data: DataStore }`
- **Returns**: Stores object
- **Description**: Access the internal DataStore instance.

### exec
- **Signature**: `(action: string, payload?: any) => void`
- **Description**: Execute a store action by name.

### getTask
- **Signature**: `(id: number) => ITask | null`
- **Returns**: Task or null
- **Description**: Get a task by ID.

### getResource
- **Signature**: `(id: number) => IResource | null`
- **Returns**: Resource or null
- **Description**: Get a resource by ID.

### getCalendar
- **Signature**: `(id: string) => ICalendar | null`
- **Returns**: Calendar or null
- **Description**: Get a calendar by ID.

### getTaskCalendar
- **Signature**: `(task: ITask) => ICalendar | null`
- **Returns**: Calendar or null
- **Description**: Get the calendar for a specific task.

### getResourceCalendar
- **Signature**: `(resource: IResource) => ICalendar | null`
- **Returns**: Calendar or null
- **Description**: Get the calendar for a specific resource.

### getTaskResources
- **Signature**: `(id: number) => IResource[]`
- **Returns**: Array
- **Description**: Get all resources assigned to a task.

### getResourceTasks
- **Signature**: `(id: number) => ITask[]`
- **Returns**: Array
- **Description**: Get all tasks assigned to a resource.

### serialize
- **Signature**: `(config?: any) => string`
- **Returns**: JSON string
- **Description**: Export the current state as JSON.

### setNext
- **Signature**: `(handler: EventBusHandler) => EventBusHandler`
- **Returns**: Handler
- **Description**: Add a middleware/interceptor to the event bus.

### intercept
- **Signature**: `(action: string, handler: (ev: any) => boolean) => void`
- **Description**: Intercept an action before execution. Return false to prevent.

### on
- **Signature**: `(action: string, handler: (ev: any) => void) => void`
- **Description**: Listen to an action after execution.

### detach
- **Signature**: `(action: string, handler: (ev: any) => void) => void`
- **Description**: Remove an action listener.

### getHistory
- **Signature**: `() => any | null`
- **Returns**: History or null
- **Description**: Get undo/redo history (when undo is enabled).

### getTable
- **Signature**: `(waitRender?: boolean) => ITableApi | null`
- **Returns**: Grid API or null
- **Description**: Access the grid table API for advanced grid operations.
```

--------------------------------

### Configure Vite for react-gantt

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/module-structure.md

Vite configuration ensuring the package is included in dependency optimization.

```javascript
import react from '@vitejs/plugin-react';

export default {
  plugins: [react()],
  optimizeDeps: {
    include: ['@svar-ui/react-gantt'],
  },
};
```

--------------------------------

### Accessing defaultMenuOptions

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/exported-utilities.md

Provides the default context menu options for task operations.

```javascript
const options: IMenuOption[] = defaultMenuOptions;
```

--------------------------------

### Toolbar with Split Tasks Enabled

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/Toolbar.md

Configuring the Toolbar for a Gantt chart that supports split tasks.

```jsx
import { Gantt, Toolbar } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';
import { useRef } from 'react';

export default function GanttWithSplitTasks() {
  const ganttRef = useRef();

  return (
    <div>
      <Toolbar api={ganttRef.current} />
      <Gantt
        ref={ganttRef}
        tasks={tasks}
        splitTasks={true}
        undo={true}
      />
    </div>
  );
}
```

--------------------------------

### ResourceLoad Component

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/README.md

Displays resource workload as a grid or chart, showing allocation percentages.

```APIDOC
## <ResourceLoad />

### Description
Resource workload display (grid or chart mode). Shows allocation percentages.

### Props
- **api** (Object) - Required - The Gantt API instance obtained via ref
- **mode** (string) - Optional - Display mode (e.g., 'grid')
```

--------------------------------

### Toolbar Component Usage

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/README.md

Provides action buttons for common tasks. Requires the Gantt API instance passed via the api prop.

```jsx
<Toolbar api={ganttRef.current} />
```

--------------------------------

### IBarConfig Interface

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/Editor.md

Configuration object for defining the layout and items of the top and bottom action bars.

```typescript
{
  items?: IToolbarItem[];        // Custom bar buttons
  layout?: 'row' | 'column';     // Arrangement of buttons
  type?: 'top' | 'bottom';       // Bar position
}
```

--------------------------------

### Resource Load with Chart Mode

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/ResourceLoad.md

Enables the visual chart representation of resource load by setting the mode property to 'chart'.

```jsx
import { Gantt, ResourceLoad } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';
import { useRef } from 'react';

export default function ResourceLoadChart() {
  const ganttRef = useRef();

  return (
    <div style={{ display: 'grid', gridTemplateRows: '1fr 300px' }}>
      <Gantt
        ref={ganttRef}
        tasks={tasks}
        resources={resources}
        assignments={assignments}
      />
      <ResourceLoad
        api={ganttRef.current}
        mode="chart"
      />
    </div>
  );
}
```

--------------------------------

### Show Resource Workload

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/INDEX.md

Display resource workload data alongside the Gantt chart.

```jsx
<div style={{ display: 'grid', gridTemplateRows: '1fr 250px' }}>
  <Gantt ref={ref} tasks={tasks} resources={resources} />
  <ResourceLoad api={ref.current} mode="grid" />
</div>
```

--------------------------------

### Define default scale configuration

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/configuration.md

Configures the timescale units and format strings for the header rows.

```javascript
defaultScales = [
  { unit: 'month', step: 1, format: '%F %Y' },  // January 2024
  { unit: 'day', step: 1, format: '%j' },       // 1, 2, 3...
]
```

--------------------------------

### IMenuOption Interface

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/ContextMenu.md

Defines the structure for menu items, including handlers, visibility, and sub-menu configurations.

```typescript
{
  id: string;                                    // Unique action identifier
  text: string;                                  // Display text (translatable)
  subtext?: string;                              // Subtitle text (translatable)
  comp?: string;                                 // Component type: 'item', 'separator'
  data?: IMenuOption[];                          // Submenu items
  handler?: (item: IMenuOption) => void;         // Custom handler (auto-wired by gantt if handled action)
  isDisabled?: (task: ITask, state: IGanttState, calendar?: ICalendar, activeId?: any) => boolean;
  isHidden?: (task: ITask, state: IGanttState, activeId?: any) => boolean;
  icon?: string;                                 // Icon CSS class
  shortcut?: string;                             // Keyboard shortcut text (display only)
}
```

--------------------------------

### Toolbar Component

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/README.md

Provides action buttons for common tasks such as adding, deleting, undoing, and redoing.

```APIDOC
## <Toolbar />

### Description
Action buttons for common tasks (add, delete, undo, redo, etc.).

### Props
- **api** (Object) - Required - The Gantt API instance obtained via ref
```

--------------------------------

### Editor with Validation and Hotkeys

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/api-reference/Editor.md

Implementing custom field validation logic and keyboard shortcuts for editor actions.

```jsx
import { Gantt, Editor } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/style.css';
import { useRef } from 'react';

export default function AdvancedEditor() {
  const ganttRef = useRef();

  const customItems = [
    {
      key: 'text',
      comp: 'text',
      label: 'Task Name',
      required: true,
      validation: (value) => value && value.length >= 3,
    },
    {
      key: 'duration',
      comp: 'counter',
      label: 'Duration (days)',
      config: { min: 1, max: 365 },
    },
  ];

  const customHotkeys = {
    'ctrl+s': (ev) => {
      ev.preventDefault();
      console.log('Manual save triggered');
    },
    'escape': (ev) => {
      ganttRef.current.exec('show-editor', { id: null });
    },
  };

  return (
    <Editor
      api={ganttRef.current}
      items={customItems}
      autoSave={false}
      focus={true}
      hotkeys={customHotkeys}
    />
  );
}
```

--------------------------------

### Generate default columns with getDefaultColumns

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/exported-utilities.md

Generates column definitions based on enabled features like resources or WBS.

```javascript
const columns = getDefaultColumns({ resources?: boolean, wbs?: boolean });
```

```jsx
import { getDefaultColumns } from '@svar-ui/react-gantt';

const columns = getDefaultColumns({ resources: true, wbs: false });
// Returns: [text, start, end, duration, progress, resources]
```

--------------------------------

### Configure Next.js for react-gantt

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/module-structure.md

Uses dynamic imports to disable server-side rendering for the component.

```jsx
import dynamic from 'next/dynamic';

const Gantt = dynamic(
  () => import('@svar-ui/react-gantt').then(mod => mod.Gantt),
  { ssr: false }
);
```

--------------------------------

### Project directory structure

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/module-structure.md

Visual representation of the source code organization, distinguishing between exported components and internal implementation files.

```text
src/
├── index.js (entry point)
├── context.js (Store context provider)
├── components/
│   ├── Gantt.jsx (main component)
│   ├── Layout.jsx (internal layout wrapper)
│   ├── Toolbar.jsx
│   ├── ContextMenu.jsx
│   ├── Editor.jsx
│   ├── Fullscreen.jsx (internal)
│   ├── Resizer.jsx (internal)
│   ├── TimeScale.jsx (internal)
│   ├── chart/
│   │   ├── Chart.jsx (internal)
│   │   ├── Bars.jsx (internal)
│   │   ├── BarSegments.jsx (internal)
│   │   ├── CellGrid.jsx (internal)
│   │   ├── Links.jsx (internal)
│   │   ├── Rollups.jsx (internal)
│   │   ├── TimeScale.jsx (internal)
│   │   └── ... (other internal chart components)
│   ├── grid/
│   │   ├── Grid.jsx (internal)
│   │   ├── HeaderMenu.jsx (exported)
│   │   └── ... (other internal grid components)
│   ├── editor/
│   │   ├── DateTimePicker.jsx (internal)
│   │   ├── GridSection.jsx (internal)
│   │   ├── LinkTypeCell.jsx (internal)
│   │   ├── Links.jsx (internal)
│   │   ├── Resources.jsx (internal)
│   │   ├── Segments.jsx (internal)
│   │   └── ... (other internal editor components)
│   └── resource/
│       ├── ResourceLoad.jsx (exported)
│       ├── LoadCell.jsx (internal)
│       ├── NameCell.jsx (internal)
│       ├── NameCellCompact.jsx (internal)
│       └── ... (other internal resource components)
├── widgets/
│   └── Tooltip.jsx (exported)
├── themes/
│   ├── Material.jsx (exported)
│   ├── Willow.jsx (exported)
│   ├── WillowDark.jsx (exported)
│   ├── Material.css
│   ├── Willow.css
│   └── WillowDark.css
├── helpers/
│   ├── debug.js (development utilities)
│   ├── grid.js (grid utility functions)
│   ├── hotkey.js (keyboard event handling)
│   ├── locate.js (DOM element location utilities)
│   ├── modeResizeObserver.js (resize observation)
│   ├── prepareConfig.js (configuration normalization)
│   ├── reorder.js (drag/drop reordering)
│   ├── setTaskResources.js (resource assignment)
│   └── zoom.js (zoom event handling)
└── full-css.js (CSS bundling helper)
```

--------------------------------

### IApi Interface

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/README.md

The IApi interface provides methods for state access, data retrieval, action execution, event handling, and serialization.

```APIDOC
## IApi Interface

### Description
The IApi object is accessed via `useRef()` on the Gantt component and serves as the primary interface for interacting with the Gantt instance.

### Methods
- **getState()**: Returns the current state of the Gantt.
- **getReactiveState()**: Returns the reactive state of the Gantt.
- **getTask(id)**: Retrieves a specific task by its ID.
- **getResource(id)**: Retrieves a specific resource by its ID.
- **getCalendar(id)**: Retrieves a specific calendar by its ID.
- **exec(action, payload)**: Triggers a specific action with a provided payload.
- **on(event, handler)**: Attaches an event listener.
- **detach(event, handler)**: Removes an event listener.
- **intercept(event, handler)**: Intercepts an event (return false to prevent).
- **serialize()**: Exports the current state.
```

--------------------------------

### getToolbarButtons(config)

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/exported-utilities.md

Generates toolbar buttons based on provided feature flags.

```APIDOC
## getToolbarButtons(config)

### Description
Generates toolbar buttons based on feature flags.

### Parameters
- **undo** (boolean) - Optional - Include undo/redo buttons
- **splitTasks** (boolean) - Optional - Include split/merge buttons
- **group** (boolean) - Optional - Include grouping toggle button

### Returns
- **IToolbarItem[]** - Array of toolbar item definitions
```

--------------------------------

### Test Gantt component

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/README.md

Use standard React Testing Library utilities to verify component rendering and task presence.

```jsx
import { render, screen } from '@testing-library/react';
import { Gantt } from '@svar-ui/react-gantt';

test('renders tasks', () => {
  const tasks = [
    { id: 1, text: 'Task 1', start: new Date(), end: new Date(), type: 'task' }
  ];
  
  const { container } = render(<Gantt tasks={tasks} />);
  expect(screen.getByText('Task 1')).toBeInTheDocument();
});
```

--------------------------------

### HeaderMenu Component Usage

Source: https://github.com/svar-widgets/react-gantt/blob/main/_autodocs/README.md

Provides a context menu for grid column headers, triggered by a right-click.

```jsx
<HeaderMenu api={ganttRef.current} />
```
Tokens:
Raw