Bảng khởi động bộ lọc cột

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

7 tách mã base lõi lọc thành

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

8 nên khi bạn dùng lọc cột sẽ có chút khác biệt so với

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

9. Trong phần sau đây, chúng tôi sẽ hướng dẫn bạn cách bật bộ lọc cột

Bản demo trực tiếp cho bộ lọc cột
Định nghĩa đạo cụ & API

---

Cài đặt

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

Thêm CSS

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

Bạn có thể nhận tất cả các loại bộ lọc thông qua nhập và các bộ lọc này là một chức năng xuất xưởng để tạo một phiên bản bộ lọc riêng lẻ. Hiện tại, chúng tôi hỗ trợ các bộ lọc sau

• Bộ lọc văn bản
• Chọn bộ lọc
• Bộ lọc đa lựa chọn
• SốBộ lọc
• Bộ lọc ngày
• Bộ lọc tùy chỉnh
• Sắp có

Bộ lọc văn bản

Sau đây là demo nhanh kích hoạt bộ lọc cột trên cột Giá sản phẩm

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

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

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

Ngoài ra, chúng tôi giữ nguyên tất cả các tính năng và chức năng của bộ lọc trong

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

9 cũ, nhưng theo cách khác để thực hiện

import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-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...

Chọn bộ lọc

Một ví dụ nhanh

________số 8

Sau đây là một ví dụ cho bộ lọc chọn tùy chỉnh

import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-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...

Lưu ý,

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

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

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

1 cũng có thể là một mảng hoặc một hàm

Mảng dưới dạng tùy chọn

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

1

Chức năng như tùy chọn

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

2

Lợi ích là ________ 07 sẽ hiển thị các tùy chọn đã chọn theo thứ tự của mảng

Bộ lọc đa lựa chọn

Bộ lọc đa lựa chọn gần giống như bộ lọc chọn thông thường

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

4

Sau đây là một ví dụ cho bộ lọc đa lựa chọn tùy chỉnh

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

5

Bộ lọc số

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

0

Bộ lọc số giống như các bộ lọc khác, bạn có thể tùy chỉnh bộ lọc số thông qua chức năng xuất xưởng ________ 53

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

1

Bộ lọc ngày

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

2

ghi chú. bộ lọc ngày chấp nhận đối tượng Ngày Javascript trong dữ liệu thô của bạn và bạn phải sử dụng

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

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

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

4 để đặt nó làm kết quả chuỗi ưa thích của mình

Bộ lọc ngày cũng giống như các bộ lọc khác, bạn có thể tùy chỉnh bộ lọc ngày thông qua chức năng xuất xưởng

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

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

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

5

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

3

Bộ lọc tùy chỉnh

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

4

Trong trường hợp bộ lọc tùy chỉnh, bạn phải hoàn thành hai bước sau

1. Gọi

   import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
   
   // omit...
   const columns = [
     ..., {
     dataField: 'price',
     text: 'Product Price',
     filter: textFilter()
   }];
   
   <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
   

   6 và chuyển cho

   import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
   
   // omit...
   const columns = [
     ..., {
     dataField: 'price',
     text: 'Product Price',
     filter: textFilter()
   }];
   
   <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
   

   7
2. Cung cấp

   import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
   
   // omit...
   const columns = [
     ..., {
     dataField: 'price',
     text: 'Product Price',
     filter: textFilter()
   }];
   
   <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
   

   8 làm chức năng gọi lại và trả lại phần tử bộ lọc tùy chỉnh của bạn

cột. bộ lọcRenderer

Hàm này sẽ truyền hai đối số cho bạn

1. import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
   
   // omit...
   const columns = [
     ..., {
     dataField: 'price',
     text: 'Product Price',
     filter: textFilter()
   }];
   
   <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
   

   9. gọi nó để kích hoạt bộ lọc khi bạn cần

2. import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-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...
   

   0. Chỉ đối tượng cột

Cuối cùng, hãy nhớ trả lại thành phần bộ lọc tùy chỉnh của bạn

bộ lọc tùy chỉnh

Chức năng của

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

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

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

6 giống như

import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-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...

2,

import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-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...

3, v.v., đó là vì lý do tùy chỉnh. Tuy nhiên, trong trường hợp bộ lọc tùy chỉnh, chỉ có một số đạo cụ là hợp lệ

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

5

---

Lọc theo chương trình

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

// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

7 cho phép bạn kiểm soát bộ lọc bên ngoài, có nghĩa là người dùng không cần nhập nội dung nào đó vào bộ lọc

Làm sao

Tất cả các bộ lọc đều có một giá trị

import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-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...

5 chấp nhận chức năng gọi lại và chuyển một đối tượng bộ lọc cho bạn