Column Filter

react-bootstrap-table-ng separate the filter core code base to react-bootstrap-table-ng-filter, so there's a little bit different when you use column filter than react-bootstrap-table. In the following, we are going to show you how to enable the column filter:

Live Demo For Column Filter
API & Props Definition

Install

$ npm install react-bootstrap-table-ng-filter --save

Add CSS

// es5
require("react-bootstrap-table-ng-filter/dist/react-bootstrap-table-ng-filter.min.css");

// es6
import "react-bootstrap-table-ng-filter/dist/react-bootstrap-table-ng-filter.min.css";

You can get all types of filters via import and these filters are a factory function to create a individual filter instance. Currently, we support following filters:

TextFilter
SelectFilter
MultiSelectFilter
NumberFilter
DateFilter
CustomFilter
Coming soon!

Text Filter

Following is a quick demo for enable the column filter on Product Price column!!

import filterFactory, { textFilter } from 'react-bootstrap-table-ng-filter';

// omit...
const columns = [
  ..., {
  dataField: 'price',
  text: 'Product Price',
  filter: textFilter()
}];

<BootstrapTable
  keyField="id"
  data={products}
  columns={columns}
  filter={filterFactory()}
/>

In addition, we preserve all of the filter features and functionality in legacy react-bootstrap-table, but in different way to do it:

import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table-ng-filter';
// omit...

const priceFilter = textFilter({
  placeholder: 'My Custom PlaceHolder',  // custom the input placeholder
  className: 'my-custom-text-filter', // custom classname on input
  defaultValue: 'test', // default filtering value
  comparator: Comparator.EQ, // default is Comparator.LIKE
  caseSensitive: true, // default is false, and true will only work when comparator is LIKE
  style: { ... }, // your custom styles on input
  delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
  getFilter: (f) => { ... }, // accept callback function and you can call it for filter programmtically
  id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
});

// omit...

Select Filter

A quick example:

import filterFactory, { selectFilter } from 'react-bootstrap-table-ng-filter';

// omit...
const selectOptions = {
  0: 'good',
  1: 'Bad',
  2: 'unknown'
};

const columns = [
  ..., {
  dataField: 'quality',
  text: 'Product Quailty',
  formatter: cell => selectOptions[cell],
  filter: selectFilter({
    options: selectOptions
  })
}];

<BootstrapTable
  keyField="id"
  data={products}
  columns={columns}
  filter={filterFactory()}
/>

Following is an example for custom select filter:

import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table-ng-filter';
// omit...

const qualityFilter = selectFilter({
  options: selectOptions,
  placeholder: 'My Custom PlaceHolder',  // custom the input placeholder
  className: 'my-custom-text-filter', // custom classname on input
  defaultValue: '2', // default filtering value
  comparator: Comparator.LIKE, // default is Comparator.EQ
  caseSensitive: false, // default is true
  style: { ... }, // your custom styles on input
  withoutEmptyOption: true,  // hide the default select option
  getFilter: (f) => { ... }, // accept callback function and you can call it for filter programmtically
  id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
});

// omit...

Note, the selectOptions can be an array or a function as well:

Array as options

const selectOptions = [
  { value: 0, label: 'good' },
  { value: 1, label: 'Bad' },
  { value: 2, label: 'unknown' }
];
const columns = [
  ..., {
  dataField: 'quality',
  text: 'Product Quailty',
  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
  filter: selectFilter({
    options: selectOptions
  })
}];

Function as options

const selectOptions = [
  { value: 0, label: 'good' },
  { value: 1, label: 'Bad' },
  { value: 2, label: 'unknown' }
];
const columns = [
  ..., {
  dataField: 'quality',
  text: 'Product Quailty',
  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
  filter: selectFilter({
    options: () => selectOptions
  })
}];

The benefit is react-bootstrap-table-ng will render the select options by the order of array.

MultiSelect Filter

Multi-select filter is almost same as regular select filterfilter :

import filterFactory, { multiSelectFilter } from 'react-bootstrap-table-ng-filter';

// omit...
const selectOptions = {
  0: 'good',
  1: 'Bad',
  2: 'unknown'
};

const columns = [
  ..., {
  dataField: 'quality',
  text: 'Product Quailty',
  formatter: cell => selectOptions[cell],
  filter: multiSelectFilter({
    options: selectOptions
  })
}];

<BootstrapTable
  keyField="id"
  data={products}
  columns={columns}
  filter={filterFactory()}
/>

Following is an example for custom multi-select filter:

import filterFactory, { multiSelectFilter, Comparator } from 'react-bootstrap-table-ng-filter';
// omit...

const qualityFilter = multiSelectFilter({
  options: selectOptions,
  placeholder: 'My Custom PlaceHolder',  // custom the input placeholder
  className: 'my-custom-text-filter', // custom classname on input
  defaultValue: '2', // default filtering value
  comparator: Comparator.LIKE, // default is Comparator.EQ
  style: { ... }, // your custom styles on input
  withoutEmptyOption: true,  // hide the default select option
  id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
});

// omit...

Number Filter

import filterFactory, { numberFilter } from 'react-bootstrap-table-ng-filter';

const columns = [..., {
  dataField: 'price',
  text: 'Product Price',
  filter: numberFilter()
}];

<BootstrapTable
  keyField="id"
  data={products}
  columns={columns}
  filter={filterFactory()}
/>

Numner filter is same as other filter, you can custom the number filter via numberFilter factory function:

import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table-ng-filter';
// omit...

