Advertisement
  1. Code
  2. React

Bekerja dengan Tabel di React, Bagian Pertama

by
Read Time:6 minsLanguages:
This post is part of a series called Working With Tables in React.
Working With Tables in React: Part Two

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Ikhtisar

Salah satu elemen antarmuka pengguna yang paling umum untuk menampilkan data mu adalah tabel. Ternyata ada banyak aspek yang harus dikontrol saat bekerja dengan tabel, seperti:

  • menentukan kolom dan header
  • berbagai format sel (teks, angka, checkbox)
  • merubah ukuran
  • penyaringan
  • pertumbuhan dinamis
  • styling

Dalam seri-dua bagian ini, anda akan belajar tentang seluk beluk bekerja dengan data tabel dalam React menggunakan komponen React Bootstrap Tabel

Membuat Applikasi Vanilia React

Saya berasumsi Anda sudah familiar dengan React sendiri dan akan fokus bekerja dengan React Bootstrap Table. Envato Tuts + memiliki seri besar pada React yang bisa anda baca untuk dasar dasarnya.

Singkatnya, saya menggunakan react-create-app untuk membuat aplikasi vanilia React dan kemudian menginstall react-bootstrap-table: npm install react-bootstrap-table --save.

Penting untuk menambahkan bootstrap CSS ke file public/index.html.

WebStorm

Jika anda menggunakan WebStorm JetBrains dan kamu ingin menjalankan tes, tambahkan --env=jsdom di konfigurasi mu.

Tabel Dasar

Kita akan mulai dengan tabel dasar. Berikut adalah komponen tabel dasar. Mengimpor BoostrapTable dan TableHeaderColumn dari react-bootstrap-table dan juga CSS dari direktori dist

Metode render() membuat tabel dengan tiga kolom: "ID", "Name", dan "Value". Data aktual dalam tabel berasal dari properti "data" (this.props.data). Data tersebut berisi beberapa nama karakter dari kancah acara Arrested Development.

Aku menginisiasi BasicTable dalam metode render() dalam App.js standar dan melewati beberapa data hard-coded:

Untuk melihat tabel, ketikan: npm start. Konfigurasi yang dibuat oleh create-react-app mengawasi kode mu dan akan mengkompilasi ulang setiap kali kamu mengubah apa-apa, jadi kamu perlu menjalankan hanya sekali dan kemudian setiap perubahan secara otomatis akan tercermin.

Inilah hasilnya:

Basic table output with three columns and rowsBasic table output with three columns and rowsBasic table output with three columns and rows

Perhatikan bahwa setiap kolom memiliki lebar yang sama.

Bekerja dengan kolom

Anda dapat mengontrol banyak aspek kolom. Secara khusus, lebar kolom dapat ditentukan dalam mutlak unit sebagai persentase atau kiri tidak ditentukan. Lebar kolom kolom tidak ditentukan adalah sisanya dibagi secara merata. Misalnya, untuk lebar tabel 100 px, satu kolom ditetapkan 15 px, kolom kedua ditentukan 25% (25 px), dan kolom ketiga ditentukan 30% (15 px).

Dua kolom lain tidak menentukan lebar. Px kolom 1, 2 dan 3 70 digunakan bersama-sama, yang meninggalkan 30 px untuk kolom 4 dan 5, yang akan membaginya sama. Kolom 4 dan 5 akan masing-masing memiliki lebar 15 px. Catatan bahwa jika tabel diubah ukurannya, angka-angka akan berubah. Hanya kolom 1 akan selalu 15 px lebar.

Kolom lainnya akan dihitung berdasarkan pada lebar tabel. Kamu juga dapat mengelola penyelarasan teks dan kolom serta style header dan kolom. Berikut adalah contoh tentang bagaimana untuk menentukan lebar kolom yang berbeda, text aligment, dan custom style:

Working with ColumnsWorking with ColumnsWorking with Columns

Styling Tabelmu

Anda melihat bagaimana style kolom individu dan header, tapi gaya dapat pergi lebih jauh. React-bootstrap-tabel menyediakan banyak opsi untuk kustomisasi. Pertama Anda dapat hanya menambahkan striped dan hover atribut ke komponen BootstrapTable untuk mendapatkan warna latar belakang alternatif pada setiap baris:<BootstrapTable data={this.props.data} striped hover>

Untuk styling semua baris, gunakan trClassName:<BootstrapTable data={data} trclassname='tr-style'>

Jika Anda ingin mendapatkan benar-benar mewah, trStyle dapat berfungsi. Memeriksa komponen tabel berikut bahwa style yang berbeda di baris nama adalah "George Michael":

GeorgeMichael-Row dan Other-Row CSS kelas didefinisikan dalam Table.css:

Styling the tableStyling the tableStyling the table

Memilih Baris

Setelah Anda memiliki data dalam tabel, Anda mungkin ingin memilih beberapa baris untuk melakukan beberapa operasi mereka. React-bootstrap-tabel menyediakan berbagai macam pilihan pilihan. Semua pilihan yang disusun dalam satu objek yang kamu berikan ke komponen sebagai atribut selectRow. Berikut adalah beberapa pilihan pilihan:

  • mode seleksi tunggal (radio button)
  • modus pilihan ganda (checkbox)
  • lebar seleksi kolom yang dapat dikonfigurasi
  • Pilih pada baris klik: secara default, Anda harus klik selectornya (radio button atau checkbox)
  • Sembunyikan kolom pilihan (berguna jika pilih pada klik baris benar)
  • mengubah warna background pada selection
  • awal baris yang dipilih
  • pilihan hooks (pada baris tunggal atau ketika semua baris yang dipilih).

Komponen-komponen berikut menunjukkan beberapa pilihan tersebut:

Selecting RowsSelecting RowsSelecting Rows

Kesimpulan

Dalam bagian ini, kami membuat sebuah aplikasi React sederhana yang menggunakan react-create-app, ditambahkan React-Bootstrap-Table, penduduknya tabel dengan data, bekerja dengan kolom, gaya tabel, dan dipilih baris.

Dalam bagian selanjutnya, kita akan melanjutkan perjalanan oleh memperluas baris, menambahkan baris, menghapus baris, dan meliputi pagination, sel kustomisasi pengeditan, dan maju. Nantikan.

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.