Bootstrap-bảng phản ứng

Một trong những thành phần cơ bản nhất cần thiết để trình bày dữ liệu của bạn là Lưới dữ liệu còn được gọi là Bảng. Tuy nhiên, nó không cung cấp chức năng bổ sung thường được yêu cầu trong các ứng dụng, chẳng hạn như sắp xếp, lọc, phân trang, chỉnh sửa trong ô…

Đó là nơi React Bootstrap Tables thu hút rất nhiều sự chú ý. Chúng bao gồm các lớp kiểu được xác định trước vừa đáp ứng vừa đáng tin cậy, cho phép bạn biên dịch một lượng lớn dữ liệu và hiển thị nó theo cách hợp lý và có thứ tự

Bạn có thể nâng cao bảng của mình bằng cách thêm các nút, hộp kiểm, bảng điều khiển và nhiều yếu tố bổ sung khác. Bạn cũng có thể sử dụng các tùy chọn bảng dữ liệu nâng cao như sắp xếp, tìm kiếm hoặc phân trang

bảng cơ bản

Dưới đây là một ví dụ về giao diện của một bảng cơ bản trong Bootstrap. Tất cả các kiểu bảng được kế thừa trong Bootstrap 4, điều này có nghĩa là mọi bảng lồng nhau sẽ được tạo kiểu giống như bảng cha

#NameHandle1Ordinarycoders1@Ordinarycoders12Ordinarycoders2@Ordinarycoders23Ordinarycoders3@Ordinarycoders3

Thêm bảng React Bootstrap

Bắt đầu bằng cách thêm React Bootstrap Table vào dự án của chúng tôi

# add with npm
npm install react-bootstrap-table-next
# or with yarn
yarn add react-bootstrap-table-next

React Bootstrap Table dựa trên Bootstrap để tạo kiểu, vì vậy chúng ta cũng phải cài đặt gói bootstrap cho các tệp Bootstrap CSS

# add with npm
npm install bootstrap
# or with yarn
yarn add bootstrap

Nếu bạn cần các tính năng bổ sung, React Bootstrap Table cung cấp các gói riêng biệt và nếu bạn định sử dụng một số tính năng bổ sung này, bạn cũng cần cài đặt chúng.

Bây giờ, chúng ta có thể thêm Bảng Bootstrap vào dự án của mình

Chúng tôi sẽ bắt đầu bằng cách nhập tệp CSS. khởi động. tệp css được sử dụng để định kiểu bảng. Sau đó, chúng tôi sẽ nhập react-bootstrap-table2.min.css cho các kiểu Bảng React Bootstrap cụ thể không có trong Bootstrap. Và cuối cùng, chúng ta sẽ nhập thành phần bảng Bootstrap-Table

import React from "react";
import "./styles.css";import "bootstrap/dist/css/bootstrap.css";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";import BootstrapTable from "react-bootstrap-table-next";const products = [
  { id: 1, name: "Ordinarycoders course 1", price: 101 },
  { id: 2, name: "Ordinarycoders course 2", price: 102 },
  { id: 3, name: "Ordinarycoders course 3", price: 103 },
  { id: 4, name: "Ordinarycoders course 4", price: 104 },
  { id: 5, name: "Ordinarycoders course 5", price: 105 }];const columns = [
  {
    dataField: "id",
    text: "Product ID",
    sort: true
  },
  {
    dataField: "name",
    text: "Product Name",
    sort: true
  },
  {
    dataField: "price",
    text: "Product Price in $"
  }
];export default function App() {
  return (
    

              bootstrap4
        keyField="id"
        data={products}
        columns={columns}
      />
    

  );
}

Kết quả phải như bảng bên dưới

Mảng sản phẩm chứa danh sách các mặt hàng mà chúng tôi muốn hiển thị. Mảng cột chỉ định cấu hình cột của bảng. Với trường Trường dữ liệu, chúng tôi mô tả tên của trường sẽ được hiển thị, tên hiển thị với trường văn bản và liệu nó có thể sắp xếp được với trường sắp xếp cho mỗi cột hay không

