Example of Filtering in React Gantt Component

All Controls

/

Gantt

/

Filtering

This sample visualizes the manned lunar mission, which landed the first human on the Moon using the Apollo 11 spacecraft in the year 1969. This sample demonstrates the Filtering feature available in Gantt chart. You can filter a particular column using filter menu available in the columns. This sample is also enabled with toolbar searching option, using which you can filter the Gantt content across all the columns.

More Details...

Task Name

Start Date

Duration

End Date

Predecessor

treeGridFiltering_gridcontrol_header_table

Launch and flight to lunar orbit	07/16/2024 03:32:00	85.83 hours	07/19/2024 05:21:50
Apollo 11 blasts off from launch pad	07/16/2024 03:32:00	0 hours	07/16/2024 03:32:00
Entry to earth’s orbit	07/16/2024 03:32:00	0.2 hours	07/16/2024 03:44:00	2FS
Travelling in earth’s orbit	07/16/2024 03:44:00	0.64 hours	07/16/2024 04:22:13	3FS
Trajectory change toward the Moon	07/16/2024 04:22:13	0.5 hours	07/16/2024 04:52:00	4FS
extraction maneuver performed	07/16/2024 04:52:00	0 hours	07/16/2024 04:52:00	5FS
Travelling toward moon and entering into lunar orbit	07/16/2024 04:52:00	11.5 hours	07/16/2024 04:21:50	6FS
Midcourse correction, sharpening the course and testing the engine	07/16/2024 11:22:00	6 hours	07/17/2024 05:21:50
Reached half the distance spanning between earth and moon	07/17/2024 05:22:00	14.65 hours	07/17/2024 08:00:50
Reached 3/4th distance spanning between earth and moon	07/17/2024 08:02:00	20.33 hours	07/18/2024 04:21:50
Reached distance 45000 miles from moon	07/18/2024 11:22:00	18 hours	07/19/2024 05:21:50
Lunar descent	07/19/2024 05:21:50	26.91 hours	07/20/2024 08:16:40
Lunar orbiting (30 orbits)	07/19/2024 05:21:50	7.5 hours	07/20/2024 12:52:00	11FS
Landing site identified	07/20/2024 12:52:00	0 hours	07/20/2024 12:52:00	13FS
Eagle separated from Columbia.	07/20/2024 05:44:00	0 hours	07/20/2024 05:44:00
Eagle’s decent to Moon	07/20/2024 05:44:00	2.54 hours	07/20/2024 08:16:40	15FS
Landing	07/20/2024 08:17:40	6.89 hours	07/21/2024 03:11:00
Eagle’s touch down	07/20/2024 08:17:40	0 hours	07/20/2024 08:17:40
Radio communication and performing post landing checklist	07/20/2024 08:17:40	3.42 hours	07/20/2024 11:43:00	18FS
Preparations for EVA (Extra Vehicular Activity)	07/20/2024 11:43:00	2.94 hours	07/21/2024 02:39:33	19FS
Hatch open and climbing down the moon	07/21/2024 02:39:33	0.28 hours	07/21/2024 02:56:15	20FS
Armstrong stepped down on the moon	07/21/2024 02:56:15	0.25 hours	07/21/2024 03:11:00	21FS
Lunar surface operations	07/21/2024 02:56:15	1.9 hours	07/21/2024 04:50:00
Soil sample collections	07/21/2024 02:56:15	0.25 hours	07/21/2024 03:11:00
Aldrin joined armstrong	07/21/2024 03:11:00	0.5 hours	07/21/2024 03:41:00	24FS
planted the lunar flag assembly	07/21/2024 03:41:00	0.08 hours	07/21/2024 03:46:00	25FS
President richard nixon’s telephone-radio transmission	07/21/2024 03:48:00	0.05 hours	07/21/2024 03:51:00
Collect rock samples, photos and other mission controls	07/21/2024 03:52:00	0.97 hours	07/21/2024 04:50:00
Lunar ascent	07/21/2024 04:51:00	16.53 hours	07/21/2024 09:23:00
Climbing the eagle to ascent	07/21/2024 04:51:00	0.15 hours	07/21/2024 05:00:00
Hatch closing	07/21/2024 05:00:00	0 hours	07/21/2024 05:00:00	30FS
Final housekeeping	07/21/2024 05:02:00	2.97 hours	07/21/2024 08:00:00
Resting of astronauts	07/21/2024 08:00:00	7 hours	07/21/2024 03:00:00	32FS
Preparation for lift off and ascent engine started	07/21/2024 03:00:00	2.9 hours	07/21/2024 05:54:00	33FS
Eagle lifted off	07/21/2024 05:54:00	0 hours	07/21/2024 05:54:00	34FS
Eagle’s travel toward Columbia	07/21/2024 05:54:00	3.48 hours	07/21/2024 09:23:00	35FS
Return	07/21/2024 09:24:00	2.28 hours	07/21/2024 11:41:00
Eagle docked with columbia	07/21/2024 09:24:00	0.18 hours	07/21/2024 09:35:00
Eagle’s ascent stage jettisoned into lunar orbit	07/21/2024 09:35:00	2.1 hours	07/21/2024 11:41:00	38FS
Decent toward earth and Splashdown	07/21/2024 11:50:00	65.02 hours	07/24/2024 04:51:00
Spacecraft reaches 1/4th distance spanning between moon and earth	07/21/2024 11:50:00	16.83 hours	07/22/2024 04:40:00
Spacecraft travels to midway point of journey	07/22/2024 04:40:00	23.33 hours	07/23/2024 04:00:00	41FS
Spacecraft travels to 3/4th point of journey	07/23/2024 04:00:00	17.33 hours	07/24/2024 09:19:59	42FS
Crew prepares for splashdown	07/24/2024 11:47:00	4.55 hours	07/24/2024 04:20:00
Command and service modules separates	07/24/2024 04:20:00	0.25 hours	07/24/2024 04:35:00	44FS
Command module re-enters the Earth’s atmosphere	07/24/2024 04:35:00	0.25 hours	07/24/2024 04:50:00	45FS
Spacecraft splashes near USS hornet	07/24/2024 04:51:00	0 hours	07/24/2024 04:51:00

