Phản ứng-bootstrap-bảng-tiếp theo

Xin chào các bạn
Hôm nay mình xin giới thiệu các bạn về một thư viện của JS đó chính là react-bootstrap-table. Như cái tên đã nói lên tất cả công việc của nó là gì rồi nhỉ, haha
Về mặt cá nhân mình thì thấy nó khá hay khi xây dựng lên 1 bảng hệ thống với tốc độ phải nói là “Quá nhanh quá nguy hiểm”. Không nói nhiều nữa bắt đầu thôi nào

You can see it at address of it at github. https. //github. com/AllenFang/react-bootstrap-table
Về cơ bản tài liệu của nó cũng rất dễ sử dụng, các bạn chỉ cần làm theo hướng dẫn của nó là đã có thể tự mình tạo ra được rồi. 🙂

Để sử dụng thư viện này kết hợp với ReactJS  thì tất nhiên các bạn phải cài đặt React trước rồi, sau đó các bạn tải thư viện react-bootstrap-table về bằng cách tải xuống tệp zip hoặc sử dụng git như sau

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install

Sau đó chỉ cần npm start là đã có thể xem được các ví dụ của nó rồi, nó sẽ chạy tại localhost. 3004
Các bạn có thể xem ví dụ cũng như mã nguồn của nó tại menu Ví dụ
Để áp dụng thư viện này vào dự án của bạn, bạn cài đặt nó như sau

npm install react-bootstrap-table --save

Sau khi cài đặt thư viện của nó xong các bạn chỉ cần nhập file vô vô của nó là thoải mái dùng con gà mái luôn rồi. )

Sẽ có 2 cách để các bạn nhập nó vô dự án đó là sử dụng cú pháp của ES5 hoặc ES6

/ in ECMAScript 6
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
// or in ECMAScript 5
var ReactBSTable = require('react-bootstrap-table'); 
var BootstrapTable = ReactBSTable.BootstrapTable;
var TableHeaderColumn = ReactBSTable.TableHeaderColumn;

Và tất nhiên chả có cha nào rảnh mà dùng cú pháp dài thoằng loằng của ES5 cả (LOL)

Như các bạn cũng thấy nó dùng cả bootstrap lên để dùng được nó các bạn cũng phải cài thêm cả bootstrap vào nữa, ở đây thì mình xin ví dụ dùng bằng CDN
– Javascript

// source maps: https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.js.map
<script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.js">script>
// or use the min version
<script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.js">script>

– CSS

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="./dist/react-bootstrap-table.min.css">

Sau đó là đã hoàn thành phần thủ tục rồi, bây giờ chỉ còn sử dụng nó thôi. Mình xin ví dụ một đơn giản nhất cho công việc minh họa nó

Như ví dụ trên các bạn có thể thấy. đầu tiên các bạn nhập BootstrapTable, TableHeaderColumn từ Reac-bootstrap-table

chức năng addProducts chỉ có nhiệm vụ là tạo ra các chuỗi giả rồi đẩy vô số sản phẩm
Điều quan trọng ở đây là nó sẽ trả lại các thành phần như sau

– Đầu tiên chúng ta sẽ được bao bọc trong một thành phần là BootstrapTable với dữ liệu chính là nơi nhận dữ liệu để hiển thị ra màn hình

– Sau đó là tới thành phần TableHeaderColumn, tại đây ta có thể thấy dataField chính là các thành phần trong từng đối tượng mà chúng đã tạo ra trong mảng sản phẩm

Đó chính là ví dụ đơn giản nhất cho việc sử dụng react-bootstrap-table. Các bạn có thể sử dụng nhiều thứ khác như

– xuất tệp CSV
–  tạo nút thêm 1 hàng mới
- xóa hàng
– sắp xếp hàng, sắp xếp bảng
- lọc
- chỉnh sửa hàng
– phân trang
– định dạng cột
- chỉnh sửa ô

Nói chung là còn rất nhiều thứ mà mình không thể gói gọn trong hướng dẫn này được, lên là sẽ hẹn các bạn để bài viết lần sau sẽ làm đầy đủ và chi tiết hơn
Hẹn gặp lại các bạn, GOODLUCK