Droptables: Tabel Penataan Gaya

1. Format dalam tabel

Pada bilah alat, Anda dapat mengatur gaya untuk sel seperti: font, ukuran font, gaya teks, warna latar belakang sel, warna teks, perataan horizontal dan vertikal sel, ... Ini dapat diterapkan pada satu sel atau beberapa sel.

Tinggi baris dan lebar kolom dapat ditentukan dalam piksel. Silakan buka Menu Format > Terapkan ukuran kolom/baris , lalu pilih Ubah ukuran kolom / Ubah ukuran baris . Pada jendela pop-up, Anda dapat memilih rentang dan mengatur px untuk kolom atau baris. Klik Selesai untuk menyelesaikan.

2. Tema dan opsi pengurutan

Di setiap tabel, Anda dapat menemukan pemilihan Tema di Menu Tema . Cukup klik pada tema untuk menerapkannya.

Pada Menu Tema > Warna Alternatif , fitur "Penataan gaya otomatis" membantu Anda mewarnai baris pada tabel Anda dengan gaya Header dan Footer . Anda dapat memilih gaya templat atau membuat sendiri di pengaturan plugin.

Parameter sortable memungkinkan Anda untuk melakukan pengurutan data AJAX di frontend. Anda dapat melihatnya di Menu Format > Urutkan .

Pengaturan perataan tabel adalah tentang meratakan div yang berisi seluruh tabel, misalnya memusatkan seluruh tabel. Anda dapat menemukannya di Menu Format > Perataan Tabel .

Penyorotan sel juga tersedia sebagai pilihan. Anda dapat mengaktifkan opsi Baris, Kolom, atau Keduanya dalam konfigurasi . Secara default, fitur ini dinonaktifkan. Anda dapat menyesuaikan warna dan opasitas penyorotan.

3. Tambahkan tooltip pada sel

Tooltip saat kursor mouse diarahkan ke sel juga tersedia (perlu diaktifkan dari opsi komponen). Pada setiap sel di tabel, Anda dapat melihat Tooltip saat melakukan klik kanan padanya.

Anda dapat mengatur lebar tooltip dalam piksel. Ini akan membawa Anda ke tooltip dengan editor untuk mengeditnya.

Tambahkan konten dan simpan, selesai, tooltip akan ditampilkan di sisi publik saat kursor diarahkan ke atasnya.

4. Administrasi ACL dan Frontend

Anda dapat mengelola tabel dari antarmuka Joomla. Dari pengelola menu Joomla, tambahkan item Menu Baru dan pilih tipe Kelola Tabel, lalu pilih Droptables frontend - Default sebagai templat.

Berikut tampilan Droptables Manager dari sisi frontend.

Anda dapat menggunakan ACL Grup Pengguna Joomla untuk mengontrol tindakan pengeditan tabel. Pertama, untuk mengatur siapa yang diizinkan untuk melihat tabel, Anda harus pergi ke tab Peran Pengguna Droptables .

Anda dapat mengatur pemilik tabel dari Menu Tabel > Akses tabel.

5. Pembekuan baris dan kolom

Pembekuan kolom

Pembekuan kolom tersedia di Menu Format > Opsi responsif . Anda dapat membekukan hingga 5 kolom. Pembekuan dihitung dari kolom pertama.

Untuk membuat kolom/baris tetap, ada opsi tambahan yang memungkinkan Anda untuk memperbaiki tinggi tabel (karena wadah tabel Anda mungkin memiliki tinggi tak terbatas).

Setelah Anda memilih kolom yang ingin dibekukan, Anda dapat menggulir tabel dan selalu menampilkan kolom yang telah dibekukan.

Pembekuan baris

Anda dapat menemukannya di Menu Format > Header Tabel , dari sini Anda dapat mengaktifkan opsi dan mengatur agar baris dibekukan (hingga 5 baris).

Jika Anda ingin mengatur tinggi tabel, silakan kembali ke opsi Responsif.

Kemudian baris pertama akan dibekukan di bagian frontend sesuai dengan pengaturan tersebut.

6. Memfilter data kolom

