Membuat Table Responsive Dengan Bootstrap

Pada artikel ini kita akan membuat table responsive menggunakan Bootstrap. Sebelum kita mulai membuat sebuah table, terlebih dahulu kita harus siapkan beberapa komponen pendukung dan komponen ini bisa kita gunakan secara online atau offline, untuk offline kita harus mendownloadnya di getbootstrap.com/getting-started/.
Pada kesempatan ini penulis akan menggunakan komponen secara online. Berikut link komponen yang harus kita siapkan :


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Letakan ketiga komponen diatas di bagian header html dan selanjutkan kita akan membuat sebuah table yang responsive.

1. Pertama kita buat struktur HTML nya seperti gambar dibawah ini, dimana kita bisa menambahkan class .table didalam elemen <table> untuk mendapatkan tampilan table yang sederhana didalam bootstrap. Contohnya seperti gambar dibawah ini :

<table class="table">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Kelas</th>               
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Asep</td>
                <td>3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jaka</td>
                <td>3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Iman</td>
                <td>4</td>
            </tr>                      
        </tbody>
    </table>

 hasilnya seperti berikut :

2. Jika kita ingin membuat garis-garis zebra didalam isi table kita bisa menambahkan class

.table-striped didalam element <table> seperti contoh berikut ini :

<table class="table table-striped">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Kelas</th>               
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Asep</td>
                <td>3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jaka</td>
                <td>3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Iman</td>
                <td>4</td>
            </tr>                      
        </tbody>
    </table>

 Hasilnya seperti berikut :

 3. Selanjutnya kita akan menambahkan efek hover di table yang sudah kita buat tadi, dengan menambahkan class .table-hover didalam element <table> seperti contoh berikut :

<table class="table table-hover">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Kelas</th>               
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Asep</td>
                <td>3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jaka</td>
                <td>3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Iman</td>
                <td>4</td>
            </tr>                      
        </tbody>
    </table>

Dan hasilnya seperti berikut :

4. Selanjutnya kita akan membuat table yang responsive sehingga ketika kita membuka table ini dengan device apapun hasilnya tidak akan berantakan.  Membuat table yang responsive dengan bootstrap kita hanya tinggal meletakkan element table di dalam element <div> yang di beri class “table-responsive” seperti ini <div class=’table-responsive’>. Berikut contoh membuat table yang responsive :

<div class="table-responsive">

<table class="table table-hover table-striped">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Kelas</th>               
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Asep</td>
                <td>3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jaka</td>
                <td>3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Iman</td>
                <td>4</td>
            </tr>                      
        </tbody>
    </table>

</div>

Hasilnya seperi berikut :

5. Mengubah warna latar belakang baris pada table dengan menambahkan class .active, .success, .warning, dan .danger didalam elemen <tr>. Contohnya seperti dibawah ini :

<div class="table-responsive">
<table class="table table-hover table-striped">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Kelas</th>              
            </tr>
        </thead>
        <tbody>
            <tr class="active">
                <td>1</td>
                <td>Asep</td>
                <td>3</td>
            </tr>
            <tr class="success">
                <td>2</td>
                <td>Jaka</td>
                <td>3</td>
            </tr>
            <tr class="warning">
                <td>3</td>
                <td>Iman</td>
                <td>4</td>
            </tr> 
            <tr class="danger">
                <td>4</td>
                <td>Atep</td>
                <td>5</td>
            </tr> 
        </tbody>
    </table>
</div> 

Dan hasilnya seperti berikut,

Berikut beberapa contoh pembuatan table dengan bantuan bootstrap.

Semoga bermanfaat ...