Pada kesempatan kali ini kita akan belajar bagaimana cara membuat Membuat Responsive Tabel Menggunakan JQuery. Tentu tampilan website secara responsive sangat penting, karena akan menambahkan kesan baik bagi para penikmatnya. Dalam kasus ini kita membahas tentang tabel secara responsive.

Dalam artikel ini kita akan membuat isi data dalam tabel disembunyikan lalu ada icon arrow untuk menampilkan kembali datanya. Baiklah bagaimana cara membuatnya yuk mari simak langkah-langkah dibawah ini:

Langkah pertama

Sahabat coba buat struktur html yang berisikan code dibawah ini

" class="prettyprint lang-html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Responsive Tabel Menggunakan jQuery</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

ini code pada bagian head berisi library fontawesome untuk menampilkan icon-icon, library jQuery dan style CSS.

<div class="container">
		<table class="wrap excol" >
			<caption class="title">Responsive Tabel Menggunakan jQuery</caption>
			<thead>
				<tr>
					<th scope="col" class="column-primary">Nama</th>
					<th scope="col">Alamat</th>
					<th scope="col">No.HP</th>
					<th scope="col">Email</th>
					<th scope="col" class="column-primary">Opsi</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td data-header="Nama" class="title">Tanto<a href="#" class="more"><i class="fa fa-chevron-down"></i></a></td>
					<td data-header="Alamat" >Jakarta</td>
					<td data-header="No.HP" >08958080xxx</td>
					<td data-header="Email" >tanto@ngemil.com</td>
					<th scope="row">
						<div class="toolbox">
							<a href="#" class="edit"><i class="fa fa-pencil-square-o"></i></a>
							<a href="#" class="remove"><i class="fa fa-close"></i></a>
						</div>
					</th>
				</tr>
				<tr>
					<td data-header="Nama" class="title">Isman<a href="#" class="more"><i class="fa fa-chevron-down"></i></a></td>
					<td data-header="Alamat" >Bogor</td>
					<td data-header="No.HP" >08575151xxx</td>
					<td data-header="Email" >isman@ngemil.com</td>
					<th scope="row">
						<div class="toolbox">
							<a href="#" class="edit"><i class="fa fa-pencil-square-o"></i></a>
							<a href="#" class="remove"><i class="fa fa-close"></i></a>
						</div>
					</th>
				</tr>
				<tr>
					<td data-header="Nama" class="title">Safi<a href="#" class="more"><i class="fa fa-chevron-down"></i></a></td>
					<td data-header="Alamat" >Parung</td>
					<td data-header="No.HP" >08127070xxx</td>
					<td data-header="Email" >safi@ngemil.com</td>
					<th scope="row">
						<div class="toolbox">
							<a href="#" class="edit"><i class="fa fa-pencil-square-o"></i></a>
							<a href="#" class="remove"><i class="fa fa-close"></i></a>
						</div>
					</th>
				</tr>
				<tr>
					<td data-header="Nama" class="title">Didi<a href="#" class="more"><i class="fa fa-chevron-down"></i></a></td>
					<td data-header="Alamat" >Bandung</td>
					<td data-header="No.HP" >08112020xxx</td>
					<td data-header="Email" >dean@ngemil.com</td>
					<th scope="row">
						<div class="toolbox">
							<a href="#" class="edit"><i class="fa fa-pencil-square-o"></i></a>
							<a href="#" class="remove"><i class="fa fa-close"></i></a>
						</div>
					</th>
				</tr>
				<tr>
					<td data-header="Nama" class="title">Syahril<a href="#" class="more"><i class="fa fa-chevron-down"></i></a></td>
					<td data-header="Alamat" >Medan</td>
					<td data-header="No.HP" >08136060xxx</td>
					<td data-header="Email" >syahril@ngemil.com</td>
					<th scope="row">
						<div class="toolbox">
							<a href="#" class="edit"><i class="fa fa-pencil-square-o"></i></a>
							<a href="#" class="remove"><i class="fa fa-close"></i></a>
						</div>
					</th>
				</tr>
			</tbody>
		</table>
	</div>

