Reac-bootstrap-bảng cập nhật dữ liệu

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 mà 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.
Trở về mặt cá nhân mình thì thấy nó khá hay trong quá trình 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.

Các bạn có thể xem qua địa chỉ của nó tại github. https. //github. com/AllenFang/react-bootstrap-table
Về cơ bản tài liệu của nó 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 . 🙂

Để 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 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 file zip hoặc sử dụng .

$ 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, các 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 nó vô file 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 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 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.

function addProducts only có nhiệm vụ là để tạo ra các chuỗi giả rồi đẩy các sản phẩm vô const
Điều quan trọng ở đây là nó sẽ trả về các thành phần như vậy .

– Đầu tiên chúng 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à truy cập vào 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
– sort row, sort table
– filter
– edit row
– pagination
– column format
– cell edit

Nói chung là còn rất nhiều thứ mà mình chưa thể gói gọn trong tutorial này được, lên là sẽ hẹn các bạn cho 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, CHÚC MỪNG BẠN.