1. Định dạng thành bảng

Trên thanh công cụ, bạn có thể thiết lập kiểu cho ô như: phông chữ, cỡ chữ, kiểu chữ, màu nền ô, màu chữ, căn chỉnh ô theo chiều ngang và chiều dọc,... Có thể áp dụng cho một ô hoặc nhiều ô.

có thể xác định chiều cao hàng và chiều rộng cột bằng pixel. Vui lòng vào Menu Định dạng > Áp dụng kích thước cột/dòng , sau đó chọn Thay đổi kích thước cột / Thay đổi kích thước hàng . Trong cửa sổ bật lên, bạn có thể chọn phạm vi và đặt pixel cho cột hoặc hàng. Nhấp vào Xong để hoàn tất.

2. Theme và tùy chọn sắp xếp

Trong mỗi bảng, bạn có thể tìm thấy chọn Theme tại Menu Theme . Chỉ cần nhấp vào một theme để áp dụng.

Trong cùng Theme Menu > Màu sắc thay thế , tính năng "Tự động tạo kiểu" giúp bạn tô màu đường kẻ trên bảng bằng tạo kiểu cho Tiêu đề và trang. Bạn có thể chọn kiểu mẫu hoặc tự tạo kiểu riêng trong cài đặt plugin.

Tham số sortable cho phép bạn thực hiện sắp xếp dữ liệu AJAX ở frontend . Bạn có thể xem trong Menu Định dạng > Sắp xếp .

Căn chỉnh bảng là thao tác căn chỉnh phần tử div chứa toàn bộ bảng, ví dụ như căn giữa toàn bộ bảng. Bạn có thể tìm thấy tùy chọn này tại Định dạng Menu > Căn chỉnh bảng .

Chức năng tô sáng ô cũng có sẵn như một tùy chọn. Bạn có thể bật tùy chọn Tô sáng theo dòng, theo cột hoặc cả hai trong phần cấu hình . Chức năng này được tắt theo mặc định. Bạn có thể điều chỉnh màu sắc và độ mờ của phần tô sáng.

3. Thêm chú thích (tooltip) vào các ô

Chức năng hiển thị chú thích khi di chuột qua ô cũng có sẵn (cần được kích hoạt từ tùy chọn thành phần). Trên mỗi ô trong bảng, bạn có thể thấy tùy Chú thích khi nhấp chuột phải vào ô đó.

Bạn có thể đặt chiều rộng của chú thích công cụ bằng pixel. Thao tác này sẽ đưa bạn đến một chú thích công cụ có trình chỉnh sửa để chỉnh sửa.

Thêm nội dung và lưu lại, vậy là xong, chú thích sẽ hiển thị ở phía công khai khi di chuột qua.

4. Quản trị ACL và giao diện Frontend

Bạn có thể quản lý bảng của mình từ frontend . Từ trình quản lý menu Joomla, hãy thêm một mục Menu mới và chọn loại là Quản lý bảng, sau đó chọn frontend Droptables - Mặc định làm mẫu.

Đây là giao diện frontendmà bạn có thể thấy trong Droptables Manager.

Bạn có thể sử dụng ACL Nhóm Người dùng Joomla để kiểm soát các thao tác chỉnh sửa bảng. Trước tiên, để thiết lập ai được phép xem bảng, bạn nên vào Vai trò Người dùng trong Droptables .

Bạn có thể thiết lập người sở hữu cho bảng từ Menu Bảng > Quyền truy cập bảng.

5. Đóng băng hàng và cột

Đóng băng cột

Tính năng đóng băng cột có sẵn trong Định dạng Menu > Tùy chọn thích ứng . Bạn có thể đóng băng tối đa 5 cột. Số cột được tính từ cột đầu tiên.

Để cố định cột/hàng, có một tùy chọn bổ sung cho phép bạn cố định chiều cao của bảng (vì vùng chứa bảng của bạn có thể có chiều cao vô hạn).

Khi bạn đã chọn cột cần cố định, bạn có thể cuộn trên bảng và luôn hiển thị cột đã được cố định đó.

Đóng băng theo hàng

Bạn có thể tìm thấy tùy chọn này tại Menu Định dạng > Tiêu đề bảng , từ đây bạn có thể bật tùy chọn và thiết lập các hàng cần cố định (tối đa 5 hàng).

Nếu bạn muốn điều chỉnh chiều cao của bảng, vui lòng quay lại tùy chọn Responsive.

Sau đó, hàng đầu tiên sẽ được cố định ở frontend theo cài đặt đã thiết lập.

6. Lọc dữ liệu cột

