Skip to main content

Sử dụng react-bootstrap-table trong ReactJS

Xin chào các bạn !
Hôm nay mình xin giới thiệu các bạn về một library 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 trong việc xây dựng lên 1 hệ thống các table 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 nó tại đị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ó 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 library này kết hợp với ReactJS  thì tất nhiên các bạn phải install React trước rồi, sau đó các bạn download library react-bootstrap-table về bằng cách download file 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ư các source code của nó tại menu Example.
Để áp dụng library này vào project của bạn thì các bạn cài nó như sau:
npm install react-bootstrap-table --save
Sau khi cài thư viện của nó xong các bạn chỉ cần import nó vô file là dùng thoải con gà mái luôn rồi :).

Sẽ có 2 cách để các bạn import nó vô project đó 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 cũng chả có cha nào rảnh mà dùng cái cú pháp dài thoằng loằng của ES5 cả (LOL).

Như các bạn cũng thấy nó sử dụng cả bootstrap lên để sử 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ụ sử 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:
<!-- we still need bootstrap 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">
Vậy là đã xong 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 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 import BootstrapTable, TableHeaderColumn từ react-bootstrap-table.

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

- Đầu tiên chúng sẽ được bao bọc trong một component là BootstrapTable với data chính là nơi nhận dữ liệu để render ra màn hình.

- Sau đó là tới component 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 của chúng ra đã tạo ra trong mảng products.
Đó 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 những thứ khá như:

- export file CSV
-  tạo nút add thêm 1 hàng mới
- delete row
- 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, GOODLUCK !!!
Nhãn:

Comments

Post a Comment

Popular posts from this blog

Testing React Native Apps

What are we unit testing exactly ? We're using  "unit testing"  to refer to tests of functions and plain JavaScript objects, independent of the React Native framework. This means that we aren't testing any components that rely on React Native. For example, a unit could be individual methods and functions in classes or really any small pieces of functionality. We mock out dependencies in these tests so that we can test individual methods and functions in isolation. These test are written using testing frameworks and for this article i will be using  Jest , javascript testing framework together with  Enzyme  and  React Native Testing Library . Setting Install If you use  React Native CLI  installs the  Jest  testing framework by default. But if you're using Expo we need to install it manually. yarn add -D enzyme enzyme-adapter-react-16 More: yarn add react-dom react-native-testing-library Create new file  je...
Post a Comment
Read more

Content Injection Vulnerability in WordPress

Content Injection Vulnerability in WordPress As part of a vulnerability research project for our Sucuri Firewall (WAF) , we have been auditing multiple open source projects looking for security issues. While working on WordPress, we discovered was a severe content injection (privilege escalation) vulnerability affecting the REST API. This vulnerability allows an unauthenticated user to modify the content of any post or page within a WordPress site. We disclosed the vulnerability to the WordPress Security Team who handled it extremely well. They worked closely with us to coordinate the disclosure timeline and get as many hosts and security providers aware and patched before this became public. A fix for this was silently included on version 4.7.2 along with other less severe issues. This was done intentionally to give everyone time to patch. We are now disclosing the details because we feel there has been enough time for most WordPress users to update their sites. Ar...
1 comment
Read more

Pretty JSON Output

Bạn cảm thấy khó chịu khi JSON output trên cùng 1 dòng, điều đó sẽ chấm dứt với JSON.stringify giúp output ngắn gọn hơn và dễ nhìn hơn. Chỉ cần truyền vào tham số thứ 3 là khoảng cách (space) BOOM ! Tab Spacing Để sử dụng Tab bạn chỉ cần truyền vào tham số "\t" . Ví dụ: Understanding the “Space” argument Tham số thứ 3 của JSON.stringify sử dụng khoảng cách. Nó sẽ giúp cho string output của bạn gọn gàng và dễ nhìn hơn. Nó có 2 loại tham số truyền vào: Number và String . a. Number Bạn có thể dùng bất kì các số từ 0 tới 10. b. String Bạn có thể dùng string thay cho khoảng trống của JSON.stringify. Tối đa bạn chỉ được dùng 10 kí tự. Nếu lớn hơn nó sẽ chỉ lấy 10 kí tự đầu tiên. Hãy thử nó: What is the 2nd parameter ? Tham số thứ 2 dùng để replace. Nó sẽ có 2 loại: Array và Function. a. Array Tôi sẽ demo thử cho bạn với array để thấy sự thú vị của nó: Bạn có thể chọn các cặp key-value bạn muốn output ra...
Post a Comment
Read more