Filtering Data with Infinite Table for React

Why use Infinite Table filters?

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 property on the <DataSource /> component, as shown below

<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:

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 prop is a function that returns a Promise with remote data, the filtering will happen server-side by default.

When using remote filtering, it's your responsability to send the DataSource filterValue to the backend (you get this object as a parameter in your 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.

Data reloads when filters change

Whenever filters change, when remote filtering is configured, the 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 to force client-side filtering:

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

We also specify the filterDelay=0 in order to perform filtering immediately, without debouncing and batching filter changes, for a quicker response ⚡️ 🏎

Using local filtering

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.

The example above, besides showing how to define a custom filter type, also shows how to define a custom filter editor.

Providing 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 hook.

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.

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 column.defaultFilterable property.

This overrides the global columnDefaultFilterable prop.

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

You change the filter icon by using the 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, in the GitHub Discussions or in the comments below!

Make sure you try out filtering in Infinite Table for yourself (and consult our extensive docs if required).

Comments

[Radu Brehar👨‍💻]

Here's a short video that gives you a glimpse into it

youtube.com/shorts/Xrb2BZhZ3qs