const numberFilter = numberFilter({
  options: [2100, 2103, 2105],  // if options defined, will render number select instead of number input
  delay: 600,  // how long will trigger filtering after user typing, default is 500 ms
  placeholder: 'custom placeholder',  // placeholder for number input
  withoutEmptyComparatorOption: true,  // dont render empty option for comparator
  withoutEmptyNumberOption: true,  // dont render empty option for numner select if it is defined
  comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],  // Custom the comparators
  style: { display: 'inline-grid' },  // custom the style on number filter
  className: 'custom-numberfilter-class',  // custom the class on number filter
  comparatorStyle: { backgroundColor: 'antiquewhite' }, // custom the style on comparator select
  comparatorClassName: 'custom-comparator-class',  // custom the class on comparator select
  numberStyle: { backgroundColor: 'cadetblue', margin: '0px' },  // custom the style on number input/select
  numberClassName: 'custom-number-class',  // custom the class on ber input/select
  defaultValue: { number: 2103, comparator: Comparator.GT },  // default value
  getFilter: (f) => { ... }, // accept callback function and you can call it for filter programmtically
  id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
})

// omit...

Date Filter

import filterFactory, { dateFilter } from 'react-bootstrap-table-ng-filter';

const columns = [..., {
  dataField: 'date',
  text: 'Product date',
  filter: dateFilter()
}];

<BootstrapTable
  keyField="id"
  data={products}
  columns={columns}
  filter={filterFactory()}
/>

Notes: date filter accept a Javascript Date object in your raw data and you have to use column.formatter to make it as your prefer string result.

Date filter is same as other filter, you can custom the date filter via dateFilter factory function:

import filterFactory, {
  selectFilter,
  Comparator,
} from "react-bootstrap-table-ng-filter";
// omit...

const dateFilter = dateFilter({
  delay: 600, // how long will trigger filtering after user typing, default is 500 ms
  placeholder: "custom placeholder", // placeholder for date input
  withoutEmptyComparatorOption: true, // dont render empty option for comparator
  comparators: [Comparator.EQ, Comparator.GT, Comparator.LT], // Custom the comparators
  style: { display: "inline-grid" }, // custom the style on date filter
  className: "custom-dateFilter-class", // custom the class on date filter
  comparatorStyle: { backgroundColor: "antiquewhite" }, // custom the style on comparator select
  comparatorClassName: "custom-comparator-class", // custom the class on comparator select
  dateStyle: { backgroundColor: "cadetblue", margin: "0px" }, // custom the style on date input
  dateClassName: "custom-date-class", // custom the class on date input
  defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }, // default value
  id: "id", // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
});

// omit...

Custom Filter

import filterFactory, { customFilter } from 'react-bootstrap-table-ng-filter';

const columns = [..., {
  dataField: 'date',
  text: 'Product Name',
  filter: customFilter(),
  filterRenderer: (onFilter, column) => .....
}];

<BootstrapTable
  keyField="id"
  data={products}
  columns={columns}
  filter={filterFactory()}
/>

In custom filter case, you are suppose to finish following two steps:

Call customFilter and pass to column.filter
Give column.filterRenderer as a callback function and return your custom filter element.

column.filterRenderer

This function will pass two argument to you:

onFilter: call it to trigger filter when you need.
column: Just the column object!

In the end, please remember to return your custom filter element!

customFilter

customFilter function just same as textFilter, selectFilter etc, it is for customization reason. However, in the custom filter case, there're only few props are valid:

import filterFactory, {
  FILTER_TYPES,
  Comparator,
} from "react-bootstrap-table-ng-filter";

const customFilter = customFilter({
  type: FILTER_TYPES.NUMBER, // default is FILTER_TYPES.TEXT
  comparator: Comparator.EQ, // only work if type is FILTER_TYPES.SELECT
  caseSensitive: false, // default is true
});

Programmatically Filter

react-bootstrap-table-ng allow you to control filter externally, which means user no need to type something on filter!!

How

All the filters have a getFilter prop which accept a callback function and pass a filter object to you.

import React, { useRef, useMemo } from "react";
import BootstrapTable from "react-bootstrap-table-ng";
import filterFactory, { textFilter } from "react-bootstrap-table-ng-filter";
const Table = ({ products }) => {
  const priceFilterRef = useRef(null);
  const columns = useMemo(
    () => [
      // ... other columns
      {
        dataField: "price",
        text: "Product Price",
        filter: textFilter({
          getFilter: (filter) => {
            priceFilterRef.current = filter;
          },
        }),
      },
    ],
    [],
  ); // memoized so the filter instance is stable
  const filterPrice = () => {
    priceFilterRef.current?.(100);
  };
  return (
    <div>
      <button onClick={filterPrice}>Click to filter</button>
      <BootstrapTable
        keyField="id"
        data={products}
        columns={columns}
        filter={filterFactory()}
      />
    </div>
  );
};
export default Table;

Examples

Accessibility

All built-in filter components are compliant with WCAG 2.1 Level AA (Robust - Status Messages).

Dynamic Announcements: When a filter is applied or cleared, the component automatically notifies screen readers of the update (e.g., "Filter applied: 100" or "Filter cleared") via a visually hidden polite live region.
Labels and Instructions: Each filter control is programmatically linked to its column header and contains hidden labels to satisfy WCAG 3.3.2 requirements.
Multi-select Support: The MultiSelectFilter correctly communicates its multi-selection capability to assistive technology.

Install​

Add CSS​

Text Filter​

Select Filter​

Array as options​

Function as options​

MultiSelect Filter​

Number Filter​

Date Filter​

Custom Filter​

column.filterRenderer​

customFilter​

Programmatically Filter​

How​

Examples​

Accessibility​