Gói npm Reac-bootstrap-table2-filter nhận được tổng cộng 23.695 lượt tải xuống mỗi tuần. Do đó, chúng tôi đã chấm điểm mức độ phổ biến của bộ lọc react-bootstrap-table2 để được Công nhận
Dựa trên số liệu thống kê dự án từ kho lưu trữ GitHub cho gói npm react-bootstrap-table2-filter, chúng tôi thấy rằng nó đã được gắn dấu sao 1.226 lần và 63 dự án khác trong hệ sinh thái phụ thuộc vào nó
Số lượt tải xuống được tính là trung bình động trong khoảng thời gian 12 tháng qua, không bao gồm các ngày cuối tuần và các điểm dữ liệu bị thiếu đã xác định
Trong tương lai, bộ công cụ này sẽ hỗ trợ các tính năng khác như xóa hàng, chèn, v.v. Ngay bây giờ chúng tôi chỉ theo dõi các tính năng
- Tìm kiếm bảng
- Xuất CSV
- Chuyển đổi cột
Bản trình diễn trực tiếp cho bảng Tìm kiếm Bản trình diễn trực tiếp cho xuất CSV Bản trình diễn trực tiếp cho cột Chuyển đổi
Định nghĩa đạo cụ API
Cài đặt
$ npm install react-bootstrap-table2-toolkit --save
Thêm CSS
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
Tìm kiếm bảng
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }
Bạn phải kích hoạt chức năng tìm kiếm thông qua
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
2 prop trên// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
3// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
3 là một trình bao bọc ngữ cảnh phản ứng, bạn phải bao bọc// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
5 và// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
6 là con của// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
3Bạn cũng nên kết xuất
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
6 với// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
9. Vị trí của// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
6 phụ thuộc vào bạn
Đạo cụ // es5
require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'];
// es6
import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
6
tên lớp - [chuỗi]
Tùy chỉnh lớp trên phần tử đầu vào
trình giữ chỗ - [chuỗi]
Tùy chỉnh trình giữ chỗ trên phần tử đầu vào
phong cách - [đối tượng]
Tùy chỉnh kiểu trên phần tử đầu vào
độ trễ = [số]
milionsecond để gỡ lỗi đầu vào của người dùng
srText = [chuỗi]
Tùy chỉnh văn bản trình đọc màn hình cho đầu vào tìm kiếm. [Mặc định. "Tìm kiếm bảng này"]
Tùy chọn tìm kiếm
tìm kiếm mặc định - [chuỗi]
Chấp nhận một chuỗi sẽ được sử dụng để tìm kiếm mặc định khi hiển thị bảng lần đầu tiên
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';3
onColumnMatch - [chức năng]
Acccpt một chức năng sẽ được gọi khi bảng cố gắng khớp với mọi ô khi tìm kiếm xảy ra. Chức năng này chấp nhận một đối tượng như ví dụ dưới đây
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';4
ghi chú. Bạn phải trả về
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }2 khi logic đối sánh của bạn là dương và ngược lại
tìm kiếmĐịnh dạng - [bool]
Nếu bạn muốn tìm kiếm trên dữ liệu đã định dạng, bạn phải bật công cụ này.
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';0 sẽ kiểm tra xem bạn có xác định
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }4 khi thực hiện tìm kiếm không
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';8
afterSearch - [Chức năng]
Sau khi tìm kiếm xong, chức năng gọi lại này sẽ được gọi với kết quả mới nhất
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';9
Xóa nút tìm kiếm
Chúng tôi có chức năng tìm kiếm rõ ràng tích hợp cho phép người dùng xóa trạng thái tìm kiếm thông qua nút nhấp
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }0
Xuất CSV
Có hai bước để kích hoạt chức năng xuất CSV
- Cung cấp cho
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }
5 chỗ dựa làimport ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }
2 trên// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
3 - Kết xuất
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }
8 vớiimport ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }
9. Vị trí củaimport ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }
8 phụ thuộc vào bạn
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }7
Xuất tùy chọn CSV
tên tệp - [Chuỗi]
Tùy chỉnh tên tệp csv
dấu phân cách - [Chuỗi]
Tùy chỉnh trình phân tách tệp csv
bỏ quaHeader - [bool]
Mặc định là
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';31. Đặt true để tránh đính kèm tiêu đề csv
bỏ quaFooter - [bool]
Mặc định là
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }2. Cung cấp cho
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';31 để đính kèm chân bảng nếu được bật
noAutoBOM - [bool]
Mặc định là
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }2
blobType - [chuỗi]
Mặc định là
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';35. Thay đổi để cập nhật loại blob của tệp đã xuất
exportAll - [bool]
Mặc định là
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }2.
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';31 sẽ chỉ xuất dữ liệu hiện tại hiển thị trên bảng
chỉ xuất lựa chọn - [book]
Mặc định là
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';31.
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }2 sẽ chỉ xuất dữ liệu được chọn
chỉ Xuất lọc - [máu]
Mặc định là
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';31.
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }2 sẽ chỉ xuất dữ liệu được lọc/tìm kiếm
Khi bạn định cấu hình chỗ dựa này là đúng, bạn phải tắt
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';42
Chuyển đổi cột
Hãy xem cách hiển thị chuyển đổi cột trong thành phần phản ứng của bạn
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';0
Đạo cụ
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';43 có đủ thông tin để cho phép bạn tùy chỉnh danh sách chuyển đổi. [demo][Bản demo trực tiếp để xuất CSV]
Nếu bạn muốn hiển thị mặc định trên cột được chỉ định, bạn chỉ cần cung cấp cho
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... { props => [ Input something at below input field: ] }2 hoặc
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';31 trên
// es5 require['react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css']; // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';46