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
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
DateFilterModule,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
NumberFilterModule,
SideBarDef,
TextFilterModule,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
NewFiltersToolPanelModule,
SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [
NumberFilterModule,
DateFilterModule,
ClientSideRowModelModule,
NewFiltersToolPanelModule,
ColumnMenuModule,
ContextMenuModule,
SetFilterModule,
TextFilterModule,
];
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [rowData, setRowData] = useState<IOlympicData[]>();
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: "athlete" },
{ field: "age" },
{ field: "country" },
{ field: "date", minWidth: 180 },
{ field: "total" },
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
minWidth: 100,
filter: "agSelectableColumnFilter",
floatingFilter: true,
};
}, []);
const onGridReady = useCallback((params: GridReadyEvent) => {
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data: IOlympicData[]) =>
setRowData(
data.map((rowData) => {
const dateParts = rowData.date.split("/");
const [year, month, day] = dateParts
.reverse()
.map((e) => parseInt(e, 10));
const paddedDateTimeStrings = [month, day].map((e) =>
e.toString().padStart(2, "0"),
);
const date = `${year}-${paddedDateTimeStrings[0]}-${paddedDateTimeStrings[1]}`;
return {
...rowData,
date,
};
}),
),
);
}, []);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div style={gridStyle}>
<AgGridReact<IOlympicData>
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
sideBar={"filters-new"}
enableFilterHandlers={true}
suppressSetFilterByDefault={true}
onGridReady={onGridReady}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
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. Removing a filter from the tool panel also clears that filter.
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:
Allows global buttons to be provided to the filter tool panel |
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, BigInt Filter or Date Filter, depending on the Cell Data TypeSelection Filter- Set FilterCombo Filter- Multi Filter (if theMultiFilterModuleis loaded)
To allow other filters to be configured in the dropdown, filterParams of type SelectableFilterParams can be set on the column definition:
List of possible filters which will show in the filter card. If not provided, will default to grid-provided filters
|
The index of the filter that should be active by default, in filters or else in the default list. Without one the first is active, except that the default list starts at its Set Filter where that is the default filter. An index naming no filter selects the first.
|
Params which will be passed to all filters
|
Suppressing Filters Copy Link
To remove a particular column / filter from the tool panel, set the column property suppressFiltersToolPanel to true.
Set to true if you do not want this column (filter) or group (filter group) to appear in the Filters Tool Panel. |
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: trueset, so it does not show in the tool panel.
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
DateFilterModule,
DoesFilterPassParams,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
NumberFilterModule,
SelectableFilterParams,
SideBarDef,
TextFilterModule,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
MultiFilterModule,
NewFiltersToolPanelModule,
SetFilterModule,
} from "ag-grid-enterprise";
import "./style.css";
import YearFilter from "./yearFilter.tsx";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [
NumberFilterModule,
DateFilterModule,
ClientSideRowModelModule,
NewFiltersToolPanelModule,
ColumnMenuModule,
ContextMenuModule,
SetFilterModule,
TextFilterModule,
MultiFilterModule,
];
const doesFilterPass: ({
model,
node,
handlerParams,
}: DoesFilterPassParams<any, any, boolean>) => boolean = ({
model,
node,
handlerParams,
}: DoesFilterPassParams<any, any, boolean>) => {
return model ? handlerParams.getValue(node) > 2010 : true;
};
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [rowData, setRowData] = useState<IOlympicData[]>();
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: "athlete", filter: "agSetColumnFilter" },
{ field: "age" },
{
field: "country",
filterParams: {
filters: [
{
filter: "agSetColumnFilter",
},
{
filter: true, // default filter based on cell data type
},
],
} as SelectableFilterParams,
},
{
field: "year",
filterParams: {
filters: [
{
filter: { component: YearFilter, doesFilterPass: doesFilterPass },
name: "Custom Filter",
},
{
filter: "agSetColumnFilter",
},
],
} as SelectableFilterParams,
},
{ field: "date", minWidth: 180, suppressFiltersToolPanel: true },
{ field: "total", filter: false },
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
minWidth: 100,
filter: "agSelectableColumnFilter",
};
}, []);
const onGridReady = useCallback((params: GridReadyEvent) => {
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data: IOlympicData[]) =>
setRowData(
data.map((rowData) => {
const dateParts = rowData.date.split("/");
const [year, month, day] = dateParts
.reverse()
.map((e) => parseInt(e, 10));
const paddedDateTimeStrings = [month, day].map((e) =>
e.toString().padStart(2, "0"),
);
const date = `${year}-${paddedDateTimeStrings[0]}-${paddedDateTimeStrings[1]}`;
return {
...rowData,
date,
};
}),
),
);
}, []);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div style={gridStyle}>
<AgGridReact<IOlympicData>
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
sideBar={"filters-new"}
enableFilterHandlers={true}
suppressSetFilterByDefault={true}
onGridReady={onGridReady}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
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:
Ordered list of filters and their expansion state |
Managing Tool Panel State Copy Link
The filter cards shown in the tool panel are part of the Side Bar state, which is separate from the filter model. Clearing the filter model with api.setFilterModel(null) therefore clears the filter values but leaves the (now inactive) cards in place.
To remove cards from the tool panel programmatically, see Choosing Filter Cards.
A saved layout can be restored by passing a previously captured sideBar state to api.setState. Pass the filter state too to restore each card's values as well as the cards themselves. See Grid State for the full getState and setState semantics.
Expand / Collapse Filter Cards Copy Link
The filter cards in the tool panel can be expanded and collapsed by invoking methods on the Filters Tool Panel instance:
Expands the filter cards with the supplied colIds, or all filter cards if not supplied. |
Collapses the filter cards with the supplied colIds, or all filter cards if not supplied. |
// expands the 'age' and 'country' filter cards
gridApi.getToolPanelInstance('filters-new').expandFilterCards(['age', 'country']);Only filters which already have a card in the tool panel are affected.
Choosing Filter Cards Copy Link
setFilterCards sets exactly which filter cards are shown in the tool panel, and in what order. Any column omitted from the list has its card removed, and its filter is cleared. Passing an empty array ([]) removes every card and clears their filters.
Shows a filter card for each of the supplied colIds, in that order. Every other card is removed and its filter cleared. Existing cards keep their expanded state; new cards are collapsed.
|
If saving and restoring state, this should return the current state |
// shows only the 'athlete', 'country' and 'year' cards, in that order
gridApi.getToolPanelInstance('filters-new').setFilterCards(['athlete', 'country', 'year']);- Cards are shown in the order given.
- Cards that already exist keep their expanded state. Cards that are added are collapsed, unlike when added using Add Filter in the tool panel, which adds them expanded.
- Column IDs that do not match a column in the grid are skipped, and a warning is logged in development.
Example: Managing Filter Cards Copy Link
The example below starts with filters on Age and Country, and an inactive Athlete card:
- Show Athlete, Country, Year calls
setFilterCards(['athlete', 'country', 'year']). The Age card is removed and its filter is cleared. Country keeps its filter and expanded state, and Year is added collapsed. - Expand All and Collapse All call
expandFilterCards()andcollapseFilterCards(). - Clear Filter Values calls
api.setFilterModel(null). The rows are unfiltered, but the cards remain. - Remove Inactive uses
getStateto find the current cards, and passes the ones with a filter tosetFilterCards. - Remove All calls
setFilterCards([]). Every card is removed and the rows are unfiltered. - Save State captures the current grid state with
api.getState(). - Restore Saved State applies the saved
filterandsideBarstate, restoring both the cards and their values. - Restore Initial State applies the state the grid was created with.
("use client");
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridState,
GridStateModule,
ModuleRegistry,
NewFiltersToolPanelState,
NumberFilterModule,
SideBarDef,
TextFilterModule,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
NewFiltersToolPanelModule,
SetFilterModule,
} from "ag-grid-enterprise";
import "./styles.css";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [
NumberFilterModule,
ClientSideRowModelModule,
NewFiltersToolPanelModule,
ColumnMenuModule,
ContextMenuModule,
SetFilterModule,
TextFilterModule,
GridStateModule,
];
const initialGridState: GridState = {
filter: {
filterModel: {
age: { filterType: "number", type: "lessThan", filter: 25 },
country: { filterType: "set", values: ["United States", "Russia"] },
},
},
sideBar: {
visible: true,
position: "right",
openToolPanel: "filters-new",
toolPanels: {
"filters-new": {
filters: [
{ colId: "athlete" },
{ colId: "age" },
{ colId: "country", expanded: true },
],
} as NewFiltersToolPanelState,
},
},
};
let savedState: GridState | undefined;
const GridExample = () => {
const gridRef = useRef<AgGridReact<IOlympicData>>(null);
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: "athlete" },
{ field: "age", filter: "agNumberColumnFilter" },
{ field: "country" },
{ field: "year", filter: "agNumberColumnFilter" },
{ field: "total", filter: "agNumberColumnFilter" },
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
minWidth: 100,
filter: true,
};
}, []);
const initialState = useMemo<GridState>(() => {
return initialGridState;
}, []);
const { data, loading } = useFetchJson<IOlympicData>(
"https://www.ag-grid.com/example-assets/olympic-winners.json",
);
const showAthleteCountryYear = useCallback(() => {
gridRef
.current!.api.getToolPanelInstance("filters-new")!
.setFilterCards(["athlete", "country", "year"]);
}, []);
const expandAll = useCallback(() => {
gridRef
.current!.api.getToolPanelInstance("filters-new")!
.expandFilterCards();
}, []);
const collapseAll = useCallback(() => {
gridRef
.current!.api.getToolPanelInstance("filters-new")!
.collapseFilterCards();
}, []);
const clearFilterValues = useCallback(() => {
// The cards are part of the Side Bar state, not the filter model, so they stay in place
gridRef.current!.api.setFilterModel(null);
}, []);
const removeInactiveCards = useCallback(() => {
const toolPanel = gridRef.current!.api.getToolPanelInstance("filters-new")!;
const colIds = (toolPanel.getState().filters ?? []).map(
({ colId }) => colId,
);
// When using Apply buttons, a card can have changes that have not been applied yet,
// so also check the unapplied model to keep those cards
toolPanel.setFilterCards(
colIds.filter(
(colId) =>
gridRef.current!.api.getColumnFilterModel(colId) != null ||
gridRef.current!.api.getColumnFilterModel(colId, true) != null,
),
);
}, []);
const removeAllCards = useCallback(() => {
gridRef
.current!.api.getToolPanelInstance("filters-new")!
.setFilterCards([]);
}, []);
// `setState` resets any section of the grid state it is not given, so the handlers below
// spread the current state to keep everything else (e.g. sorting) unchanged
const saveState = useCallback(() => {
savedState = gridRef.current!.api.getState();
console.log("Saved state", savedState);
}, [savedState]);
const restoreSavedState = useCallback(() => {
if (savedState) {
// Restore the `filter` state as well as the `sideBar` state, to restore each card's values
gridRef.current!.api.setState({
...gridRef.current!.api.getState(),
filter: savedState.filter,
sideBar: savedState.sideBar,
});
console.log("Restored state", savedState);
}
}, [savedState]);
const restoreInitialState = useCallback(() => {
gridRef.current!.api.setState({
...gridRef.current!.api.getState(),
filter: initialGridState.filter,
sideBar: initialGridState.sideBar,
});
}, [initialGridState]);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div className="example-wrapper">
<div>
<span className="button-group">
<span>Cards:</span>
<button onClick={showAthleteCountryYear}>
Show Athlete, Country, Year
</button>
<button onClick={expandAll}>Expand All</button>
<button onClick={collapseAll}>Collapse All</button>
<button onClick={clearFilterValues}>Clear Filter Values</button>
<button onClick={removeInactiveCards}>Remove Inactive</button>
<button onClick={removeAllCards}>Remove All</button>
</span>
</div>
<div>
<span className="button-group">
<span>State:</span>
<button onClick={saveState}>Save State</button>
<button onClick={restoreSavedState}>Restore Saved State</button>
<button onClick={restoreInitialState}>
Restore Initial State
</button>
</span>
</div>
<div style={gridStyle}>
<AgGridReact<IOlympicData>
ref={gridRef}
rowData={data}
loading={loading}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
sideBar={"filters-new"}
enableFilterHandlers={true}
initialState={initialState}
/>
</div>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
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.