Pengelolaan Konten

Pustaka Tabel

Membuat, mengelola, dan menyematkan tabel data terstruktur — termasuk impor CSV/Google Sheets dan kustomisasi tampilan.

Pustaka Tabel

Apa itu Pustaka Tabel?

ℹ️ Apa itu Pustaka Tabel?

Modul Pengelolaan Konten → Pustaka Tabel digunakan untuk membuat, mengelola, dan menyematkan tabel data terstruktur ke dalam halaman statis atau konten berita. Modul ini mendukung impor data dari file CSV/TSV/TXT atau Google Sheets, pengeditan sel secara langsung, dan kustomisasi tampilan tabel.

1. Halaman Daftar Pustaka Tabel

Halaman ini menampilkan seluruh tabel yang telah dibuat. Anda dapat mencari, membuat baru, atau mengelola tabel yang sudah ada.

Halaman Daftar Pustaka Tabel

Gambar: Halaman daftar Pustaka Tabel — dengan fitur pencarian, filter, dan kolom aksi

Fitur pada Halaman Daftar:

  • Pencarian Judul — Cari tabel berdasarkan nama/judul yang telah diberikan.
  • Tombol + Tabel Baru — Membuat tabel data baru dari awal.
  • Edit / Hapus — Kolom aksi untuk mengubah struktur/data tabel atau menghapusnya.
  • Embed / Copy ID — Mendapatkan kode semat (embed code) untuk menampilkan tabel di halaman konten.

2. Membuat & Mengedit Tabel

Klik Tambah Baru untuk membuka editor tabel. Anda dapat membuat struktur tabel (kolom dan baris) lalu mengisi data.

Editor Tabel

Gambar: Editor Pustaka Tabel — atur kolom di bagian atas, isi data per sel di grid bagian bawah, dengan tombol tambah baris dan impor di kanan

Tampilan editor terbagi dua bagian utama. Bagian atas berisi pengaturan judul, deskripsi, caption, style preset, dan definisi kolom (nama header serta per-column align). Bagian bawah berupa grid mirip spreadsheet di mana Anda mengisi data per sel secara langsung dengan klik, kemudian ketik. Tombol Tambah Baris menambah baris kosong di bawah, sementara tombol Tambah Kolom menyisipkan kolom baru di sebelah kanan. Setiap kolom dan baris memiliki ikon kecil untuk menghapus atau mengubah urutan.

Struktur Tabel:

InformasiPenjelasan
Judul Tabel *Nama tabel untuk memudahkan pencarian di daftar. Pilih nama yang jelas dan spesifik, contoh: "Data Realisasi Anggaran 2024" lebih baik daripada "Tabel 1". Judul ini tidak tampil di halaman publik, hanya untuk pengelolaan internal.
DeskripsiPenjelasan singkat tentang isi dan tujuan tabel. Contoh: "Realisasi anggaran per OPD triwulan 1-4 tahun 2024". Bersifat opsional, namun membantu rekan tim memahami konteks tabel saat banyak tabel tersimpan.
CaptionKeterangan/caption yang tampil di bawah tabel saat ditampilkan di portal publik. Berguna untuk memberi judul atau sumber data, contoh: "Tabel 1. Realisasi Anggaran 2024 (Sumber: BPS)".
Style PresetPilih gaya tampilan tabel: Default, Striped (baris selang-seling warna), Bordered (garis border tegas), atau Compact (padat, jarak antar sel lebih rapat). Pilih yang paling sesuai dengan konteks dan kebutuhan tampilan.
KolomDefinisikan setiap kolom dengan Nama Kolom (header yang tampil di tabel). Anda bisa menambah kolom lewat tombol Tambah Kolom, menghapus lewat ikon tempat sampah di header kolom, atau mengubah urutan dengan menarik (drag) header kolom ke posisi baru. Setiap kolom memiliki Align toggle — pilih perataan left/center/right untuk seluruh sel di kolom tersebut.
BarisData aktual yang diisi pada setiap sel di grid editor. Klik sel untuk mengetik langsung, mirip seperti Excel. Tekan Tab untuk berpindah ke kolom berikutnya, Enter untuk ke baris baru. Gunakan tombol Tambah Baris bila perlu menambah data, atau ikon tempat sampah di akhir untuk menghapus. Seluruh data sel default disimpan sebagai string (teks).

Kapan Tabel Berguna?

