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

Hướng dẫn cài đặt Python 3 trên Kali Linux - How to install Python 3 on Kali Linux

Xin chào tất cả mọi người, Python là một ngôn ngữ lập trình có thế nói là vô cùng "báo đạo" trong giới lập trình ngày nay. Với các phiên bản của Kali Linux mặc định sẽ là python 2.x.x. Tuy nhiên để đuổi kịp theo thời đại, thì Python đã nâng cấp lên phiên bản Python  3 cũng khá lâu rồi. Hôm nay mình xin hướng dẫn các bạn cài đặt Python 3 1 cách rất là simple trên Kali Linux. Ở đây mình hướng dẫn cài đặt Python 3.3.2. Bước 1 : Mở Terminal và copy đoạn mã sau: wget http://python.org/ftp/python/3.3.2/Python-3.3.2.tgz && tar -xvf Python-3.3.2.tgz Bước 2: Tiếp tục gõ: 2.a :  cd Python-3.3.2 2.b: ./configure 2.c: make 2.d: sudo make altinstall Sau khi cài đặt xong để có thể sử dụng bạn phải gõ python3 để chạy, còn không mặc định sẽ là phiên bản Python 2 cũ kia. Chỉ với các bước đơn giản như trên là bạn đã cài đặt thành công Python 3 trên Kali Linux. Quá đơn giản phải không nào. Chúc bạn thành công !
Post a Comment
Read more

Cách mã hóa mật khẩu trong Kali Linux 2016.2 | Encrypt Passwords

Xin chào tất cả mọi người ! Như tất cả mọi người cũng đã biết việc mã hóa mật khẩu là vô cùng quan trọng trong thời buổi công nghệ thông tin phát triển như vũ bão hiện nay. Việc để mật khẩu một cách bình thường là vô cùng nguy hiểm. Hôm nay tôi xin giới thiệu cho tất cả mọi người một công cụ chuyên mã hóa mật khẩu trên Kali Linux đó chính là HashCode Tool. Việc cài đặt và sử dụng HashCode rất đơn giản, chúng ta sẽ bắt đầu luôn nào ! Bước 1:Download  Để Download HashCode các bạn có thể tải bằng cách: ~# cd Desktop ~# git clone https://github.com/Sup3r-Us3r/HashCode.git Sau đó chờ tải file HashCode về. File sẽ được lưu ở ngoài màn hình Desktop. Bước 2: Cài đặt (Install) Sau khi file đã tải xong các bạn trỏ tới file: ~# cd HashCode Chạy 3 lệnh tiếp theo: ~# sudo chmod +x hashcode-en.py ~# sudo chmod +x hashcode-pt.py ~# sudo chmod +x hashcodegui.py Sau khi chạy xong 3 lệnh trên vậy là việc cài đặt của chúng ta đã hoàn tất và bây giờ chúng ta hãy c...
Post a Comment
Read more

11 việc cần làm sau khi cài đặt Kali Linux

Hiện nay Kali Linux không còn là khái niệm quá xa lạ với những người theo ngành Công nghệ thông tin nói chung và bảo mật nói riêng. nó là một hệ điều hành đắc lực phục vụ cho công việc pentest của các chuyên gia bảo mật ! Trên các diễn đàn nước ngoài có rất nhiều bài viết hướng dẫn hay ! tuy nhiên mình thấy các bài viết đa số là rời rạc và chưa cụ thể cho các bạn newber ! Để thuận tiện cho các bạn mới học và làm quen với hệ điều hành này hôm nay mình xin phép được tổng hợp lại những gì cần làm sau khi cài đặt Kali Linux . + Đầu tiên bạn nên chạy lệnh: #apt-get -f install và #apt-get upgrade  Nó sẽ update những thư viện còn thiếu để cài đặt những ứng dụng ở dưới. 1. Update hệ thống. Sau khi việc cài đặt hoàn tất việc đầu tiên là cập nhật hệ thống để đảm bảo rằng mọi thứ được cập nhật đầy đủ. sử dụng lệnh: # apt-get update  2. Upgrade hệ thống. sau khi update để cập nhật lại hệ thống thì việc tiếp theo là cập nhật những gì còn thiếu sót và những bản c...
1 comment
Read more