Server-side Filtering

If you're using a remote data prop (a function that returns a Promise) on the <DataSource /> component, the filtering will happen server-side by default.

Note

You can explicitly configure server-side filtering by using filterMode="remote".

When remote filtering is enabled, the data function prop will be called with an object argument that includes the filterValue property, so the filters can be sent to the server for performing the correct filtering operations.

Note

Obviously the filtering can be combined with sorting, grouping, etc.

It's up to the data function prop to send the correct parameters to the server for remote operations.

The returned JSON can include both

a totalCount property (number) and
a totalCountUnfiltered property (also number) - to inform the <DataSource /> of the size of the data, both with and without the applied filters.

Server-side filtering example

All the filtering in this example happens server-side.

This example also does server-side (multiple) sorting.

View Mode

Fork Fork

import * as React from 'react';

import {
  DataSourceData,
  InfiniteTable,
  InfiniteTablePropColumns,
  DataSource,
  DataSourcePropSortInfo,
  DataSourcePropFilterValue,
} from '@infinite-table/infinite-react';

type Developer = {
  id: number;
  firstName: string;
  lastName: string;

  currency: string;
  preferredLanguage: string;
  stack: string;
  canDesign: 'yes' | 'no';

  salary: number;
};

const data: DataSourceData<Developer> = ({ filterValue, sortInfo }) => {
  if (sortInfo && !Array.isArray(sortInfo)) {
    sortInfo = [sortInfo];
  }
  const args = [
    sortInfo
      ? 'sortInfo=' +
        JSON.stringify(
          sortInfo.map((s) => ({
            field: s.field,
            dir: s.dir,
          })),
        )
      : null,

    filterValue
      ? 'filterBy=' +
        JSON.stringify(
          filterValue.map(({ field, filter }) => {
            return {
              field: field,
              operator: filter.operator,
              value:
                filter.type === 'number' ? Number(filter.value) : filter.value,
            };
          }),
        )
      : null,
  ]
    .filter(Boolean)
    .join('&');

  return fetch('https://infinite-table.com/.netlify/functions/json-server' + `/developers1k-sql?` + args)
    .then((r) => r.json())
    .then((data: Developer[]) => data);
};

const columns: InfiniteTablePropColumns<Developer> = {
  id: {
    field: 'id',
    type: 'number',
    defaultWidth: 100,
  },
  salary: {
    field: 'salary',
    type: 'number',
  },

  firstName: {
    field: 'firstName',
  },
  stack: { field: 'stack' },
  currency: { field: 'currency' },
};

const domProps = {
  style: {
    height: '100%',
  },
};
const defaultSortInfo: DataSourcePropSortInfo<Developer> = [
  {
    field: 'stack',
    dir: 1,
  },
  {
    field: 'salary',
    dir: 1,
  },
];

const defaultFilterValue: DataSourcePropFilterValue<Developer> = [];

const shouldReloadData = {
  sortInfo: true,
};

export default () => {
  return (
    <>
      <React.StrictMode>
        <DataSource<Developer>
          data={data}
          primaryKey="id"
          defaultFilterValue={defaultFilterValue}
          defaultSortInfo={defaultSortInfo}
          shouldReloadData={shouldReloadData}
        >
          <InfiniteTable<Developer>
            domProps={domProps}
            columnDefaultWidth={150}
            columnMinWidth={50}
            columns={columns}
          />
        </DataSource>
      </React.StrictMode>
    </>

Note

When the filter value for a column matches the empty value - as specified in the filterTypes.operator.emptyValues - that value is not sent to the server as part of the filterValue array.

Note

When doing server-side filtering, it's your responsability as a developer to make sure you're sending the correct filtering parameters to the server, in a way the server understands it.

This means that the filter values, the filter type and the names of the operators are known to the server and there is a clear convention of what is supported or not.

Batch filtering

In order to reduce the number of requests sent to the server, filtering will be batched by default.

Batching is controlled by the filterDelay prop, which, if not specified, defaults to 200 milliseconds. This means, any changes to the column filters, that happen inside a 200ms window (or the current value of filterDelay), will be debounced and only the last value will be sent to the server.

Note

If you want to prevent debouncing/batching filter values, you can set filterDelay to 0.