Filtering Data with Infinite Table for React

By admin·2023-01-26

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

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.

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 ⚡️ 🏎

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.

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

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

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 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 or in the GitHub Discussions.

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