7 Cho phép bạn định cấu hình các cột có thể sắp xếp. Hiện tại, chúng tôi không hỗ trợ loại nhiều cột, nhưng nó sẽ được thực hiện trong tương lai.{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
Bản demo trực tiếp cho sắp xếp bảng
Bật sắp xếp trên cột
Đầu tiên, bạn cần biết cột nào bạn cho phép người dùng sắp xếp và đưa ra
{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
8 là {
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
9 trong định nghĩa cột.const columns = [{
dataField: 'id',
text: 'Product ID',
sort: true
}, {
dataField: 'name',
text: 'Product Name',
sort: true
}, {
dataField: 'price',
text: 'Product Price'
}];
Sau khi kết xuất bảng, bạn có thể thấy ID sản phẩm và tên sản phẩm sẽ có biểu tượng Caret bên cạnh tên cột:
Kiểm soát phân loại
Sắp xếp mặc định
{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
7 sẽ chỉ áp dụng sắp xếp mặc định ngay lần đầu tiên, bạn có thể đạt được sắp xếp mặc định trên bảng một cách dễ dàng thông qua columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
1.Sắp xếp người nghe sự kiện
Được xác định
columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
2 trên cột đích:{
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
Quản lý sắp xếp bên ngoài
Bạn có thể định cấu hình
{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
8 đạo cụ và cung cấp columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
4 và columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
5 trên thành phần columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
6 để đặt trạng thái sắp xếp: Vui lòng tham khảo tài liệu này.Thông thường bạn sẽ cần nó khi bạn muốn điều khiển trạng thái sắp xếp bên ngoài, như nhấp vào nút bên ngoài bảng để buộc phải sắp xếp một cột được chỉ định.
Tùy chỉnh thuật toán sắp xếp
Nó đơn giản !! Định cấu hình
columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
7 trên định nghĩa cột.{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
Tùy chỉnh phong cách sắp xếp
Có hai cách bạn có thể thay đổi hoặc thanh toán tiêu đề khi sắp xếp:
columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
8 và columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
9Tùy chỉnh CARET sắp xếp
Xem
data = [
{ id: 1, name: 'George', animal: 'Monkey' }
{ id: 2, name: 'Jeffrey', animal: 'Giraffe' }
{ id: 3, name: 'Alice', animal: 'Giraffe' }
{ id: 4, name: 'Alice', animal: 'Tiger' }
]
0. keyfield [bắt buộc] - [Chuỗi] Dữ liệu [bắt buộc] - [Mảng] Cung cấp dữ liệu cho bảng của bạn. Nó chấp nhận một đối tượng mảng duy nhất.
6{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
Cột [bắt buộc]
Ondatasizechangerequired] - [String]
Cho biết
7 cột nào của dữ liệu là duy nhất. Đây phải là tên của một thuộc tính duy nhất cho mỗi mục trong bộ dữ liệu của bạnrequired] - [Array]{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
Mỗi mục trong mảng này là một đối tượng đại diện cho một hàng trong bảng. Mỗi đối tượng "hàng" phải có một cặp giá trị khóa cho mỗi cột trong bảng, có khóa khớp với giá trị DataField của cột đó.
columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
Ví dụ: nếu định nghĩa cột của bạn trông giống như:
data = [
{ id: 1, name: 'George', animal: 'Monkey' }
{ id: 2, name: 'Jeffrey', animal: 'Giraffe' }
{ id: 3, name: 'Alice', animal: 'Giraffe' }
{ id: 4, name: 'Alice', animal: 'Tiger' }
]
Sau đó, dữ liệu của bạn có thể trông giống như:
Và "keyfield" của bạn sẽ là data = [
{ id: 1, name: 'George', animal: 'Monkey' }
{ id: 2, name: 'Jeffrey', animal: 'Giraffe' }
{ id: 3, name: 'Alice', animal: 'Giraffe' }
{ id: 4, name: 'Alice', animal: 'Tiger' }
]
2required]
- [Object]
data = [
{ id: 1, name: 'George', animal: 'Monkey' }
{ id: 2, name: 'Jeffrey', animal: 'Giraffe' }
{ id: 3, name: 'Alice', animal: 'Giraffe' }
{ id: 4, name: 'Alice', animal: 'Tiger' }
]
Các cột [bắt buộc] - [Đối tượng]
Remote - [Bool | Sự vật]
Mặc định là
data = [
{ id: 1, name: 'George', animal: 'Monkey' }
{ id: 2, name: 'Jeffrey', animal: 'Giraffe' }
{ id: 3, name: 'Alice', animal: 'Giraffe' }
{ id: 4, name: 'Alice', animal: 'Tiger' }
]
3, nếu bật data = [
{ id: 1, name: 'George', animal: 'Monkey' }
{ id: 2, name: 'Jeffrey', animal: 'Giraffe' }
{ id: 3, name: 'Alice', animal: 'Giraffe' }
{ id: 4, name: 'Alice', animal: 'Tiger' }
]
4, bạn được cho là xử lý tất cả các sự kiện thay đổi bảng, như: Partination, chèn, lọc, v.v ... Đây là cơ hội bạn có thể kết nối với máy chủ hoặc cơ sở dữ liệu từ xa để thao túng dữ liệu của mình. Vì lý do linh hoạt, bạn có thể kiểm soát chức năng nào nên được xử lý trên điều khiển từ xa thông qua trả về đối tượng:For flexibility reason, you can control what functionality should be handled on remote via a object return:
remote={ {
filter: true,
pagination: false,
sort: false,
cellEdit: false
} }
Trong trường hợp trên, chỉ có bộ lọc cột sẽ được xử lý trên điều khiển từ xa vì chúng tôi kích hoạt nó bằng cách đưa ra
{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
9.Lưu ý: Khi bật từ xa, bạn giả sử cung cấp cho
6 prop trêndata = [ { id: 1, name: 'George', animal: 'Monkey' } { id: 2, name: 'Jeffrey', animal: 'Giraffe' } { id: 3, name: 'Alice', animal: 'Giraffe' } { id: 4, name: 'Alice', animal: 'Tiger' } ]
6, đó là cách duy nhất để liên lạc với máy chủ từ xa và trạng thái bảng cập nhật của bạn.columns = [ { dataField: 'id', text: 'Id' }, { dataField: 'name', text: 'Name' }, { dataField: 'animal', text: 'Animal' }, ]
Một trường hợp đặc biệt để phân trang từ xa:
remote={ { pagination: true, filter: false, sort: false } }
Có một trường hợp đặc biệt để phân trang từ xa, thậm chí bạn chỉ chỉ định phân trang cần phải xử lý là từ xa,
{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
7 sẽ xử lý tất cả các thay đổi bảng [bộ lọc, sắp xếp, v.v.] là chế độ từ xa, vì {
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
7 chỉ biết dữ liệu của trang hiện tại, nhưng lọc lọc , tìm kiếm hoặc sắp xếp cần phải làm việc trên dữ liệu tổng thể.bootstrap4 - [bool]
{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
9 để chỉ ra phiên bản bootstrap của bạn là 4. Phiên bản mặc định là 3.NodatainDication - [Hàm]
remote={ {
filter: true,
pagination: false,
sort: false,
cellEdit: false
} }
1 phải là một chức năng gọi lại, trả về bất cứ thứ gì sẽ được hiển thị trong bảng khi dữ liệu trống.empty.Đang tải - [Bool]
Cho xem bảng có tải hay không, ví dụ: tải dữ liệu chờ, lọc, v.v ... Nó chỉ hợp lệ khi
data = [
{ id: 1, name: 'George', animal: 'Monkey' }
{ id: 2, name: 'Jeffrey', animal: 'Giraffe' }
{ id: 3, name: 'Alice', animal: 'Giraffe' }
{ id: 4, name: 'Alice', animal: 'Tiger' }
]
4 được bật. Khi remote={ {
filter: true,
pagination: false,
sort: false,
cellEdit: false
} }
3 là {
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
9, {
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
7 sẽ tham dự để hiển thị lớp phủ trên bảng thông qua remote={ {
filter: true,
pagination: false,
sort: false,
cellEdit: false
} }
6 prop, nếu remote={ {
filter: true,
pagination: false,
sort: false,
cellEdit: false
} }
6 prop không được đưa ra, {
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
7 sẽ bỏ qua kết xuất lớp phủ.only valid when data = [
{ id: 1, name: 'George', animal: 'Monkey' }
{ id: 2, name: 'Jeffrey', animal: 'Giraffe' }
{ id: 3, name: 'Alice', animal: 'Giraffe' }
{ id: 4, name: 'Alice', animal: 'Tiger' }
]
4 is enabled. When remote={ {
filter: true,
pagination: false,
sort: false,
cellEdit: false
} }
3 is
{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
9, {
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
7 will attend to render a overlay on table via remote={ {
filter: true,
pagination: false,
sort: false,
cellEdit: false
} }
6 prop, if remote={ {
filter: true,
pagination: false,
sort: false,
cellEdit: false
} }
6 prop is not given, {
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
7 will ignore the overlay rendering.Lớp phủ - [Hàm]
remote={ {
filter: true,
pagination: false,
sort: false,
cellEdit: false
} }
6 Chấp nhận chức năng nhà máy sẽ trả về một thành phần bậc cao hơn. Theo mặc định, remote={ { pagination: true, filter: false, sort: false } }
0 có thể là một lựa chọn tốt cho bạn:$ npm install react-bootstrap-table2-overlay
import overlayFactory from 'react-bootstrap-table2-overlay';
Trên thực tế,
remote={ { pagination: true, filter: false, sort: false } }
0 phụ thuộc vào remote={ { pagination: true, filter: false, sort: false } }
2 và remote={ { pagination: true, filter: false, sort: false } }
3 chỉ là một chức năng nhà máy và bạn có thể chuyển bất kỳ đạo cụ nào có sẵn cho remote={ { pagination: true, filter: false, sort: false } }
2:overlay={ overlayFactory[{ spinner: true, background: 'rgba[192,192,192,0.3]' }] }
Chú thích - [Chuỗi | Nút]
Giống như thẻ chú thích HTML, bạn có thể đặt nó thành chuỗi hoặc React JSX.
Sọc - [Bool]
Tương tự như lớp bootstrap
remote={ { pagination: true, filter: false, sort: false } }
5 để thêm các chuỗi ngựa vằn vào bảng.Biên giới - [Bool]
Tương tự như lớp bootstrap
remote={ { pagination: true, filter: false, sort: false } }
6 để thêm đường viền vào một ô và ô bảng.Di chuột - [Bool]
Tương tự như lớp bootstrap
remote={ { pagination: true, filter: false, sort: false } }
7 để thêm hiệu ứng di chuột [màu nền màu xám] trên các hàng bảng.ngưng tụ - [Bool]
Tương tự như lớp bootstrap
remote={ { pagination: true, filter: false, sort: false } }
8 để làm cho một bảng nhỏ gọn hơn bằng cách cắt đệm tế bào làm đôi.ID - [Chuỗi]
Tùy chỉnh ID trên phần tử
remote={ { pagination: true, filter: false, sort: false } }
9.TabindExcell - [Bool]
Bật thuộc tính
$ npm install react-bootstrap-table2-overlay
0 trên phần tử $ npm install react-bootstrap-table2-overlay
1.Lớp - [Chuỗi]
Tùy chỉnh lớp trên phần tử
remote={ { pagination: true, filter: false, sort: false } }
9.Vòng bao bọc - [Chuỗi]
Tùy chỉnh lớp trên phần tử bên ngoài kết thúc phần tử
remote={ { pagination: true, filter: false, sort: false } }
9.Các lớp tiêu đề - [Chuỗi]
Tùy chỉnh lớp trên hàng tiêu đề [________ 74].
HeaderWrapperClasses - [Chuỗi]
Tùy chỉnh lớp trên
$ npm install react-bootstrap-table2-overlay
5.BodyClasses - [Chuỗi]
Tùy chỉnh lớp trên
$ npm install react-bootstrap-table2-overlay
6.Celledit - [Object]
Làm cho các ô bảng có thể chỉnh sửa, vui lòng xem định nghĩa di động để biết thêm chi tiết.
Selectrow - [Đối tượng]
Làm cho các hàng bảng có thể chọn, vui lòng xem định nghĩa Selectrow để biết thêm chi tiết.
Rowstyle - [Đối tượng | Hàm số]
Tùy chỉnh phong cách của các hàng bảng:
{
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
0Tuânp này cũng chấp nhận chức năng gọi lại cho kiểu hàng linh hoạt theo kiểu hàng tùy chỉnh:
{
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
1ROWCLASSES - [Chuỗi | Hàm số]
Tùy chỉnh phong cách của các hàng bảng:
{
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
2Tuânp này cũng chấp nhận chức năng gọi lại cho kiểu hàng linh hoạt theo kiểu hàng tùy chỉnh:
{
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
3ROWCLASSES - [Chuỗi | Hàm số]
RowEvents - [Đối tượng]
{
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
4Tùy chỉnh các sự kiện trên hàng:
HiddenRows - [mảng]
Ẩn các hàng, đạo cụ này chấp nhận một mảng các phím hàng: {
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
5
{
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
Sắp xếp - [Đối tượng]
Hai trường hợp bạn có thể cần phải định cấu hình {
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
8 prop:
{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
Quản lý phân loại trạng thái
{
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
6Bạn có thể cung cấp columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
4 và columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
5 để chỉ định trạng thái sắp xếp trong bảng, ví dụ
columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
Cấu hình sắp xếp một lần
So here we give you a chance to just setup these props in one time.
{
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
7Trong phiên bản Earily, chúng tôi chỉ có thể định cấu hình import overlayFactory from 'react-bootstrap-table2-overlay';
0 và columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
7 mỗi cột. Nhưng chúng giống nhau trong hầu hết các trường hợp. Vì vậy, ở đây chúng tôi cung cấp cho bạn một cơ hội để chỉ thiết lập các đạo cụ này trong một lần.
import overlayFactory from 'react-bootstrap-table2-overlay';
columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
Mặc định đã được xác định - [mảng]
{
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
8columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
1 Chấp nhận một mảng đối tượng cho phép bạn xác định các cột sắp xếp mặc định khi kết xuất lần đầu tiên.
columns = [
{ dataField: 'id', text: 'Id' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'animal', text: 'Animal' },
]
DEFAULTsortDirection - [Chuỗi]
Hướng dẫn mặc định khi lần đầu tiên nhấp vào cột tiêu đề, giá trị có sẵn là import overlayFactory from 'react-bootstrap-table2-overlay';
3 và import overlayFactory from 'react-bootstrap-table2-overlay';
4. Mặc định là import overlayFactory from 'react-bootstrap-table2-overlay';
4.
import overlayFactory from 'react-bootstrap-table2-overlay';
import overlayFactory from 'react-bootstrap-table2-overlay';
import overlayFactory from 'react-bootstrap-table2-overlay';
PagePination - [Đối tượng]
{
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
9import overlayFactory from 'react-bootstrap-table2-overlay';
6 Cho phép người dùng hiển thị bảng phân trang ở dưới cùng của bảng. Nhưng chức năng phân trang được tách ra khỏi lõi {
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
7 để bạn được cho là cài đặt import overlayFactory from 'react-bootstrap-table2-overlay';
8.{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
0overlay={ overlayFactory[{ spinner: true, background: 'rgba[192,192,192,0.3]' }] }
1 là một chức năng thực sự và cho phép vượt qua một số tùy chọn phân trang, theo sau chúng tôi liệt kê tất cả các tùy chọn có sẵn:{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
1Bộ lọc - [Đối tượng]
overlay={ overlayFactory[{ spinner: true, background: 'rgba[192,192,192,0.3]' }] }
2 cho phép người dùng lọc dữ liệu theo các cột. Để biết thêm thông tin, xin vui lòng điều hướng đến bộ lọc.Bắt đầu
{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
2Sau khi cài đặt
overlay={ overlayFactory[{ spinner: true, background: 'rgba[192,192,192,0.3]' }] }
3, bạn có thể dễ dàng kích hoạt chức năng của overlay={ overlayFactory[{ spinner: true, background: 'rgba[192,192,192,0.3]' }] }
2.Thí dụ
{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
3FilterPocation - [Chuỗi]
Giá trị có sẵn là
overlay={ overlayFactory[{ spinner: true, background: 'rgba[192,192,192,0.3]' }] }
5, overlay={ overlayFactory[{ spinner: true, background: 'rgba[192,192,192,0.3]' }] }
6 và overlay={ overlayFactory[{ spinner: true, background: 'rgba[192,192,192,0.3]' }] }
7, mặc định là overlay={ overlayFactory[{ spinner: true, background: 'rgba[192,192,192,0.3]' }] }
5. Prop này quyết định nơi overlay={ overlayFactory[{ spinner: true, background: 'rgba[192,192,192,0.3]' }] }
9 Bộ lọc cột kết xuất.OntableChange - [Hàm]
Hàm gọi lại này sẽ được gọi khi
data = [
{ id: 1, name: 'George', animal: 'Monkey' }
{ id: 2, name: 'Jeffrey', animal: 'Giraffe' }
{ id: 3, name: 'Alice', animal: 'Giraffe' }
{ id: 4, name: 'Alice', animal: 'Tiger' }
]
4 chỉ được bật.{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
4Chỉ có hai đối số sẽ được chuyển cho
data = [
{ id: 1, name: 'George', animal: 'Monkey' }
{ id: 2, name: 'Jeffrey', animal: 'Giraffe' }
{ id: 3, name: 'Alice', animal: 'Giraffe' }
{ id: 4, name: 'Alice', animal: 'Tiger' }
]
6: {
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
02 và {
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
03:{
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
02 là cho bạn biết loại chức năng nào để kích hoạt thay đổi của bảng này: Các giá trị có sẵn ở bên dưới:
2overlay={ overlayFactory[{ spinner: true, background: 'rgba[192,192,192,0.3]' }] }
6import overlayFactory from 'react-bootstrap-table2-overlay';
8{ dataField: 'id', text: 'Product ID', sort: true // Perform a reverse sorting here sortFunc: [a, b, order, dataField, rowA, rowB] => { if [order === 'asc'] { return b - a; } return a - b; // desc } }
08{ dataField: 'id', text: 'Product ID', sort: true, onSort: [field, order] => { // ... } }
Sau đây là tất cả các thuộc tính có sẵn trong đối tượng
{
dataField: 'id',
text: 'Product ID',
sort: true,
onSort: [field, order] => {
// ...
}
}
03:{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
5OnDataSizeChange - [Hàm]
Hàm gọi lại này sẽ chỉ được gọi khi thay đổi kích thước dữ liệu bằng tìm kiếm/bộ lọc, v.v ... Hàm này có một đối số là một đối tượng chứa các đạo cụ bên dưới:
10: Kích thước dữ liệu mới{ dataField: 'id', text: 'Product ID', sort: true, onSort: [field, order] => { // ... } }
{
dataField: 'id',
text: 'Product ID',
sort: true
// Perform a reverse sorting here
sortFunc: [a, b, order, dataField, rowA, rowB] => {
if [order === 'asc'] {
return b - a;
}
return a - b; // desc
}
}
6