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

Cách sử dụng Nmap để scan Port trên Kali Linux

Port là gì ? Có rất nhiều lớp trong mô hình mạng nói chung, lớp vận chuyển đóng vai trò cung cấp các thông tin liên lạc giữa các ứng dụng hệ thống với nhau, và lớp này thì được kết nối với Port (Cổng). Một số điều lưu ý mà bạn cần biết về port - Port là một số hiệu ID cho 1 ứng dụng nào đó. - Mỗi ứng dụng chỉ có thể chạy trên một hoặc nhiều port và mang tính độc quyền, không có ứng dụng khác được chạy chung. - Chính vì tính độc quyền nên các ứng dụng có thể chỉnh sửa để cho phép chạy với một port khác. - Port cũng có phân chia làm Internal và External . - Số hiệu từ 1->65535. Một số thuật ngữ mà bạn cần nắm rõ Port: Là một địa chỉ mạng thực hiện bên trong hệ điều hành giúp phân biệt các traffic khác nhau của từng ứng dụng riêng lẻ Internet Sockets: Là một tập tin xác định địa chỉ IP gắn kết với port, nhằm để xử lý dữ liệu như các giao thức. Binding: Là quá trình mà một ứng dụng hoặc dịch vụ (service) sử dụng Internet Sockets để xử lý nhập và xuất các dữ liệu ...
1 comment
Read more

Tại sao lại chọn HDH Kali Linux ?

Xin chào tất cả mọi người, hôm nay mình sẽ nói về chủ đề "Tại sao lại chọn HDH Kali Linux  ?". Tuy tuy nhiên để giải thích về điều này thì ít nhất các bạn cũng phải  biết Linux là gì đúng không ! Theo như Bách khoa toàn thư mở Wikipedia  thì Linux là tên gọi của một hệ điều hành máy tính và cũng là tên hạt nhân của hệ điều hành. Nó có lẽ là một ví dụ nổi tiếng nhất của phần mềm tự do và của việc phát triển mã nguồn mở. Phiên bản Linux đầu tiên do Linus Torvalds viết vào năm 1991, lúc ông còn là một sinh viên của Đại học Helsinki tại Phần Lan. Ông làm việc một cách hăng say trong vòng 3 năm liên tục và cho ra đời phiên bản Linux 1.0 vào năm 1994. Bộ phận chủ yếu này được phát triển và tung ra trên thị trường dưới bản quyền GNU General Public License. Do đó mà bất cứ ai cũng có thể tải và xem mã nguồn của Linux. Một cách chính xác, thuật ngữ "Linux" được sử dụng để chỉ Nhân Linux, nhưng tên này được sử dụng một cách rộng rãi để miêu tả tổng thể một hệ điều ...
Post a Comment
Read more

Hướng dẫn cài LibreOffice trên Kali Linux

Xin chào mọi người ! Một số bạn không biết cài bộ công cụ văn phòng nào cho máy tính cài HĐH Kali Linux. Hôm nay mình sẽ hướng dẫn cho các bạn cài  LibreOffice trên Kali Linux. Nó giống như bộ Office của Microsoft và trên thực tế thì không bằng Microsoft được đâu. Việc cài đặt bộ Office này khá là đơn giản. Đầu tiên để cài thì bạn hãy tải LibreOffice phù hợp với phiên bản của máy tính đang sử dụng. Như của mình hiện tại là phiên bản LibreOffice_5.2.4 + Link Download (Download) Hãy tải phiên bản mới nhất có đuôi *.deb cho dễ cài đặt. Sau khi tải xong có 2 cách để các bạn cài đặt nó: + Cách 1: Sử dụng phần mềm Gdebi để cài đặt các file *.deb một cách dễ dàng. Tuy nhiên rất hay bị lỗi và không cài đặt được. + Cách 2: (Nên theo cách này) 1- Giải nén file LibreOffice ra. 2- Mở Terminal ra gõ:   ~# cd Downloads Các bạn có thể dùng lệnh ls để biết chính xác tên thư mục của mình và copy paste cho chuẩn. Tiếp sau đó thì gõ:   ~# cd LibreOffice_5....
3 comments
Read more