Table
Dasar
Membuat Table kamu membutuhkan tag <table> dengan class .table, diikuti dengan class untuk style Table-nya, ada class .table--gray, .table--blue, dan .table--green. Kemudian didalam tag <table>, kamu perlu membuat tag <thead> (untuk Table Head) dan tag <tbody> (untuk Table Body)
Didalam tag <thead>, buat element menggunakan tag <tr> lalu didalam tag <tr> buat element menggunakan tag <th> dan didalam tag <th> masukkan text untuk judul dari setiap kolom pada Table-nya. Selanjutnya didalam tag <tbody>, buat element menggunakan tag <tr> lalu didalam tag <tr> buat element menggunakan tag <td> dan didalam tag <td> masukkan text, icon atau link menggunakan tag <a>, untuk isi dari setiap baris dan kolom Table-nya. Setiap cell pada table memiliki style text align left, jika kamu ingin merubah text align menjadi center, kamu perlu menambahkan class .text-center pada tag <td> atau tag <th>.
Jika kamu membuat link didalam table, warna ketika link dihover adalah biru, namun jika kamu membuat link untuk delete data misalnya, kamu bisa mengubah warna ketika link dihover menjadi merah, dengan menambahkan class .text-hover-red pada tag <a>.
Kamu bisa membungkus table menggunakan Box, bisa lihat di lihat dokumentasi Box. Jika kamu merasa Table terlalu lebar, kamu bisa membungkusnya dengan grid sistem Bootstrap. Kamu juga bisa menambahkan keterangan judul dari Table-nya, membuat judul kamu perlu tag <h5> (tempat judul Table-nya) dan tag <hr> (untuk membuat garis horizontal), letakkan tag <h5> dan <hr> sebelum tag <table>.
Labar Table secara standar akan menyesuaikan dengan ukuran container-nya, saya sangat menyarankan kamu untuk membungkus table menggunakan Box, karena ketika lebar Table tidak bisa mengecil lagi atau tidak bisa lagi menyesuaikan lebar dengan container-nya, maka Table akan terlihat keluar dari container-nya, namun jika kamu membungkus Table menggunakan Box, itu tidak akan terjadi, yang akan terjadi adalah, akan ada horizontal scroll pada Box ketika kamu hover Box-nya.
Table Anggota
| No | Nama | Umur |
|---|---|---|
| 1 | Reza Sariful Fikri | 19 |
| 2 | Dian Pranata | 13 |
| 3 | Adelina Damayanti | 19 |
Table Barang
| No | Nama Barang | Jumlah |
|---|---|---|
| 1 | Mouse Logitech | 5 |
| 2 | Keyboard | 1 |
| 3 | Kipas Pendingin | 3 |
Table Anggota
| No | Nama | Hobi |
|---|---|---|
| 1 | Reza Sariful Fikri | Programming |
| 2 | Dian Pranata | Game |
| 3 | Adelina Damayanti | Membaca |
<div class="col-lg-6 mb-3">
<section class="main__box">
<h5>Table Anggota</h5>
<hr>
<table class="table table--gray">
<thead>
<tr>
<th width="10">No</th>
<th>Nama</th>
<th>Umur</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Reza Sariful Fikri</td>
<td>19</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>Dian Pranata</td>
<td>13</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Adelina Damayanti</td>
<td>19</td>
</tr>
</tbody>
</table>
</section>
</div><!-- col-lg-6 -->
<div class="col-lg-6 mb-3">
<section class="main__box">
<h5>Table Barang</h5>
<hr>
<table class="table table--blue">
<thead>
<tr>
<th width="10">No</th>
<th>Nama Barang</th>
<th>Jumlah</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Mouse Logitech</td>
<td>5</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>Keyboard</td>
<td>1</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Kipas Pendingin</td>
<td>3</td>
</tr>
</tbody>
</table>
</section>
</div><!-- col-lg-6 -->
<div class="col-12">
<section class="main__box">
<h5>Table Anggota</h5>
<hr>
<table class="table table--green">
<thead>
<tr>
<th width="10">No</th>
<th>Nama</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Reza Sariful Fikri</td>
<td>Programming</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>Dian Pranata</td>
<td>Game</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Adelina Damayanti</td>
<td>Membaca</td>
</tr>
</tbody>
</table>
</section>
</div><!-- col-12 -->Form Filter
Kamu juga bisa menambahkan Form, yang bisa kamu gunakan untuk filter data yang ada pada table. Membuat Form Filter kamu hanya perlu meletakkan Form sebelum tag <table>, lihat dokumentasi Form untuk mengetahui cara membuat Form.
<div class="col-12 mb-3">
<div class="main__box">
<h5>Table Anggota</h5>
<hr>
<!-- form filter -->
<div class="form-row">
<div class="col-md-6">
<select name="limit" class="form form--focus-blue mt-0 mb-3">
<option>Batas ...</option>
</select>
</div>
<div class="col-md-6">
<select name="umur" class="form form--focus-blue mt-0 mb-3">
<option>Umur ...</option>
</select>
</div>
</div>
<!-- form filter -->
<table class="table table--gray">
<thead>
<tr>
<th width="10">No</th>
<th>Nama</th>
<th>Umur</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Reza Sariful Fikri</td>
<td>19</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>Dian Pranata</td>
<td>13</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Adelina Damayanti</td>
<td>19</td>
</tr>
</tbody>
</table>
</div>
</div><!-- col-12 -->
<div class="col-12 mb-3">
<div class="main__box">
<h5>Table Barang</h5>
<hr>
<!-- form filter -->
<div class="input-group mb-3">
<input type="text" name="addon_3" placeholder="Cari dengan nama ..." class="form form--focus-blue">
<div class="input-group__append">
<a href="#" class="btn btn--blue"><span class="fa fa-search"></span></a>
</div>
</div>
<!-- form filter -->
<table class="table table--blue">
<thead>
<tr>
<th width="10">No</th>
<th>Nama Barang</th>
<th>Jumlah</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Mouse Logitech</td>
<td>5</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>Keyboard</td>
<td>1</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Kipas Pendingin</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div><!-- col-12 -->Pagination
Membuat Pagination kamu membutuhkan tag <ul> dengan class .pagination, diikuti dengan class untuk style Pagination-nya, ada class .pagination--blue dan .pagination--green. Didalam tag <ul> buat element menggunakan tag <li> dengan class .pagination__item, didalam tag <li> buat element menggunakan tag <a> dan didalamnya letakkan text seperti 'Sebelumnya', 'Berikutnya' atau angka.
Jika kamu ingin membuat disabled salah satu link dari Pagination-nya, kamu perlu menambahkan class .pagination__item--disabled setelah class .pagination__item. Jika kamu ingin menambahkan efek yang menandakan bahwa link Pagination sedang aktif, tambahkan class .pagination__item--active setelah class .pagination__item. Letakkan Pagination setelah Table.
Table Barang
| No | Nama Barang | Jumlah |
|---|---|---|
| 1 | Mouse Logitech | 5 |
| 2 | Keyboard | 1 |
| 3 | Kipas Pendingin | 3 |
Table Anggota
| No | Nama | Hobi |
|---|---|---|
| 1 | Reza Sariful Fikri | Programming |
| 2 | Dian Pranata | Game |
| 3 | Adelina Damayanti | Membaca |
<div class="col-12 mb-3">
<div class="main__box">
<h5>Table Barang</h5>
<hr>
<table class="table table--blue mb-3">
<thead>
<tr>
<th width="10">No</th>
<th>Nama Barang</th>
<th>Jumlah</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Mouse Logitech</td>
<td>5</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>Keyboard</td>
<td>1</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Kipas Pendingin</td>
<td>3</td>
</tr>
</tbody>
</table>
<!-- pagination -->
<ul class="pagination pagination--blue">
<li class="pagination__item pagination__item--disabled">
<a href="#">Sebelumnya</a>
</li>
<li class="pagination__item"><a href="#">1</a></li>
<li class="pagination__item pagination__item--active">
<a href="#">2</a>
</li>
<li class="pagination__item"><a href="#">3</a></li>
<li class="pagination__item">
<a href="#">Berikutnya</a>
</li>
</ul>
<!-- pagination -->
</div>
</div><!-- col-12 -->
<div class="col-12">
<div class="main__box">
<h5>Table Anggota</h5>
<hr>
<table class="table table--green mb-3">
<thead>
<tr>
<th width="10">No</th>
<th>Nama</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Reza Sariful Fikri</td>
<td>Programming</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>Dian Pranata</td>
<td>Game</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Adelina Damayanti</td>
<td>Membaca</td>
</tr>
</tbody>
</table>
<!-- pagination -->
<ul class="pagination pagination--green">
<li class="pagination__item pagination__item--disabled">
<a href="#">Sebelumnya</a>
</li>
<li class="pagination__item"><a href="#">1</a></li>
<li class="pagination__item pagination__item--active">
<a href="#">2</a>
</li>
<li class="pagination__item"><a href="#">3</a></li>
<li class="pagination__item">
<a href="#">Berikutnya</a>
</li>
</ul>
<!-- pagination -->
</div>
</div><!-- col-12 -->Loading
Membuat Loading pada Table kamu harus membungkus Table beserta Form Filter dan Pagination menggunakan tag <div> dengan class .table-box (agar ketika loading ditampilkan, loading tidak ikut menutupi judul table-nya), lalu untuk membuat Loading sama seperti pada dokumentasi Loading, masukkan Loading didalam tag <div> dengan class .table-box, dan letakkan Loading sebelum Form Filter (jika menggunakan Form Filter) atau sebelum Table. Kamu bisa menyembunyikan Loading dengan menambahkan class utilities Bootstrap untuk display none .d-none setelah class untuk style Loading.
Jika kamu ingat pada bagian dasar Table, Table yang dibungkus dengan Box, lalu ketika lebar Table sudah tidak bisa mengecil lagi mengikuti ukuran container-nya, maka akan ada horizontal scroll pada Box saat kamu hover Box-nya, namun itu tidak kita perlukan ketika menampilkan Loading pada table, untuk menghilangkan horizontal scroll pada Box, tambahkan class .main__box--hover-not-overflow-x-auto setelah class .main__box. Gunakan Javascript & DOM untuk menghapus atau menambahkan class.
Table Barang
| No | Nama Barang | Jumlah |
|---|---|---|
| 1 | Mouse Logitech | 5 |
| 2 | Keyboard | 1 |
| 3 | Kipas Pendingin | 3 |
<div class="col-12">
<div class="main__box main__box--hover-not-overflow-x-auto">
<h5>Table Barang</h5>
<hr>
<div class="table-box">
<!-- loading -->
<div class="loading-circle loading-circle--lg loading-circle--blue">
<div class="loading-circle__fill"></div>
</div>
<!-- loading -->
<select name="limit" class="form form--focus-blue mt-0 mb-3">
<option>Batas ...</option>
</select>
<table class="table table--blue mb-3">
<thead>
<tr>
<th width="10">No</th>
<th>Nama Barang</th>
<th>Jumlah</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Mouse Logitech</td>
<td>5</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>Keyboard</td>
<td>1</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Kipas Pendingin</td>
<td>3</td>
</tr>
</tbody>
</table>
<ul class="pagination pagination--blue">
<li class="pagination__item pagination__item--disabled">
<a href="#">Sebelumnya</a>
</li>
<li class="pagination__item"><a href="#">1</a></li>
<li class="pagination__item pagination__item--active">
<a href="#">2</a>
</li>
<li class="pagination__item"><a href="#">3</a></li>
<li class="pagination__item">
<a href="#">Berikutnya</a>
</li>
</ul>
</div>
</div>
</div><!-- col-12 -->