Hướng dẫn react bootstrap table 2 sort - phản ứng bootstrap bảng 2 sắp xếp

{
  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
  }
}

{
  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
  }
}

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  sort: true
}, {
  dataField: 'name',
  text: 'Product Name',
  sort: true
}, {
  dataField: 'price',
  text: 'Product Price'
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } />

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
  }
}

columns = [
  { dataField: 'id', text: 'Id' },
  { dataField: 'name', text: 'Name' },
  { dataField: 'animal', text: 'Animal' },
]

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' },
]

{
  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
  }
}

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' },
]

columns = [
  { dataField: 'id', text: 'Id' },
  { dataField: 'name', text: 'Name' },
  { dataField: 'animal', text: 'Animal' },
]

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' },
]

{
  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' },
]

columns = [
  { dataField: 'id', text: 'Id' },
  { dataField: 'name', text: 'Name' },
  { dataField: 'animal', text: 'Animal' },
]

Tù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' }
]

{ 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

• Yêu cầurequired)
• Keyfield (bắt buộc)required)
• yêu cầu dữ liệu)required)

Cột (bắt buộc)

• Không bắt buộc
• bootstrap4
• Xa xôi
• Nodataindication
• Đang tải
• lớp phủ
• đầu đề
• sọc
• giáp ranh
• bay lượn
• ngưng tụ
• Tôi
• TabindExcell
• các lớp học
• BodyClasses
• Vòng bao bọc
• Lớp đầu
• HeaderWrapperClass
• di động
• Selectrow
• Rowstyle
• Các lớp học
• Rowevents
• ẩn
• loại
• Mặc định đã được xác định
• mặc địnhSortDirection
• phân trang
• lọc
• Bộ lọc
• OntableChange

Ondatasizechangerequired) - [String]

keyfield (bắt buộc) - [Chuỗi]

Cho biế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 } } 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]

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.

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]

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' }
]

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' }
]

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
  }
}

Lưu ý: Khi bật từ xa, bạn giả sử cung cấp 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 prop trên

columns = [
  { dataField: 'id', text: 'Id' },
  { dataField: 'name', text: 'Name' },
  { dataField: 'animal', text: 'Animal' },
]

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.

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
  }
}

{
  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
  }
}

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
  }
}

NodatainDication - [Hàm]

remote={ {
  filter: true,
  pagination: false,
  sort: false,
  cellEdit: false
} }

Đ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' }
]

remote={ {
  filter: true,
  pagination: false,
  sort: false,
  cellEdit: false
} }

{
  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
  }
}

{
  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
  }
}

remote={ {
  filter: true,
  pagination: false,
  sort: false,
  cellEdit: false
} }

remote={ {
  filter: true,
  pagination: false,
  sort: false,
  cellEdit: false
} }

{
  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
  }
}

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' }
]

remote={ {
  filter: true,
  pagination: false,
  sort: false,
  cellEdit: false
} }

{
  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
  }
}

{
  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
  }
}

remote={ {
  filter: true,
  pagination: false,
  sort: false,
  cellEdit: false
} }

remote={ {
  filter: true,
  pagination: false,
  sort: false,
  cellEdit: false
} }

{
  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
  }
}

Lớp phủ - [Hàm]

remote={ {
  filter: true,
  pagination: false,
  sort: false,
  cellEdit: false
} }

remote={ { pagination: true, filter: false, sort: false } }

$ npm install react-bootstrap-table2-overlay

import overlayFactory from 'react-bootstrap-table2-overlay';

<BootstrapTable
  data={ data }
  columns={ columns }
  loading={ true }  //only loading is true, react-bootstrap-table will render overlay
  overlay={ overlayFactory() }
/>

Trên thực tế,

remote={ { pagination: true, filter: false, sort: false } }

remote={ { pagination: true, filter: false, sort: false } }

remote={ { pagination: true, filter: false, sort: false } }

remote={ { pagination: true, filter: false, sort: false } }

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 } }

Biên giới - [Bool]

Tương tự như lớp bootstrap

remote={ { pagination: true, filter: false, sort: false } }

Di chuột - [Bool]