Tabel paling cocok dipakai untuk data terstruktur yang butuh baris-kolom, antara lain:

  • Data statistik — realisasi anggaran, capaian kinerja, jumlah pegawai per unit, data kependudukan.
  • Tabel perbandingan — tarif layanan per golongan, spesifikasi perbandingan produk, perbedaan jenis layanan.
  • Jadwal — jadwal kegiatan bulanan, jadwal pelayanan publik, jadwal dinas pegawai.

Sebaliknya, untuk konten naratif (paragraf penjelasan, cerita, pengumuman) gunakan editor teks biasa. Tabel bukan tempat untuk menulis paragraf panjang di dalam sel. Bila sebuah "tabel" hanya berisi satu kolom deskripsi panjang, kemungkinan besar konten tersebut lebih cocok ditulis sebagai teks dengan sub-judul.

3. Impor Data dari CSV / Google Sheets

Fitur ini memungkinkan Anda mengimpor data dalam jumlah besar tanpa harus mengetik manual satu per satu. Sangat berguna untuk data statistik, laporan keuangan, atau data kependudukan yang sudah ada dalam bentuk spreadsheet.

Langkah Impor:

  1. Pada halaman editor tabel, klik tombol Impor CSV (atau Import).
  2. Pilih sumber impor:
    • Unggah File — pilih file dari komputer. Format yang didukung: .csv, .tsv, atau .txt (file teks dengan delimiter).
    • URL Google Sheets — tempel URL Google Sheets publik, sistem akan menarik data langsung dari spreadsheet tanpa perlu unggah file.
  3. Sistem akan membaca sumber data dan menampilkan pratinjau (preview) data yang akan diimpor. Periksa apakah kolom sudah sesuai.
  4. Jika ada ketidakcocokan kolom, Anda dapat menyesuaikan pemetaan (mapping) kolom di langkah ini.
  5. Klik Konfirmasi Impor. Data akan dimasukkan ke dalam tabel.

⚠️ Peringatan: Persiapan File CSV/TSV/TXT

Pastikan pertama file berisi nama kolom (header). Data harus rapi — tidak ada sel kosong di tengah, tidak ada sel yang digabung (merged cells). Simpan spreadsheet dalam format CSV UTF-8 agar karakter khusus (seperti tanda baca Indonesia) tidak rusak. Untuk Google Sheets, pastikan sheet sudah diset ke akses publik (Anyone with the link) sebelum menyalin URL-nya.

4. Menyematkan Tabel ke Konten (Embed)

Setelah tabel dibuat, Anda dapat menyematkannya ke dalam Halaman Statis atau Berita menggunakan fitur Table Selector.

Cara Embed:

  1. Buka editor konten (Halaman Statis atau Berita) — editor Rich Text (TipTap).
  2. Pada toolbar editor, cari dan klik tombol Insert Table from Pustaka (ikon tabel dengan database).
  3. Sebuah dialog akan muncul menampilkan daftar tabel yang telah Anda buat di Pustaka Tabel.
  4. Pilih tabel yang ingin disematkan, lalu klik Sisipkan.
  5. Editor akan menyisipkan shortcode atau placeholder tabel. Saat konten dipublikasikan, placeholder ini akan diganti dengan tabel data interaktif yang dapat di-sort dan di-search oleh pengunjung.

💡 Tips: Keunggulan Embed vs Tabel Manual

Tabel dari Pustaka Tabel bersifat dinamis — jika Anda memperbarui data di Pustaka Tabel, perubahan otomatis tercermin di semua halaman yang menyematkan tabel tersebut. Ini jauh lebih efisien daripada mengedit tabel satu per satu di setiap halaman. Selain itu, tabel Pustaka mendukung pencarian, pengurutan (sort), dan paginasi yang tidak tersedia pada tabel statis biasa.

Kapan Menggunakan Pustaka Tabel?

SkenarioGunakan Pustaka Tabel?
Data anggaran yang sering diupdate✅ Ya — data dinamis
Daftar pegawai dengan 50+ baris✅ Ya — perlu sort/search
Jadwal kegiatan 5 baris❌ Tidak — tabel manual di editor cukup
Tabel perbandingan statis (harga/jenis)❌ Tidak — tabel manual lebih cepat
Data realisasi per bulan, diembed di 3 halaman✅ Ya — sekali update, tampil di semua
Daftar hadir rapat❌ Tidak — konten sekali pakai

Pustaka Tabel paling berguna untuk data yang (1) volumenya besar, (2) perlu diupdate berkala, dan (3) ditampilkan di banyak halaman.