Filtering

React Bootstrap Data Grid provides an interface to filter rows by specifying various criteria across one or more columns.

Like other optional features in React Bootstrap Data Grid, filtering is implemented in an externally-controlled manner. More specifically, the initial state of the UI, a state store (often implemented via a useState hook, as well as a function to update the state need to be provided externally via the filterModel prop in the Grid component.

Supplying the filterModel prop will enable filtering for the Grid, while omitting it will disable filtering.

To control which columns are filterable and which are not, simply omit columns from the filterModel if you do not want the user to filter on them.

Type Definitions

FilterModel

FilterModel is the type of the prop passed to Grid to enable filtering.

EditableTableFilterState

EditableTableFilterState contains the state of the filtering UI for an entire Grid and has the type defintion Record<string, FilterState>.

FilterState

FilterState represents the state of the filtering UI for a single column. There are three types of FilterState that represent different column types. It has the type definition StringFilterState | NumberFilterState | DateFilterState.

AbstractFilterState

Each type of FilterState extends AbstractFilterState, which provides a parameter to record the fact of whether the filter for a particular column is enabled or disabled.

StringFilterState

The first type of filter state is for string columns.

StringFilterScheme

The StringFilterScheme specifies the type of filter to apply for string columns and has the following possible values and corresponding behaviors:

contains

Does not filter out the column if the substring is present anywhere in the cells value

startsWith

Filters out the column unless the cell's value starts with the specified string

endsWith

Filters out the column unless the cell's value ends with the specified string

NumberFilterState

The second type of filter state is for number columns.

NumberFilterScheme

The NumberFilterScheme specifies the type of filter to apply for number columns and has the following possible values and corresponding behaviors:

equals

Filters out the column unless the cell's value is equal to the specified value

greaterThan

Filters out the column unless the cell's value is greater than the specified value

lessThan

Filters out the column unless the cell's value is less than the specified value

greaterOrEqual

Filters out the column unless the cell's value is greater than or equal to the specified value

lessOrEqual

Filters out the column unless the cell's value is less than or equal to the specified value

DateFilterState

The third type of filter state is for both date and datetime columns. It is one of the following 3 subtypes, representing different filter types:

StartDateFilterState

The row is filtered out unless the cell's value is the same as or after the specified date.

EndDateFilterState

The row is filtered out unless the cell's value is the same as or before the specified date.

BetweenDatesFilterState

The row is filtered out unless the cell's value is between the specified dates, inclusive.

Note that in terms of timezones, the grid follows the default behavior of the JavaScript Date constructor when parsing the values from browser date and datetime-local inputs. In particular, the Date objects used for comparing dates are in UTC while the Date objects for comparing datetimes are in the client browser's local timezone. This means that when supplying the Grid with date and datetime data, you probably want to use Date objects for dates in UTC and Date objects for datetimes in the client's local timezone.

AbstractDateFilterState

All three date filter state types inherit from AbstractDateFilterState, which differentiates between date and datetime columns and between different filter schemes.

Note that for now, there is no difference in filter behavior between date and datetime columns.

StartDateFilterState

EndDateFilterState

BetweenDatesFilterState

Example

Code

"use client";

import Grid, {
  ColDef,
  EditableTableFilterState,
  FilterModel,
  RowDef,
} from "@/grid";
import { FC, useState } from "react";

const cols: ColDef[] = [
  {
    type: "number",
    name: "number",
    label: "Number",
  },
  {
    type: "string",
    name: "version",
    label: "Version",
  },
  {
    type: "date",
    name: "date",
    label: "Date",
  },
];

const rows: RowDef[] = [
  {
    number: 7,
    version: "4.1.1.5849914",
    date: new Date("2024-09-05"),
  },
  {
    number: 6,
    version: "4.1.1.4763283",
    date: new Date("2024-02-16"),
  },
  {
    number: 5,
    version: "4.1.1.4061076",
    date: new Date("2023-11-30"),
  },
  {
    number: 4,
    version: "4.1.1.3882084",
    date: new Date("2023-11-02"),
  },
  {
    number: 3,
    version: "4.1.1.3732833",
    date: new Date("2023-09-22"),
  },
  {
    number: 2,
    version: "4.1.1.3686210",
    date: new Date("2023-08-31"),
  },
  {
    number: 1,
    version: "4.1.1.3669438",
    date: new Date("2023-08-25"),
  },
  {
    number: 0,
    version: "4.1.1.3622274",
    date: new Date("2023-08-03"),
  },
];

const SampleFilteredGrid: FC = () => {
  const [tableFilterState, setTableFilterState] =
    useState<EditableTableFilterState>({
      number: {
        type: "number",
        scheme: "lessOrEqual",
        numValue: 4,
        enabled: true,
      },
      version: {
        type: "string",
        scheme: "startsWith",
        searchString: "4.1.1.3",
        enabled: true,
      },
      date: {
        type: "date",
        scheme: "startFrom",
        startDate: new Date("2023-08-15"),
        enabled: true,
      },
    });

  const filterModel: FilterModel = { tableFilterState, setTableFilterState };

  return <Grid rows={rows} cols={cols} filterModel={filterModel} />;
};

export default SampleFilteredGrid;

Live Demo