Filtering Data with Infinite Table for React

By adminยท

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

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} />

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:

    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.

Server-side filtering 10k records

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 โšก๏ธ ๐ŸŽ

Client-side filtering 10k records

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.

Custom filter type and filter editor for canDesign column

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

Custom filter icons for firstName and salary columns

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).

Client-side filtering

Learn how to use filtering in the browser.

Server-side filtering

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