Launch and flight to lunar orbit

Apollo 11 blasts off from launch pad

Entry to earth’s orbit

Travelling in earth’s orbit

Trajectory change toward the Moon

extraction maneuver performed

Travelling toward moon and entering into lunar orbit

Midcourse correction, sharpening the course and testing the engine

Reached half the distance spanning between earth and moon

Reached 3/4th distance spanning between earth and moon

Reached distance 45000 miles from moon

Lunar descent

Lunar orbiting (30 orbits)

Landing site identified

Eagle separated from Columbia.

Eagle’s decent to Moon

Landing

Eagle’s touch down

Radio communication and performing post landing checklist

Preparations for EVA (Extra Vehicular Activity)

Hatch open and climbing down the moon

Armstrong stepped down on the moon

Lunar surface operations

Soil sample collections

Aldrin joined armstrong

planted the lunar flag assembly

President richard nixon’s telephone-radio transmission

Collect rock samples, photos and other mission controls

Lunar ascent

Climbing the eagle to ascent

Hatch closing

Final housekeeping

Resting of astronauts

Preparation for lift off and ascent engine started

Eagle lifted off

Eagle’s travel toward Columbia

Return

Eagle docked with columbia

Eagle’s ascent stage jettisoned into lunar orbit

Decent toward earth and Splashdown

Spacecraft reaches 1/4th distance spanning between moon and earth

Spacecraft travels to midway point of journey

Spacecraft travels to 3/4th point of journey

Crew prepares for splashdown

Command and service modules separates

Command module re-enters the Earth’s atmosphere

Spacecraft splashes near USS hornet

Source:https://en.wikipedia.org/

Properties

Filter Type
Hierarchy Mode

Description

The filtering feature enables the user to view reduced amount of records based on filter criteria. The column menu filtering can be enabled by setting allowFiltering property as true and toolbar search box can be enabled by including the search item in the toolbar property.

Gantt supports the following filter types. They are

Menu
Excel

Gantt chart also provides support for a set of filtering modes with hierarchyMode property. The below are the type of filter mode available in Gantt chart.

Parent - This is the default filter hierarchy mode in Gantt chart. The filtered records are displayed with its parent records, if the filtered records not have any parent record then the filtered record alone will be displayed.

Child - The filtered records are displayed with its child record, if the filtered records do not have any child record then only the filtered records are displayed.

Both - The filtered records are displayed with its both parent and child record. If the filtered records do not have any parent and child record then only the filtered records are displayed.

None - Only the filtered records are displayed.

Gantt component features are segregated into individual feature-wise modules. To use filtering feature, we need to inject Filter module, and use the toolbar support we need to inject Toolbar module. To use a selection, inject the Selection module.

Example of Filtering in React Gantt Component

All Controls / Gantt / Filtering

All Controls

/

Gantt

/

Filtering