GanttChart Filtering
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.

Filtering

Smart.GanttChart component allows filtering of tasks and resources. In order to filter the GanttChart items the user has to use the filter input(s) that are displayed inside the Table header when filtering is enabled. The default filtering mode allows to filter by all columns whilte the advanced filterRow offers more specific filters for each individual column. The following properties are available for filtering:

  • taskFiltering - boolean property. When enabled a filter input is displayed above the Task Table header. Entering text inside the input triggers the tasks filtering. As a result only the tasks that correspond to the filter criteria are displayed.

    Here's how to enable taskFiltering:

    componentRef.current.taskFiltering = true
  • resourceFiltering - boolean property. When enabled a filter input is displayed above the Resource Table header. Entering text inside the input triggers resource filtering. As a result only the resources that correspond to the filter criteria are displayed.

    Here's how to enable resourceFiltering:

    componentRef.current.resourceFiltering = true
  • filterRow - boolean property. This property enables advanced filtering for the Task Panel. A filter row is displayed instead of the filter input. The filter row is positioned below the table header and allows to filter the tasks by column. FilterRow is only available for Task filtering.

    Here's how to enable filterRow:

    componentRef.current.filterRow = true
For AI tooling

Developer Quick Reference

Topic: gantt-filtering   Component: GanttChart   Framework: React

Main methods: (none detected)

Common config keys: filtering

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.