# Filtering Data with Infinite Table for React

> Learn how to filter data both client-side and server-side with Infinite Table for React

Published: 2023-01-26  
Author: admin  
Tags: filtering

Canonical page: https://infinite-table.com/blog/2023/01/26/filtering-data-with-infinite-table-for-react

_Today we shipped cutting-edge column filtering functionality, that enables intuitive client-side and server-side filtering_

1️⃣ Narrow down your data with your own filter types and operators

2️⃣ Works both client-side and server-side

3️⃣ Easy customization of filters and filter editors

4️⃣ Optimized for performance

5️⃣ Easy to use across multiple columns

Filters were, by far, the most requested feature to add to Infinite Table after our initial launch.

The recently-released version `1.1.0` of Infinite Table for React introduces support for column filters, which work both client-side and server-side.

In order to enable filtering - specify the [`defaultFilterValue`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultFilterValue) property on the `<DataSource />` component, as shown below:

```tsx {4} title="Enabling_filters_on_the_DataSource"
<DataSource<Developer> data={/* ... */} primaryKey="id" defaultFilterValue={[]}>
  <InfiniteTable<Developer> columns={columns} />
</DataSource>
```

This configures the `<DataSource />` component with an empty array of filters; columns will pick this up and each will display a filter editor in the column header.

Of course, you can define some initial filters:

```tsx title="Initial_filters:_filter_by_age_greater_than_40"
defaultFilterValue={[
  {
    field: 'age',
    filter: {
      type: 'number',
      operator: 'gt',
      value: 40
    }
  }
]}
```

You can see how all of this looks like when we put it all together in the examples below.

## Local and Remote Filtering

Because the `<DataSource />` [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) prop is a function that returns a `Promise` with remote data, the filtering will happen server-side by default.

[Server-side filtering 10k records](https://codesandbox.io/s/infinite-table-with-remote-filters-i8b4wx)

When using remote filtering, it's your responsability to send the DataSource [`filterValue`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterValue) to the backend (you get this object as a parameter in your [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function). This value includes for each column the value in the filter editor, the column filter type and the operator in use. In this case, the frontend and the backend need to agree on the operator names and what each one means.

Whenever filters change, when remote filtering is configured, the [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function prop is called again, with an object that has the `filterValue` correctly set to the current filters (together with `sortInfo` and other data-related props like `groupBy`, etc).

However, we can use the [`filterMode`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterMode) to force client-side filtering:

```tsx
<DataSource<Developer> filterMode="local" filterDelay={0} />
```

We also specify the [filterDelay=0](https://infinite-table.com/docs/reference/datasource-props/index.md#filterDelay) in order to perform filtering immediately, without debouncing and batching filter changes, for a quicker response ⚡️ 🏎

[Client-side filtering 10k records](https://codesandbox.io/s/infinite-table-with-client-side-filters-sqbdbu)

Even if your data is loaded from a remote source, using `filterMode="local"` will perform all filtering on the client-side - so you don't need to send the `filterValue` to the server in your `data` function.

## Defining Filter Types and Custom Filter Editors

Currently there are 2 filter types available in Infinite Table:

- `string`
- `number`

Conceptually, you can think of filter types similar to data types - generally if two columns will have the same data type, they will display the same filter.

Each filter type supports a number of operators and each operator has a name and can define it's own filtering function, which will be used when local filtering is used.

[Custom filter type and filter editor for canDesign column](https://codesandbox.io/s/infinite-table-filters-with-custom-editor-and-filter-type-ptlq2v)

The example above, besides showing how to define [a custom filter type](https://infinite-table.com/docs/reference/datasource-props/index.md#filterTypes), also shows how to define a custom filter editor.

For defining a custom filter editor to be used in a filter type, we need to write a new React component that uses the [`useInfiniteColumnFilterEditor`](https://infinite-table.com/docs/reference/hooks/index.md#useInfiniteColumnFilterEditor) hook.

```tsx
import { useInfiniteColumnFilterEditor } from '@infinite-table/infinite-react';

export function BoolFilterEditor() {
  const { value, setValue } = useInfiniteColumnFilterEditor<Developer>();
  return <>{/* ... */}</>;
}
```

This custom hook allows you to get the current `value` of the filter and also to retrieve the `setValue` function that we need to call when we want to update filtering.

Read more about this [in the docs - how to provide a custom editor](https://infinite-table.com/docs/learn/filtering/providing-a-custom-filter-editor.md).

## Customise Filterable Columns and Filter Icons

Maybe you don't want all your columns to be filterable.

For controlling which columns are filterable and which are not, use the [`columns.defaultFilterable`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultFilterable) property.

This overrides the global [`columnDefaultFilterable`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultFilterable) prop.

We have also made it easy for you to customize the filter icon that is displayed in the column header.

[Custom filter icons for firstName and salary columns](https://codesandbox.io/s/infinite-table-custom-filter-icon-jc7jr8)

You change the filter icon by using the [`columns.renderFilterIcon`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderFilterIcon) prop - for full control, it's being called even when the column is not filtered, but you have a `filtered` property on the argument the function is called with.

In the example above, the `salary` column is configured to render no filter icon, but the `header` is customized to be bolded when the column is filtered.

## Ready for Your Challenge!

We listened to your requests for advanced filtering.

And we believe that we've come up with something that's really powerful and customizable.

Now it's your turn to try it out and show us what you can build with it! 🚀

If you have any questions, feel free to reach out to us on [Twitter](https://twitter.com/infinite_table) or in the [GitHub Discussions](https://github.com/infinite-table/infinite-react/discussions).

Make sure you try out filtering in Infinite Table for yourself ([and consult our extensive docs](https://infinite-table.com/docs/learn/filtering/index.md) if required).

Learn how to use filtering in the browser.

Figure out how to use filtering with server-side integration.