Opsi penyaringan tersedia di Menu Format > Filter . Anda dapat mengaktifkannya dengan mengklik untuk mengaktifkan kolom penyaringan data publik.

Contoh filter:

7. Jarak antar sel dan radius batas

Anda dapat menemukan ikon batas pada bilah alat yang membantu menyesuaikan padding dan radius batas pada sel.

8. CSS Kustom

Mari kita melangkah lebih jauh. Jika Anda seorang desainer web dengan keterampilan mengedit CSS, Anda dapat menambahkan CSS di Format Menu > CSS Kustom .

Sel, baris, dan kolom memiliki koordinat untuk mengidentifikasi masing-masing dan menerapkan CSS khusus padanya. R adalah baris, C adalah kolom. Di sini, baris 1 (r1), kolom 4 (c4) = dtr1 dtc4

Kode CSS diberi warna menggunakan fitur pencerminan kode. Kode CSS bisa lebih sederhana, dan itu juga berfungsi!

9. Tabel Joomla Responsif

Apakah tabel saya responsif atau menggunakan fitur gulir pada perangkat berukuran kecil?

Menyembunyikan Kolom

Droptables menangani desain responsif dengan alat prioritas, sebagai pilihan. Secara default, fitur responsif dinonaktifkan, akan ada overflow (yang berfungsi dengan baik di perangkat seluler). Untuk menggunakan Sembunyikan Kolom , Anda harus pergi ke Format Menu > Opsi Responsif.

Mode responsifnya canggih, Anda dapat menentukan prioritas untuk menyembunyikan kolom pada ukuran seluler. Saat kolom disembunyikan, menu seluler dengan kotak centang akan ditampilkan untuk memaksa tampilan/penyembunyian kolom.
Ukuran kolom tetap selama pengeditan tabel. Jika ukuran semua kolom terlalu besar untuk wadah, akan terjadi overflow, dan Anda dapat dengan mudah menggulir pada perangkat seluler.

Tabel dengan penggulir (lebih cocok untuk jumlah kolom yang sedikit)

Tabel dengan kolom tersembunyi (lebih baik untuk jumlah kolom yang banyak)

Judul berulang

Ini adalah opsi lain jika Anda ingin menyisipkan tabel di area kecil pada situs Anda. Anda harus membuka Menu Format > Opsi Responsif. Kemudian pilih Tipe Responsif > Header Berulang.

Akan ada opsi untuk menyesuaikan sesuai permintaan Anda:

• Titik henti responsif (px): Pilih nilai titik henti dalam piksel untuk menentukan kapan tabel akan beralih ke mode responsif ini.
• Tinggi maksimum responsif (px): Saat mode responsif diaktifkan, tergantung pada nilai breakpoint, tentukan tinggi maksimum untuk menghindari tabel yang terlalu panjang.
• Penataan gaya mode responsif: Terapkan penataan gaya default untuk mode responsif ini atau gunakan warna tabel.

Setelah itu, Anda dapat melihat bagaimana tampilan tabel di sisi pengguna.

10. Unduh tabel

Untuk membagikan tabel Anda kepada publik, navigasikan ke Menu Tabel , dan centang tombol Ekspor Excel . Tipe file akan berupa *.xlsx saat diunduh di antarmuka pengguna.

11. Penomoran Halaman

Anda dapat menemukan fitur ini di Menu Format > Penomoran Halaman di setiap edisi tabel. Gunakan tombol pengaktifan/penonaktifan untuk mengaktifkan dan memilih jumlah baris yang akan ditampilkan pada satu halaman.

12. Format untuk sel tunggal 

Anda dapat mengatur format: Tanggal dan waktu, Mata uang, Angka untuk sel tunggal di Droptables . Pertama, Anda harus memilih satu atau beberapa sel. Kemudian, buka Menu Format > Tanggal dan waktu.

Setelah itu, Mata Uang dan Angka dapat dilakukan dengan cara yang sama.

13. Cetak tabel di bagian depan (frontend)

Terkadang, Anda perlu mencetak tabel Anda. Jadi, untuk menampilkan tombol Cetak di bagian depan, pertama-tama Anda harus masuk ke Menu Tabel dan centang tombol Cetak .