---
title: "Floating Filter Component"
framework: react
version: "36.1.0"
---

# Floating Filter Component

Floating Filter Components allow you to add your own floating filter types to AG Grid. You can create a Custom Floating Filter Component to work alongside one of the grid's Provided Filters, or alongside a Custom Filter.

[React Floating Filters](https://www.youtube.com/watch?v=MdO6vZN2Gxo)

## Example: Custom Floating Filter

In the following example you can see how the Gold, Silver, Bronze and Total columns have a custom floating filter `NumberFloatingFilter`. This filter substitutes the standard floating filter for an input box that the user can change to adjust how many medals of each column to filter by based on a greater than filter.

#### Custom Floating Filter

```tsx
"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,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import NumberFloatingFilterComponent from "./numberFloatingFilterComponent.tsx";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  TextFilterModule,
  ClientSideRowModelModule,
  NumberFilterModule,
];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", filter: false },
    {
      field: "gold",
      filter: "agNumberColumnFilter",
      suppressHeaderFilterButton: true,
      floatingFilterComponent: NumberFloatingFilterComponent,
      floatingFilterComponentParams: {
        color: "gold",
      },
      suppressFloatingFilterButton: true,
    },
    {
      field: "silver",
      filter: "agNumberColumnFilter",
      suppressHeaderFilterButton: true,
      floatingFilterComponent: NumberFloatingFilterComponent,
      floatingFilterComponentParams: {
        color: "silver",
      },
      suppressFloatingFilterButton: true,
    },
    {
      field: "bronze",
      filter: "agNumberColumnFilter",
      suppressHeaderFilterButton: true,
      floatingFilterComponent: NumberFloatingFilterComponent,
      floatingFilterComponentParams: {
        color: "#CD7F32",
      },
      suppressFloatingFilterButton: true,
    },
    {
      field: "total",
      filter: "agNumberColumnFilter",
      suppressHeaderFilterButton: true,
      floatingFilterComponent: NumberFloatingFilterComponent,
      floatingFilterComponentParams: {
        color: "unset",
      },
      suppressFloatingFilterButton: true,
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
      filter: true,
      floatingFilter: true,
    };
  }, []);

  const { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/olympic-winners.json",
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            rowData={data}
            loading={loading}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            enableFilterHandlers={true}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Custom Floating Filter](https://www.ag-grid.com/examples/component-floating-filter/custom-floating-filter/reactFunctionalTs)

## Implementing a Floating Filter Component

To configure custom floating filters, first enable the grid option `enableFilterHandlers`.

> **Note**
>
> If you do not enable the grid option `enableFilterHandlers`, it is still possible to use custom floating filters, however this is not recommended. See [Legacy Floating Filter Component](https://www.ag-grid.com/react-data-grid/component-floating-filter-legacy/).

Custom floating filter components are controlled components, which receive a filter model as part of the props, and pass model updates back to the grid via the `onModelChange` callback. A filter model of `null` means that no filter is applied (the filter displays as inactive). Note that the filter is applied immediately when `onModelChange` is called.

```jsx
export default ({ model, onModelChange }) => {
    return (
        <div>
            <input
                type="text"
                value={model || ''}
                onChange={({ target: { value }}) => onModelChange(value === '' ? null : value)}
            />
        </div>
    );
}
```

## Custom Floating Filter Parameters

### Floating Filter Props

The following props are passed to the custom floating filter components (`CustomFloatingFilterDisplayProps` interface). If custom props are provided via the `colDef.floatingFilterComponentParams` property, these will be additionally added to the props object, overriding items of the same name if a name clash exists.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `filterParams` | `TCustomParams` |  |  | The params object passed to the filter. This is to allow the floating filter access to the configuration of the parent filter. For example, the provided filters use debounceMs from the parent filter params. |
| `model` | `TModel \| null` |  |  | The current applied filter model for the column. |
| `onModelChange` | `Function` |  |  | Callback that should be called every time the model in the component changes. `additionalEventAttributes` If provided, will be passed to the filter changed event |
| `onUiChange` | `Function` |  |  | Callback that can be optionally called every time the floating filter UI changes. The grid will respond with emitting a FloatingFilterUiChangedEvent. Apart from emitting the event, the grid takes no further action. The callback takes one optional parameter which, if included, will get merged to the FloatingFilterUiChangedEvent object. |
| `getHandler` | `Function` |  |  | Get the filter handler instance. If using a `SimpleColumnFilter`, the handler is is a wrapper object containing the provided `doesFilterPass` callback. |
| `source` | `'init' \| 'ui' \| 'filter' \| 'api' \| 'colDef' \| 'dataChanged'` |  |  | 'init' \| 'ui' \| 'filter' \| 'api' \| 'colDef' \| 'dataChanged' |
| `column` | [`Column`](https://www.ag-grid.com/react-data-grid/column-object/) |  |  | The column this filter is for. |
| `showParentFilter` | `Function` |  |  | Shows the parent filter popup. |
| `api` | [`GridApi`](https://www.ag-grid.com/react-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/react-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |

### Floating Filter Callbacks

The following callbacks can be passed to the `useGridFloatingFilter` hook (`CustomFloatingFilterCallbacks` interface). All the callbacks are optional, and the hook only needs to be used if callbacks are provided.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `afterGuiAttached` | `Function` |  |  | Optional: A hook to perform any necessary operation just after the GUI for this component has been rendered on the screen. This is useful for any logic that requires attachment before executing, such as putting focus on a particular DOM element. |

## Example: Custom Filter And Custom Floating Filter

This example extends the previous example by also providing its own custom filter `NumberFilter` in the Gold, Silver, Bronze and Total columns.

#### Custom Filter and Floating Filter

```tsx
"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,
  CustomFilterModule,
  DoesFilterPassParams,
  GridApi,
  GridOptions,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import NumberFilterComponent from "./numberFilterComponent.tsx";
import NumberFloatingFilterComponent from "./numberFloatingFilterComponent.tsx";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [ClientSideRowModelModule, CustomFilterModule];

const doesFilterPass: ({
  node,
  model,
  handlerParams,
}: DoesFilterPassParams<any, any, number>) => boolean = ({
  node,
  model,
  handlerParams,
}: DoesFilterPassParams<any, any, number>) => {
  const value = handlerParams.getValue(node);
  if (value == null) {
    return true;
  }
  return value > model;
};

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete" },
    {
      field: "gold",
      floatingFilterComponent: NumberFloatingFilterComponent,
      floatingFilterComponentParams: {
        color: "gold",
      },
      filter: {
        component: NumberFilterComponent,
        doesFilterPass: doesFilterPass,
      },
      suppressFloatingFilterButton: true,
    },
    {
      field: "silver",
      floatingFilterComponent: NumberFloatingFilterComponent,
      floatingFilterComponentParams: {
        color: "silver",
      },
      filter: {
        component: NumberFilterComponent,
        doesFilterPass: doesFilterPass,
      },
      suppressFloatingFilterButton: true,
    },
    {
      field: "bronze",
      floatingFilterComponent: NumberFloatingFilterComponent,
      floatingFilterComponentParams: {
        color: "#CD7F32",
      },
      filter: {
        component: NumberFilterComponent,
        doesFilterPass: doesFilterPass,
      },
      suppressFloatingFilterButton: true,
    },
    {
      field: "total",
      floatingFilterComponent: NumberFloatingFilterComponent,
      floatingFilterComponentParams: {
        color: "unset",
      },
      filter: {
        component: NumberFilterComponent,
        doesFilterPass: doesFilterPass,
      },
      suppressFloatingFilterButton: true,
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
      floatingFilter: true,
    };
  }, []);

  const { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/olympic-winners.json",
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            rowData={data}
            loading={loading}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            enableFilterHandlers={true}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Custom Filter and Floating Filter](https://www.ag-grid.com/examples/component-floating-filter/custom-filter-and-floating-filter/reactFunctionalTs)

## Example: Custom Filter And Read-Only Floating Filter

If you want to provide a custom filter but don't want to provide an equivalent custom floating filter, you can implement `getModelAsString()` on the filter handler and you will get a read-only floating filter for free.

This example uses the previous custom filter but implements `getModelAsString()`. Note how there are no custom floating filters and yet each column using `NumberFilter` (Gold, Silver, Bronze and Total) has a read-only floating filter that gets updated as you change the values from the main filter.

#### Custom Filter Only

```tsx
"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,
  CustomFilterModule,
  FilterHandler,
  GridApi,
  GridOptions,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import NumberFilterComponent from "./numberFilterComponent.tsx";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [CustomFilterModule, ClientSideRowModelModule];

const numberFilterHandler: () => FilterHandler<any, any, number> = () => {
  return {
    doesFilterPass: ({ node, model, handlerParams }) => {
      const value = handlerParams.getValue(node);
      if (value == null) {
        return true;
      }
      return value > model;
    },
    getModelAsString: (model) => (model == null ? "" : ">" + model),
  };
};

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", width: 150 },
    {
      field: "gold",
      width: 100,
      filter: {
        component: NumberFilterComponent,
        handler: numberFilterHandler,
      },
      suppressHeaderMenuButton: true,
    },
    {
      field: "silver",
      width: 100,
      filter: {
        component: NumberFilterComponent,
        handler: numberFilterHandler,
      },
      suppressHeaderMenuButton: true,
    },
    {
      field: "bronze",
      width: 100,
      filter: {
        component: NumberFilterComponent,
        handler: numberFilterHandler,
      },
      suppressHeaderMenuButton: true,
    },
    {
      field: "total",
      width: 100,
      filter: {
        component: NumberFilterComponent,
        handler: numberFilterHandler,
      },
      suppressHeaderMenuButton: true,
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
      floatingFilter: true,
    };
  }, []);

  const { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/olympic-winners.json",
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            rowData={data}
            loading={loading}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            enableFilterHandlers={true}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Custom Filter Only](https://www.ag-grid.com/examples/component-floating-filter/custom-filter/reactFunctionalTs)