GanttChart Sorting
JavaScriptJavaScriptAngularAngularVueVueReactReact

GanttChart for React

React version of this topic (compatible with React 19+). Keep the same configuration logic from JavaScript and pass it as component props.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

import React, { useMemo, useRef } from 'react';
import { GanttChart } from 'smart-webcomponents-react/ganttchart';
import 'smart-webcomponents-react/source/styles/smart.default.css';

export default function App() {
  const componentRef = useRef(null);
  const componentProps = useMemo(() => ({
    // Copy this topic's JavaScript configuration here.
  }), []);

  return <GanttChart ref={componentRef} {...componentProps}></GanttChart>;
}

Use componentRef.current for API methods in this topic.

Sorting

Smart.GanttChart component uses a Table component which allows to sort the tasks/resources based on a column. The sortMode property determines the sorting mode of the element. Tasks/Resources can be sorted by setting the sortMode property to either one (allows to sort by a single column), many (allows to sort by multiple columns) or none ( disabled sorting ). By default sorting is disabled.

Once the sortMode property is configured to allow sorting, the user has two options to apply sorting to the tasks/resources:

  • Click on a Table column header inside the GanttChart.
  • Call the API's sort method by passing an array of strings which correspond to taskColumn/resourceColumns column values or objects that contain the same with an additional sortOrder attribute that allows to preset the sorting order ('asc' - ascending order or 'desc' - descending order). For example: 
    const ganttChart = componentRef.current;

componentRef.current.sortMode = 'one';                            
componentRef.current.sort([
 { value: 'duration', sortOrder: 'asc', type: 'task' }, 
 { value: 'progress', sortOrder: 'asc', type: 'resource' }
]);

    As a result the Tasks will be sorted by their duration in ascending order and the Resources will be sorted by progress in ascending order as well.

The timeline is updated as soon as a Table columns is sorted.

Sorting can be cleared at any time via the clearSort method.

componentRef.current.clearSort()
For AI tooling

Developer Quick Reference

Topic: gantt-sorting   Component: GanttChart   Framework: React

Main methods: sort(), clearSort()

Common config keys: (none detected)

Implementation Notes

Compatibility: React 19+   API access pattern: const componentRef = useRef(null) + componentRef.current.method()

Lifecycle guidance: Use useMemo for large config objects and call imperative API through componentRef.current after first render.

Common pitfalls:

  • Recreating columns/dataSource objects on every render can reset component state.
  • Calling API methods before ref is available causes runtime errors.
  • Mixing controlled and imperative updates without sync can lead to stale UI.

Validation checklist:

  • Keep config objects memoized when possible.
  • Guard API calls with ref existence checks.
  • Verify CSS theme import is present once per app.