React Data GridNew Filters Tool Panel

The new Filters Tool Panel allows accessing the grid's filters without needing to open up the column menu.

Enabling New Filters Tool Panel Copy Link

To use the new Filters Tool Panel, set enableFilterHandlers = true, and use the 'filters-new' Side Bar Configuration.

If a filter is set from anywhere outside of the tool panel, e.g. from the column menu, the filter will automatically be added to the tool panel. Once a filter appears in the tool panel, it will remain until it's removed from within the tool panel.

Using Buttons Copy Link

The tool panel can be configured to have global Apply, Clear, Reset and Cancel Buttons. These behave the same as when used within an individual filter, but instead apply to all filters at once.

To use global buttons, every filter must first be configured to use the buttons. The global buttons can then be passed to the tool panel configuration when using agNewFiltersToolPanel, by passing an IToolPanelNewFiltersCompParams object:

The example below demonstrates using buttons with the tool panel:

Note that when opened from the column menu, the buttons will be visible within the individual filters. Within the tool panel, only the global buttons will be visible.

Configuring Filters Copy Link

Changing Selectable Filters Copy Link

For each column filter, the filter type can be changed by using the dropdown within the tool panel. To enable switching filters, set filter: 'agSelectableColumnFilter' on the column definition. For any other filter value, the dropdown will not be displayed.

By default, the dropdown will allow switching between:

• Simple Filter - Text Filter, Number Filter or Date Filter, depending on the Cell Data Type
• Selection Filter - Set Filter
• Combo Filter - Multi Filter (if the MultiFilterModule is loaded)

To allow other filters to be configured in the dropdown, filterParams of type SelectableFilterParams can be set on the column definition:

Suppressing Filters Copy Link

To remove a particular column / filter from the tool panel, set the column property suppressFiltersToolPanel to true.

Example: Configuring Filters Copy Link

The example below demonstrates configuring filters:

• The Athlete column does not show a dropdown as it has filter: 'agSetColumnFilter' set.
• The Age column shows all three grid-provided filter options by default.
• The Country column is configured to show the Set Filter before the Text Filter.
• The Year column is configured to show a custom filter component with the Set Filter.
• The Date column has suppressFiltersToolPanel: true set, so it does not show in the tool panel.

Filters Tool Panel State Copy Link

When the grid initialises, the tool panel only shows active filters provided in the Initial State filter model. The tool panel can also be configured via initial state to show inactive filters, or change the order and expansion state. This is provided to the Side Bar state as a NewFiltersToolPanelState object:

Filter Instances Copy Link

The filters provided in the tool panel are the same instances as the filter in the column menu. This has the following implications:

• Configuration relating to filters equally applies when the filters appear in the tool panel.
• The filter behaves exactly as when it appears in the column menu. E.g. the Apply button will have the same meaning when used in the tool panel. Also the relationship with the Floating Filter (if active) will be the same.
• If the filter is open on the tool panel and then the user subsequently opens the column menu, the tool panel filter will be closed. Because the filter is the same filter instance, it will only appear at one location at any given time.

Next Up Copy Link

Continue to the next section to learn about the old Filters Tool Panel.