Tương tự như lớp bootstrap

remote={ { pagination: true, filter: false, sort: false } }

ngưng tụ - [Bool]

Tương tự như lớp bootstrap

remote={ { pagination: true, filter: false, sort: false } }

ID - [Chuỗi]

Tùy chỉnh ID trên phần tử

remote={ { pagination: true, filter: false, sort: false } }

TabindExcell - [Bool]

Bật thuộc tính

$ npm install react-bootstrap-table2-overlay

$ npm install react-bootstrap-table2-overlay

Lớp - [Chuỗi]

Tùy chỉnh lớp trên phần tử

remote={ { pagination: true, filter: false, sort: false } }

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 } }

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

BodyClasses - [Chuỗi]

Tùy chỉnh lớp trên

$ npm install react-bootstrap-table2-overlay

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) => {
    // ...
  }
}

Tuâ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) => {
    // ...
  }
}

ROWCLASSES - [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) => {
    // ...
  }
}

Tuâ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) => {
    // ...
  }
}

ROWCLASSES - [Chuỗi | Hàm số]

RowEvents - [Đối tượng]

{
  dataField: 'id',
  text: 'Product ID',
  sort: true,
  onSort: (field, order) => {
    // ...
  }
}

Tùy chỉnh các sự kiện trên hàng:

HiddenRows - [mảng]

{ dataField: 'id', text: 'Product ID', sort: true, onSort: (field, order) => { // ... } } 5

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:

Quản lý phân loại trạng thái

{
  dataField: 'id',
  text: 'Product ID',
  sort: true,
  onSort: (field, order) => {
    // ...
  }
}

Bạ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ụ

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) => {
    // ...
  }
}

Trong 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.

Mặc định đã được xác định - [mảng]

{
  dataField: 'id',
  text: 'Product ID',
  sort: true,
  onSort: (field, order) => {
    // ...
  }
}

columns = [ { 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.

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.

PagePination - [Đối tượng]

{
  dataField: 'id',
  text: 'Product ID',
  sort: true,
  onSort: (field, order) => {
    // ...
  }
}

import overlayFactory from 'react-bootstrap-table2-overlay';

<BootstrapTable
  data={ data }
  columns={ columns }
  loading={ true }  //only loading is true, react-bootstrap-table will render overlay
  overlay={ overlayFactory() }
/>

{
  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
  }
}

import overlayFactory from 'react-bootstrap-table2-overlay';

<BootstrapTable
  data={ data }
  columns={ columns }
  loading={ true }  //only loading is true, react-bootstrap-table will render overlay
  overlay={ overlayFactory() }
/>

{
  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
  }
}

overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }

{
  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ộ lọc - [Đối tượng]

overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }

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
  }
}

Sau khi cài đặt

overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }

overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }

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
  }
}

FilterPocation - [Chuỗi]

Giá trị có sẵn là

overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }

overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }

overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }

overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }

overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }

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' }
]

{
  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
  }
}

Chỉ 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' }
]

{
  dataField: 'id',
  text: 'Product ID',
  sort: true,
  onSort: (field, order) => {
    // ...
  }
}

{
  dataField: 'id',
  text: 'Product ID',
  sort: true,
  onSort: (field, order) => {
    // ...
  }
}

{
  dataField: 'id',
  text: 'Product ID',
  sort: true,
  onSort: (field, order) => {
    // ...
  }
}

• overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
  

  2

• import overlayFactory from 'react-bootstrap-table2-overlay';
  
  <BootstrapTable
    data={ data }
    columns={ columns }
    loading={ true }  //only loading is true, react-bootstrap-table will render overlay
    overlay={ overlayFactory() }
  />
  

  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
    }
  }
  

  8

• {
    dataField: 'id',
    text: 'Product ID',
    sort: true,
    onSort: (field, order) => {
      // ...
    }
  }
  

  08

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) => {
    // ...
  }
}

{
  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
  }
}

OnDataSizeChange - [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:

• {
    dataField: 'id',
    text: 'Product ID',
    sort: true,
    onSort: (field, order) => {
      // ...
    }
  }
  

  10: Kích thước dữ liệu mớ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
  }
}