Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.npmjs.com/package/react-bootstrap-table2-filter below:

react-bootstrap-table2-filter - npm

react-bootstrap-table2 separate the filter core code base to react-bootstrap-table2-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 Definitation

$ npm install react-bootstrap-table2-filter --save

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!

require('react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css');
 
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

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

import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
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-table2-filter';
 
const priceFilter = textFilter({
  placeholder: 'My Custom PlaceHolder',  
  className: 'my-custom-text-filter', 
  defaultValue: 'test', 
  comparator: Comparator.EQ, 
  caseSensitive: true, 
  style: { ... }, 
  delay: 1000, 
  id: 'id', 
});
 

A quick example:

import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
 
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-table2-filter';
 
const qualityFilter = selectFilter({
  options: selectOptions,
  placeholder: 'My Custom PlaceHolder',  
  className: 'my-custom-text-filter', 
  defaultValue: '2', 
  comparator: Comparator.LIKE, 
  style: { ... }, 
  withoutEmptyOption: true  
  id: 'id', 
});
 

Note, the selectOptions can be an array or a function which return an array:

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
  })
}];

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 benifit is react-bootstrap-table2 will render the select options by the order of array.

A quick example:

import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
 
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 select filter:

import filterFactory, { multiSelectFilter, Comparator } from 'react-bootstrap-table2-filter';
 
const qualityFilter = multiSelectFilter({
  options: selectOptions,
  placeholder: 'My Custom PlaceHolder',  
  className: 'my-custom-text-filter', 
  defaultValue: '2', 
  comparator: Comparator.LIKE, 
  style: { ... }, 
  withoutEmptyOption: true  
  id: 'id', 
});
 

import filterFactory, { numberFilter } from 'react-bootstrap-table2-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, numberFilter } from 'react-bootstrap-table2-filter';
 
const numberFilter = numberFilter({
  options: [2100, 2103, 2105],  
  delay: 600,  
  placeholder: 'custom placeholder',  
  withoutEmptyComparatorOption: true,  
  withoutEmptyNumberOption: true,  
  comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],  
  style: { display: 'inline-grid' },  
  className: 'custom-numberfilter-class',  
  comparatorStyle: { backgroundColor: 'antiquewhite' }, 
  comparatorClassName: 'custom-comparator-class',  
  numberStyle: { backgroundColor: 'cadetblue', margin: '0px' },  
  numberClassName: 'custom-number-class',  
  defaultValue: { number: 2103, comparator: Comparator.GT }  
  id: 'id', 
})
 

import filterFactory, { dateFilter } from 'react-bootstrap-table2-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-table2-filter';
 
const dateFilter = dateFilter({
  delay: 600,  
  placeholder: 'custom placeholder',  
  withoutEmptyComparatorOption: true,  
  comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],  
  style: { display: 'inline-grid' },  
  className: 'custom-dateFilter-class',  
  comparatorStyle: { backgroundColor: 'antiquewhite' }, 
  comparatorClassName: 'custom-comparator-class',  
  dateStyle: { backgroundColor: 'cadetblue', margin: '0px' },  
  dateClassName: 'custom-date-class',  
  defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }  
  id: 'id', 
})
 

import filterFactory, { customFilter } from 'react-bootstrap-table2-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:

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

This function will pass two argument to you:

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

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

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

import filterFactory, { FILTER_TYPES } from 'react-bootstrap-table2-filter';
 
const customFilter = customFilter({
  type: FILTER_TYPES.NUMBER,  
})

type is a way to ask react-bootstrap-table to filter you data as number, select, date or normal text.

Following properties is valid in FILTER_TYPES:

• TEXT
• SELECT
• NUMBER
• DATE
• MULTISELECT

Default filter is rendered inside the table column header, but you can choose to render them as a row by filterPosition:

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

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

filterFactory is a factory function for initializing some internal config. Below is available options for filterFactory:

This hook function will be called with two arguments(new filter result and filter object) when filtering completed.

function afterFilter(newResult, newFilters) {
  console.log(newResult);
  console.log(newFilters);
}
 
export default () => (
  <div>
    <BootstrapTable
      keyField="id"
      data={ products }
      columns={ columns }
      filter={ filterFactory({ afterFilter }) }
    />
  </div>
);

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4