React Data Grid

Number Filter

react logo

Number Filters allow you to filter number data.

Enabling Number Filters

The Number Filter can be configured as shown below:

const [columnDefs, setColumnDefs] = useState([
    {
        field: 'age',
        // configure column to use the Number Filter
        filter: 'agNumberColumnFilter',
        filterParams: {
            // pass in additional parameters to the Number Filter
        },
    },
]);

<AgGridReact columnDefs={columnDefs} />

Example: Number Filter

The example below shows the Number Filter in action:

  • The first column shows the default Number Filter behaviour.
  • The second column demonstrates Custom Number Support and uses commas for decimals and allows a dollar sign ($) to be included.
  • Floating filters are enabled and also react to the configuration of allowedCharPattern.

Number Filter Parameters

Number Filters are configured though the filterParams attribute of the column definition (INumberFilterParams interface):