pada code diatas merupakan tampilan table berisi beberapa data yang dipakai, dan selanjutnya berikan style CSS seperti code dibawah ini

h3 {   
   margin: 25px auto 20px;
    text-align: center;
    text-transform: uppercase;
    font-size: 17px;
}
/* Style utk table */
table {
    margin: auto;
    font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
    font-size: 12px;

}
.wrap {
	border-collapse: collapse;
	font-size: 13px;
}
.wrap th, 
.wrap td {
	border: 1px solid #46ae3e;
	border-top: 0;
	border-right: 0;
	padding: 7px 17px;
}
.wrap th, 
.wrap td:last-child {
	border-right: 1px solid #46ae3e;
}
caption.title {
	caption-side: top;
	margin:20px 0 10px 0;
	font-weight: 800;
}

/* Style utk table header */
.wrap thead th {
	background-color: #0ca046;
	color: #FFFFFF;
	border-color: #0ca046 !important;
	text-transform: uppercase;
}

/* Style utk table body */
.wrap tbody td {
	color: #353535;
	position: relative;
	white-space: nowrap;
}

.wrap tbody tr:nth-child(odd) {
	background-color: #bcffef;
}
.wrap tbody tr:hover th,
.wrap tbody tr:hover td {
	background-color: #ffffa2;
	border-color: #ffff0f;
	transition: all .2s;
}
.wrap tbody td:empty
{
	background-color: #ffcccc;
}

a.remove {
	color: red;
	font-size: 23px;
	float: left;
}

a.remove {
	line-height: 0.1;
}

a.edit {
	color: #35b103;
	margin-right: 5px;
	font-size: 20px;
	float: left;
}

.toolbox {
	width: 45px;
}
a.more {
	color: #717171;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding: 10px;
	display: none;
}

.table-container {
	overflow: auto;
}

@media screen and (max-width: 520px) {
	table.responsive {
		width: 100%;
	}
	.excol .more {
		display: block;
	}
	.excol thead th.column-primary {
		width: 100%;
	}
	
	.excol thead th:not(.column-primary) {
		display:none;
	}
	
	.excol th[scope="row"] {
		vertical-align: top;
	}
	
	.excol td {
		display: block;
		width: auto;
	}
	
	.excol td:nth-child(n+2)::before {
		float: left;
		text-transform: uppercase;
		font-weight: bold;
		content: attr(data-header);
		width: 80px;
	}
	
	.excol .expanded td:nth-child(n+2) {
		display: block;
	
	}
	
	.excol td:nth-child(n+2) {
		display: none;
	}
	
	a.remove, a.remove i {
		line-height: 0.7;
	}
	a.remove {
		font-size: 20px;
	}

	a.edit {
		font-size: 18px;
		line-height: 0;
	}
}

Jangan lupa untuk menambahkan code script dari jQuery yang menampilkan efek expand dan collapse,dan coba ketikkan code dibawah ini

$(document).ready(function() {
			$('a.more').click(function() {
			
				//  ini bagian toggle class
				$tr = $(this).parent().parent();
				$tr.toggleClass('expanded');
				
				// tampilkan - sembunyikan baris
				$i = $(this).children('i');
				$i.removeClass('fa-chevron-down', 'fa-chevron-up');
				var arrow = $tr.hasClass('expanded') ? 'fa-chevron-up' : 'fa-chevron-down';
				$i.addClass(arrow);
				
				return false;
			});
		})

sekarang simpan code-code diatas kemudian jalankan pada browser masing-masing ,jika benar akan seperti tampilan dibawah ini:

Membuat Responsive Tabel Menggunakan jQuery

Demikian pembahasan artikel ini tentang Membuat Responsive Tabel Menggunakan JQuery, selamat mencoba dan sampai jumpa.

terima kasih.