| 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ẑ cẑ. 🙂 Để 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 Reac-bootstrap-table về bằng cách tải xuống tệp zip ụ git nƭ _______0_______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 _______1_______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à dùng thoải mái 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 _______2_______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 không sử dụng cả bootstrap lên để sử dụng được và các bạn cũng không phải cài đặt thêm cả bootstrap vào nữa, ở đ đy thunder bằng cdg cdg cd – JavaScript _______3_______– CSS _______4_______ 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 – 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 – bộ lọc – chỉnh sửa – 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 đủ Hẹn gặp lại các bạn, GOODLUCK |
