Bekerja dengan Tabel di React, Bagian Pertama

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.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                  initial-scale=1, 
                  shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!-- Latest compiled and minified bootstrap CSS -->
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/latest
                /css/bootstrap.min.css">

    <!-- bootstrap theme (Optional) -->
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/latest
               /css/bootstrap-theme.min.css">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</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.

import React, { Component } from 'react';
import {BootstrapTable, 
       TableHeaderColumn} from 'react-bootstrap-table';
import '../css/Table.css';
import '../../node_modules/react-bootstrap-table/css/
        react-bootstrap-table.css'


class Table1 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data}>
          <TableHeaderColumn isKey dataField='id'>
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'>
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'>
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

export default Table1;

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

    import React, { Component } from 'react';
import './App.css';
import Table1 from './components/Table1'

var data = [
  {id: 1, name: 'Gob', value: '2'},
  {id: 2, name: 'Buster', value: '5'},
  {id: 3, name: 'George Michael', value: '4'}
];


class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Basic Table</p>
        <Table1 data={data}/>
      </div>
    );
  }
}

export default App;

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.

Compiled successfully!

You can now view react-table in the browser.

  Local:            https://localhost:3000/
  On Your Network:  http://192.168.1.136:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

Inilah hasilnya:

Basic 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:

import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn} from 
       'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


class Table2 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data}>
          <TableHeaderColumn isKey
                             dataField='id'
                             dataAlign='center'
                             headerAlign="left"
                             width="30"
                             tdStyle={
                                 {backgroundColor: 'green'}}>
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
                             dataAlign='center'
                             headerAlign="center"
                             width="20%"
                             thStyle={
                                 {fontWeight: 'lighter', 
                                 color: 'red'}}>
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
                             dataAlign='center'
                             headerAlign="right">
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table2

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":

import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn} 
        from 'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


function rowClassNameFormat(row, rowIdx) {
  // row is whole row object
  // rowIdx is index of row
  console.log(row)
  return row['name'] === 'George Michael' ? 
    'GeorgeMichael-Row' : 'Other-Row';
}


class Table3 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data} 
                        trClassName={rowClassNameFormat}
        >
          <TableHeaderColumn isKey dataField='id'
          >
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
          >
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
          >
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table3

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

.Table-header {
    background-color: #ccc;
    color: blue;
    padding: 10px;
    text-align: left;
}


.GeorgeMichael-Row {
    background-color: plum;
}

.Other-Row {
    background-color: greenyellow;
}

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:

import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn} 
        from 'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


function onSelectRow(row, isSelected, e) {
  if (isSelected) {
    alert(`You just selected '${row['name']}'`)
  }
}

const selectRowProp = {
  mode: 'checkbox',
  clickToSelect: true,
  unselectable: [2],
  selected: [1],
  onSelect: onSelectRow,
  bgColor: 'gold'
};

class Table4 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data} 
                        selectRow={selectRowProp}
        >
          <TableHeaderColumn isKey dataField='id'
          >
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
          >
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
          >
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table4

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.