Filtering

Accessing the Interface

For grids where filtering is enabled, the user can access the filtering interface via the appropriate button on the toolbar. The button has an aria-label of Filtering and is visually labeled by the filter Bootstrap icon.

Controlled vs Uncontrolled

Filtering can be enabled in either a controlled or uncontrolled manner, depending on type of FilterModel passed as filterModel prop to the Table component. Pass an object of type ControlledFilterModel or UncontrolledFilterModel to use controlled or uncontrolled mode, respectively.

Controlled mode allows the parent component full control over the state of filtering in the grid, but requires more code to set up.

Uncontrolled mode causes the Table component itself to keep track of the state of filtering and this state is not available to parent component. The parent component may specify a starting state. If it does not, the Table component will generate an empty starting state with no filters initially applied.

Filtering and Formatter Functions

Note that, as of now, filtering can only be on the original, unformatted data for each column, and there is no easy way for users to see the underlying unformatted data if formatters are applied.

This issue may be addressed in the future by adding the functionality to let users filter on formatted strings and/or letting users see unformatted values.

In the meantime, it is recommended that if you intend to use both filtering and formatters in the same grid, provide guidance as to how one can filter on the original data.

For example, you may have a formatter on a number column to display commas to separate groups of 3 digits. In that case, you may wish display a note to your users that when entering a number to filter on that column, the number displayed in the input will not have commas.

Examples

Both examples use the sample data from the following file:

import { ColDef, RowDef } from "@absreim/react-bootstrap-data-grid/table";
 
export const cols: ColDef[] = [
  {
    type: "number",
    name: "number",
    label: "Number",
  },
  {
    type: "string",
    name: "version",
    label: "Version",
  },
  {
    type: "date",
    name: "date",
    label: "Date",
  },
];
 
interface Data {
  number: number;
  version: string;
  date: Date;
}
 
export const rows: RowDef<Data>[] = [
  {
    id: 0,
    data: {
      number: 7,
      version: "4.1.1.5849914",
      date: new Date("2024-09-05"),
    },
  },
  {
    id: 1,
    data: {
      number: 6,
      version: "4.1.1.4763283",
      date: new Date("2024-02-16"),
    },
  },
  {
    id: 2,
    data: {
      number: 5,
      version: "4.1.1.4061076",
      date: new Date("2023-11-30"),
    },
  },
  {
    id: 3,
    data: {
      number: 4,
      version: "4.1.1.3882084",
      date: new Date("2023-11-02"),
    },
  },
  {
    id: 4,
    data: {
      number: 3,
      version: "4.1.1.3732833",
      date: new Date("2023-09-22"),
    },
  },
  {
    id: 5,
    data: {
      number: 2,
      version: "4.1.1.3686210",
      date: new Date("2023-08-31"),
    },
  },
  {
    id: 6,
    data: {
      number: 1,
      version: "4.1.1.3669438",
      date: new Date("2023-08-25"),
    },
  },
  {
    id: 7,
    data: {
      number: 0,
      version: "4.1.1.3622274",
      date: new Date("2023-08-03"),
    },
  },
];

"use client";
 
import Table, {
  EditableFilterState,
  FilterModel,
} from "@absreim/react-bootstrap-data-grid/table";
import { FC, useState } from "react";
import { cols, rows } from "./tableData";
 
const ControlledFilteredTable: FC = () => {
  const [tableFilterState, setTableFilterState] = useState<EditableFilterState>(
    {
      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 <Table rows={rows} cols={cols} filterModel={filterModel} />;
};
 
export default ControlledFilteredTable;

"use client";
 
import Table, {
  UncontrolledFilterModel,
} from "@absreim/react-bootstrap-data-grid/table";
import { FC } from "react";
import { cols, rows } from "./tableData";
 
const UncontrolledFilteredTable: FC = () => {
  const filterModel: UncontrolledFilterModel = {
    type: "uncontrolled",
    filterTableCaption: "Uncontrolled filter mode example",
  };
 
  return <Table rows={rows} cols={cols} filterModel={filterModel} />;
};
 
export default UncontrolledFilteredTable;