Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Bekerja dengan Tabel dalam React, Bagian Kedua

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Working With Tables in React.
Working With Tables in React, Part One

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Ikhtisar

Ini adalah bagian dua dari serial dua bagian tentang React-Bootstrap-Table. Pada bagian pertama kita membuat aplikasi React sederhana menggunakan react-create-app, menambahkan React-Bootstrap-Table, mengisi tabel dengan data, bekerja dengan kolom, menata tabel, dan baris yang dipilih.

Pada bagian ini, kita akan melanjutkan perjalanan dengan memperluas baris, menambahkan baris, menghapus baris, dan mencakup paginasi, pengeditan sel, dan penyesuaian tingkat lanjutan.

Memperluas Baris

Ini adalah salah satu fitur keren dari React-bootstrap-table. Saat menampilkan data tabular, sering ada data tambahan yang mungkin ingin Anda lihat pada satu atau dua baris, namun Anda tidak dapat menampilkan semua data untuk semua baris.

Salah satu pilihan untuk mengatasi hal itu adalah dengan menampilkan tooltips, namun tooltips mengharuskan Anda mengarahkan mouse ke area target, dan Anda hanya bisa melihat satu tooltip sekaligus. Memperluas baris memungkinkan Anda menampilkan data tambahan untuk setiap baris dalam semacam laci yang tetap diperluas selama yang Anda inginkan, dan Anda dapat menutupnya kembali saat selesai. Anda dapat memperluas baris sebanyak yang Anda inginkan pada waktu yang sama. Begini cara melakukannya dengan React-bootstrap-table.

Love map berisi hubungan antara beberapa karakter Arrested Development: Gob mencintai Marta dan Buster menyukai Lucile 2. Kontrol fungsi isExpandable() yang barisnya dapat diperluas. Dalam kasus ini, ia mengembalikan true untuk baris yang nama karakternya ada di love map. Fungsi expandRow() mengembalikan komponen saat satu baris diperluas.

Komponen yang dikembalikan ditampilkan di bawah baris sampai baris tertutup. Mengkonfigurasi ekspansi baris sedikit rumit. Beberapa pilihan hanya prooerti pada komponen BootstrapTable.

Opsi kolom yang diperluas adalah satu prop objek, dan kemudian ada opsi yang disebut prop yang berisi opsi perluasan baris tambahan seperti expandRowBgColor dan perluasan. Akan jauh lebih sederhana jika hanya ada satu prop yang disebut expandRowProp yang berisi semua pilihan (seperti selectRowProp).

The result of the above code

Paginasi

Sejauh ini kita hanya menampilkan tiga baris data. Tabel dirancang untuk menampilkan banyak data yang tidak serta merta muat di layar secara bersamaan. Di situlah paginasi masuk. React-bootstrap-table mendukung banyak pilihan paginasi.

Mari mengisi tabel kita dengan 100 item, masing-masing sepuluh halaman dari sepuluh item. Kita akan menggunakan fungsi getData() yang mengembalikan sebuah array dari 100 objek dengan id, nama, dan nilai berdasarkan indeks mereka.

Mari kita juga menentukan halaman mana yang akan ditampilkan pada awalnya (4), menyesuaikan teks untuk halaman prev, next, first dan last (menggunakan panah Unicode untuk keindahan tambahan) dan akhirnya memberikan fungsi kustom yang disebut showTotal() untuk menampilkan total jumlah item. Perhatikan bahwa atribut untuk mengendalikan tombol halaman sebelumnya disebut "prePage" dan bukan "prevPage" (milik saya). Semua opsi paginasi masuk ke atribut "options" umum dari tabel.

The resulting table of the code above

Menambah dan Menghapus Baris

Sejauh ini kita menggunakan tabel untuk menampilkan informasi dengan berbagai cara. Namun tabel dapat digunakan sebagai antarmuka pengguna untuk memanipulasi data. Mari kita lihat cara menambahkan dan menghapus baris dari tabel.

Atribut kunci adalah insertRow dan deleteRow. Saat Anda menentukannya, tombol "New" dan "Delete" ditambahkan. Jika Anda mengklik tombol "New", dialog modal akan terbuka dan memungkinkan Anda menambahkan baris baru. Jika Anda mengklik tombol "Delete", semua baris yang dipilih akan dihapus. Untuk menghapus baris, Anda harus mengaktifkan pemilihan baris, tentu saja. Anda juga bisa melampirkan fungsi hook yang dipanggil setelah menambahkan atau menghapus baris.

Adding and Deleting Rows

Pengeditan Sel

Bentuk lain dari manipulasi data adalah pengeditan di tempat (a.k.a. pengeditan sel). Pengeditan sel bisa dipicu oleh klik atau klik ganda. Pengeditan sel dikendalikan oleh atribut "cellEdit". Selain mode, Anda dapat menentukan baris yang tidak dapat diedit dan fungsi kait.

Dalam kode berikut, fungsi nonEditableRows hanya mengembalikan kunci baris 3, namun bisa menggunakan logika yang lebih canggih.

Editing Cells

Mengekspor Data Anda

Terkadang, melihat data Anda dan bermain dengannya di UI web tidaklah cukup, dan Anda perlu mengambil data Anda dan memasukkannya ke alat lainnya. Cara melakukannya dengan React-bootstrap-table sangat sederhana. Anda cukup menambahkan atribut exportCSV (dan secara opsional sebuah nama file) dan tombol ekspor ditambahkan. Saat mengklik tombol, Anda dapat menyimpan data ke file CSV.

Exporting Data

Mengekspor DataBerikut adalah data yang diekspor dari tabel kecil kita:

Menyesuaikan Semua Hal

Kita meliput banyak materi, tapi React-bootstrap-table memiliki lebih banyak barang. Praktis, setiap aspek bisa disesuaikan. Baca dokumentasi lengkap tentang cara menyesuaikan tabel.

Berikut adalah daftar bagian yang dapat disesuaikan:

  • Sel
  • Toolbar
  • Modal Insert
  • Paginasi
  • Filter Kolom
  • Pengeditan Sel
  • Kolom Pemilihan Baris

Kesimpulan

React-bootstrap-table mengemas pukulan yang kuat. Ini menyediakan serangkaian antarmuka pengguna yang menyenangkan untuk menampilkan, mencari dan memanipulasi data tabular. API-nya sangat konsisten—fitur-fitur utama dapat diaktifkan dengan menentukan atribut sederhana dan secara opsional disesuaikan dengan atribut tambahan yang seringkali dapat menjadi fungsi dinamis.

Sementara perilaku default dan konfigurasi dasar akan memuaskan sebagian besar pengguna, jika Anda memerlukan fitur dan penyesuaian yang lebih canggih, ada banyak dokumentasi dan contoh bagaimana cara melakukannya.

Selama beberapa tahun terakhir, React telah semakin populer. Sebenarnya, kami memiliki sejumlah item di pasar yang tersedia untuk pembelian, review, implementasi, dan sebagainya. Jika Anda mencari sumber tambahan di seputar React, jangan ragu untuk memeriksanya.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.