Bạn có thể chọn tùy chọn lọc tại Menu Định dạng > Bộ lọc . Bạn có thể kích hoạt tùy chọn này bằng cách nhấp vào để bật các trường lọc dữ liệu công khai.

Ví dụ về bộ lọc:

7. Khoảng đệm ô và bán kính đường viền

Bạn có thể tìm thấy biểu tượng đường viền trên thanh công cụ, biểu tượng này giúp điều chỉnh khoảng cách lề và bán kính đường viền của ô.

8. CSS tùy chỉnh

Hãy tiến thêm một bước nữa. Nếu bạn là nhà thiết kế web có kỹ năng chỉnh sửa CSS, bạn có thể thêm CSS tại Menu Format > Custom CSS .

Các ô, hàng, cột đều có tọa độ để xác định từng phần tử và áp dụng CSS tùy chỉnh cho chúng. R là hàng, C là cột. Ở đây, hàng 1 (r1), cột 4 (c4) = dtr1 dtc4

Mã CSS được tô màu bằng Code Mirror. Mã CSS cũng có thể ngắn gọn hơn, vẫn hoạt động tốt!

9. Bảng Joomla tương thích

Bảng của tôi có tự động điều chỉnh kích thước hay sử dụng thanh cuộn trên các thiết bị nhỏ?

Ẩn Cols

Droptables xử lý thiết kế đáp ứng bằng công cụ ưu tiên, như một tùy chọn. Theo mặc định, tính năng đáp ứng bị tắt, sẽ có hiện tượng tràn nội dung (mặc dù hoạt động rất tốt trên thiết bị di động). Để sử dụng Ẩn cột , bạn cần vào Định dạng Menu > Tùy chọn đáp ứng.

Chế độ tương thích cao cấp cho phép bạn thiết lập thứ tự ưu tiên ẩn cột trên thiết bị di động. Khi các cột bị ẩn, một menu dành cho thiết bị di động với hộp kiểm sẽ được hiển thị để buộc hiển thị/ẩn các cột.
Kích thước cột được cố định trong quá trình chỉnh sửa bảng. Nếu kích thước của tất cả các cột quá lớn so với vùng chứa, sẽ xảy ra hiện tượng tràn nội dung, và bạn có thể dễ dàng cuộn trên thiết bị di động.

Bảng có thanh cuộn (phù hợp hơn với số lượng cột ít)

Bảng với cột bị ẩn (phù hợp hơn với bảng có nhiều cột)

Tiêu đề lặp lại

Đây là một lựa chọn khác nếu bạn muốn chèn bảng vào một khu vực nhỏ trên trang web của mình. Bạn nên điều hướng đến Định dạng Menu > Tùy chọn tương thích. Sau đó chọn Loại tương thích > Tiêu đề lặp lại.

Sẽ có các tùy chọn để tùy chỉnh theo yêu cầu của bạn:

• Ngắt đáp ứng (px): Chọn giá trị ngắt tính bằng pixel để xác định khi nào bảng sẽ chuyển sang chế độ đáp ứng này.
• Chiều cao tối đa đáp ứng (px): Khi chế độ đáp ứng được kích hoạt, tùy thuộc vào giá trị điểm ngắt, hãy xác định chiều cao tối đa để tránh bảng quá dài.
• Tạo kiểu cho chế độ responsive: Áp dụng kiểu mặc định cho chế độ responsive này hoặc sử dụng màu sắc của bảng.

Sau đó, bạn có thể xem bảng sẽ trông như thế nào trên frontend.

10. Tải xuống bảng

Để chia sẻ bảng của bạn với công chúng, hãy điều hướng đến Menu Bảng , và chọn Xuất Excel . Loại tệp sẽ là *.xlsx khi tải xuống ở frontend .

11. Đánh số trang

Bạn có thể tìm thấy tính năng này tại Định dạng Menu > Phân trang trong mỗi phiên bản bảng. Sử dụng nút chuyển đổi để bật và chọn số hàng hiển thị trên mỗi trang.

12. Định dạng cho các ô đơn 

Bạn có thể thiết lập định dạng: Ngày giờ, Tiền tệ, Số cho một hoặc nhiều ô trong Droptables . Trước tiên, bạn cần chọn một hoặc nhiều ô. Sau đó, vào Menu Định dạng > Ngày giờ.

Sau đó, việc xử lý tiền tệ và số liệu cũng có thể được thực hiện theo cách tương tự.

13. In bảng trên frontend

Đôi khi, bạn cần in bảng của mình. Vì vậy, để hiển thị nút In trên frontend , trước tiên, bạn cần điều hướng đến Menu Bảng và chọn nút In .