Cuối cùng, chúng tôi kết xuất bảng với thành phần bảng. Chúng tôi sử dụng thuộc tính bootstrap4 để thông báo cho bảng rằng chúng tôi đang sử dụng Bootstrap phiên bản 4 của khung

Sau đó, chúng tôi cung cấp dữ liệu để hiển thị trong thuộc tính

# add with npm
npm install bootstrap
# or with yarn
yarn add bootstrap

0 và cấu hình cột trong thuộc tính

# add with npm
npm install bootstrap
# or with yarn
yarn add bootstrap

1. Chúng tôi cũng xác định rằng thuộc tính

# add with npm
npm install bootstrap
# or with yarn
yarn add bootstrap

2 của sản phẩm nên được sử dụng làm khóa duy nhất với thuộc tính

# add with npm
npm install bootstrap
# or with yarn
yarn add bootstrap

0

• Ghi chú. Nếu bạn không chỉ định thuộc tính

  # add with npm
  npm install bootstrap
  # or with yarn
  yarn add bootstrap

  1, React Bootstrap Table sẽ hiển thị bảng cho Bootstrap phiên bản 3

Cấu hình React Bootstrap Table

Chúng tôi có thể định cấu hình thành phần Bảng Bootstrap React bằng các thuộc tính của nó có sẵn trên trang web chính thức

Giả sử chúng ta muốn thêm phân trang vào bảng của mình

Phân trang, như đã nêu trước đó, được triển khai trong một gói riêng biệt. Trước khi chúng ta có thể sử dụng nó, trước tiên chúng ta phải cài đặt nó

# add with npm
npm install react-bootstrap-table2-paginator
# or with yarn
yarn add react-bootstrap-table2-paginator

Bây giờ, chúng ta có thể thêm nó vào bảng của mình

import React from "react";
import "./styles.css";import "bootstrap/dist/css/bootstrap.css";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";export const productsGenerator = quantity => {
  const items = [];
  for (let i = 1; i < quantity; i++) {
    items.push({ id: i, name: `Ordinarycoders course ${i}`, price: 100 + i });
  }
  return items;
};const products = productsGenerator(100);const columns = [
  {
    dataField: "id",
    text: "Product ID",
    sort: true
  },
  {
    dataField: "name",
    text: "Product Name",
    sort: true
  },
  {
    dataField: "price",
    text: "Product Price in $"
  }
];export default function App() {
  return (
    

              bootstrap4
        keyField="id"
        data={products}
        columns={columns}
        pagination={paginationFactory({ sizePerPage: 5 })}
      />
    

  );
}

Kết quả phải như bảng bên dưới

Trình diễn này giống với trình diễn bảng đơn giản. Hàm phân trang Factory từ gói

# add with npm
npm install bootstrap
# or with yarn
yarn add bootstrap

2 được nhập thay vì hàm phân trang Factory từ ví dụ trước. Chúng tôi gọi hàm này và cung cấp kết quả cho thuộc tính phân trang của bảng

Ghi chú. Nếu dự án React của bạn đang sử dụng Bootstrap, bảng sẽ có kiểu dáng giống như phần còn lại của ứng dụng. Tất cả các chủ đề bổ sung cũng sẽ được áp dụng. Đây là một lựa chọn tốt nếu bạn muốn áp dụng kiểu dáng cho tất cả các bảng trong ứng dụng của mình

Phần kết luận

Nếu bạn bắt đầu lập trình trong React Bootstrap với một bảng, bạn sẽ nhanh chóng học cách xử lý mã. Các bảng chịu trách nhiệm hiển thị thông tin theo cách có tổ chức để xem các mẫu và ý tưởng từ dữ liệu được nhóm thành các danh mục và chọn các bảng React Bootstrap là một lựa chọn tuyệt vời khi bạn cần hiển thị lưới dữ liệu với sắp xếp, phân trang và lọc

Bảng Bootstrap trong React là gì?

Bootstrap có tốt cho React không?

Bảng React có nhanh không?

Reactstrap hay React Bootstrap cái nào tốt hơn?