The Filters Tool Panel allows accessing the grid's filters without needing to open up the column menu.
The example below shows the Filters Tool Panel. The following can be noted:
It is possible to remove items from the Filters Tool Panel. Items are suppressed by setting one or more of the following toolPanelParams
to true
when you are using the agFiltersToolPanel
component:
Properties available on the ToolPanelFiltersCompParams
interface.
To remove a particular column / filter from the tool panel, set the column property suppressFiltersToolPanel
to true
.
The example below demonstrates the suppress options described above. Note the following:
suppressExpandAll
and suppressFilterSearch
are both set to true
.colDef.suppressFiltersToolPanel=true
.The filters provided in the tool panel are the same instances as the filter in the column menu. This has the following implications:
It is possible to expand and collapse filter groups in the Filters Tool Panel by invoking methods on the Filters Tool Panel Instance. These methods are shown below:
interface IFiltersToolPanel {
expandFilterGroups(groupIds?: string[]): void;
collapseFilterGroups(groupIds?: string[]): void;
... // other methods
}
The code snippet below shows how to expand and collapse filter groups using the Filters Tool Panel instance:
// lookup Filters Tool Panel instance by id, in this case using the default filter instance id
const filtersToolPanel = gridApi.getToolPanelInstance('filters');
// expands all filter groups in the Filters Tool Panel
filtersToolPanel.expandFilterGroups();
// collapses all filter groups in the Filters Tool Panel
filtersToolPanel.collapseFilterGroups();
// expands the 'athlete' and 'competition' filter groups in the Filters Tool Panel
filtersToolPanel.expandFilterGroups(['athleteGroupId', 'competitionGroupId']);
// collapses the 'competition' filter group in the Filters Tool Panel
filtersToolPanel.collapseFilters(['competitionGroupId']);
Notice in the snippet above that it's possible to target individual filter groups by supplying groupId
s.
The example below demonstrates these methods in action. Note the following:
collapseFilterGroups()
is invoked in the onGridReady
callback to collapse all filter groups in the tool panel.expandFilterGroups(['athleteGroupId', 'competitionGroupId'])
.collapseFilterGroups(['competitionGroupId'])
.expandFilterGroups()
. Note that 'Sport' is not expanded as it is not a filter group.collapseFilterGroups()
.It is possible to expand and collapse the filters in the Filters Tool Panel by invoking methods on the Filters Tool Panel Instance. These methods are shown below:
interface IFiltersToolPanel {
expandFilters(colIds?: string[]): void;
collapseFilters(colIds?: string[]): void;
... // other methods
}
The code snippet below shows how to expand and collapse filters using the Filters Tool Panel instance:
// lookup Filters Tool Panel instance by id, in this case using the default filter instance id
const filtersToolPanel = gridApi.getToolPanelInstance('filters');
// expands all filters in the Filters Tool Panel
filtersToolPanel.expandFilters();
// collapses all filters in the Filters Tool Panel
filtersToolPanel.collapseFilters();
// expands 'year' and 'sport' filters in the Filters Tool Panel
filtersToolPanel.expandFilters(['year', 'sport']);
// collapses the 'year' filter in the Filters Tool Panel
filtersToolPanel.expandFilters(['year']);
Notice in the snippet above that it's possible to target individual filters by supplying colId
s.
The example below demonstrates these methods in action. Note the following:
expandFilters(['year', 'sport'])
.collapseFilters(['year'])
.expandFilters()
.collapseFilters()
.The order of columns in the Filters Tool Panel is derived from the columnDefs
supplied in the grid options, and is kept in sync with the grid when columns are moved by default. However custom filter layouts can also be defined by invoking the following method on the Filters Tool Panel Instance:
interface IFiltersToolPanel {
setFilterLayout(colDefs: ColDef[]): void;
... // other methods
}
Notice that the same Column Definitions that are supplied in the grid options are also passed to setFilterLayout(colDefs)
.
The code snippets below show how to set custom filter layouts using the Filters Tool Panel instance:
// original column definitions supplied to the grid
const [columnDefs, setColumnDefs] = useState([
{ field: 'a' },
{ field: 'b' },
{ field: 'c' },
]);
<AgGridReact columnDefs={columnDefs} />
// lookup Filters Tool Panel instance by id, in this case using the default columns instance id
const filtersToolPanel = gridApi.getToolPanelInstance('filters');
// set custom Filters Tool Panel layout
filtersToolPanel.setFilterLayout([
{
headerName: 'Group 1', // group doesn't appear in grid
children: [
{ field: 'c' }, // custom column order with column "b" omitted
{ field: 'a' }
]
}
]);
Notice from the snippet above that it's possible to define groups in the tool panel that don't exist in the grid. Also note that filters can be omitted or positioned in a different order however note that all referenced columns (that contain filters) must already exist in the grid.
When providing a custom layout it is recommend to enable suppressSyncLayoutWithGrid
in the
tool panel params to prevent users changing the layout when moving columns in the grid.
The example below shows two custom layouts for the Filters Tool Panel. Note the following:
gridOptions.columnDefs
.setFilterLayout(colDefs)
with a list of column definitions arranged in ascending order.setFilterLayout(colDefs)
with a list of column definitions containing groups that don't appear in the grid.suppressSyncLayoutWithGrid
is enabled.