Kami butuh menambahkan fitur “Filter” berdasarkan kategori di tabel yang di-generate oleh plugin TablePress WordPress untuk klien kami, sayangnya di versi gratis tidak disediakan fitur tersebut.
TablePress WordPress sendiri adalah plugin untuk generate table yang sudah di download lebih dari 600.000 kali, dan fiturnya juga sudah cukup lengkap, sayangnya kami hanya butuh 1 atau 2x menggunakan plugin ini, dan sayang rasanya kalau harus keluar uang untuk berlanggan pro versionnya.
Jadi kami mencoba menambahkan sedikit fungsi dari TablePress dengan menambah sedikit jQuery yang disematkan di body, untuk menyisipkan code nya, anda dapat sisipkan di Elementor Custom Code, Themes, atau plugin untuk inject code ke wordpress anda yang tidak dibahas di post ini.
Sebagai konteks, berikut adalah gambar table yang akan ditambahkan fitur
Kami ingin menambahkan fitur filter untuk “Metode Pembayaran” dan “Kategori”, sehingga user dapat langsung memilih kategori yang dibutuhkan, kami akan design agar berbentuk dropdown.
Berikut adalah jQuery yang ditambahkan
<script>
jQuery(function ($) {
function init() {
if (!$('#tablepress-1').length) {
return setTimeout(init, 300);
}
const table = $('#tablepress-1').DataTable();
if ($('#tp-filters').length) return;
// HANYA area kiri paling atas
const target = $('#tablepress-1_wrapper .dt-layout-row:first .dt-layout-start');
target.append(`
<div id="tp-filters" style="margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;">
<select id="filter-metode" class="dt-input">
<option value="">Semua Metode</option>
</select>
<select id="filter-kategori" class="dt-input">
<option value="">Semua Kategori</option>
</select>
</div>
`);
// isi dropdown
table.column(0).data().unique().sort().each(function (v) {
$('#filter-metode').append(`<option value="${v}">${v}</option>`);
});
table.column(1).data().unique().sort().each(function (v) {
$('#filter-kategori').append(`<option value="${v}">${v}</option>`);
});
function filter() {
table.column(0).search(
$('#filter-metode').val() ? '^' + $('#filter-metode').val() + '$' : '',
true,
false
);
table.column(1).search(
$('#filter-kategori').val() ? '^' + $('#filter-kategori').val() + '$' : '',
true,
false
);
table.draw();
}
$('#filter-metode,#filter-kategori').on('change', filter);
}
init();
});
</script>Kami juga menambahkan sedikit CSS agar lebih menarik dan sesuai dengan design klien kami, anda dapat masukan di Custom CSS Elementor atau plugin lainnya, berikut adalah CSS nya
/* ==========================
TABLEPRESS MODERN STYLE
========================== */
/* Wrapper */
#tablepress-1_wrapper {
font-family: 'Nunito', sans-serif;
}
/* Table container */
#tablepress-1 {
border-collapse: separate !important;
border-spacing: 0;
overflow: hidden;
border-radius: 14px;
border: 1px solid #e5e7eb;
}
/* Header */
#tablepress-1 thead th {
background: #e8f5fb !important;
color: #111827;
font-weight: 800;
font-size: 15px;
padding: 16px 18px !important;
border-bottom: 1px solid #dbe4ea;
}
/* Body */
#tablepress-1 tbody td {
padding: 15px 18px !important;
font-size: 15px;
font-weight: 500;
color: #374151;
background: #ffffff;
border-bottom: 1px solid #eef2f7;
}
/* Hilangkan garis terakhir */
#tablepress-1 tbody tr:last-child td {
border-bottom:none;
}
/* Hover */
#tablepress-1 tbody tr:hover td {
background:#f8fafc;
}
/* Zebra */
#tablepress-1 tbody tr:nth-child(even) td {
background:#fcfdff;
}
/* Kolom angka */
#tablepress-1 td.column-3,
#tablepress-1 td.column-4,
#tablepress-1 td.column-5 {
font-weight:600;
}
/* Sorting icon */
#tablepress-1 thead th .dt-column-order {
opacity:.45;
}
/* Rounded wrapper */
#tablepress-1_wrapper .dt-layout-table {
border-radius:14px;
overflow:hidden;
}
/* =====================
FILTER DROPDOWN
===================== */
#tp-filters select {
height:44px !important;
border-radius:12px !important;
border:1px solid #d9e2ec !important;
padding:0 16px !important;
font-family:'Nunito',sans-serif;
font-size:15px;
font-weight:600;
color:#374151;
background:white;
transition:.2s;
}
#tp-filters select:hover,
#tp-filters select:focus {
border-color:#0ea5e9 !important;
outline:none;
}
/* Search box */
.dt-search input {
height:44px !important;
border-radius:12px !important;
border:1px solid #d9e2ec !important;
padding:0 16px !important;
font-family:'Nunito',sans-serif;
}
.dt-search input:focus {
border-color:#0ea5e9 !important;
outline:none;
}
/* Length dropdown */
.dt-length select {
height:40px;
border-radius:10px;
border:1px solid #d9e2ec;
padding:0 10px;
}
/* Pagination */
.dt-paging-button {
border-radius:8px !important;
}
.dt-paging-button.current {
background:#009FE3 !important;
color:white !important;
border:none !important;
}
@media(max-width:768px){
/* Filter area */
#tp-filters{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:12px;
width:100%;
}
#tp-filters select{
width:100%;
min-width:0 !important;
height:48px !important;
}
/* Search pindah bawah full */
#tablepress-1_wrapper .dt-layout-row:first-child{
display:block;
}
#tablepress-1_wrapper .dt-layout-end{
width:100%;
margin-top:16px;
}
.dt-search{
width:100%;
display:flex !important;
align-items:center;
}
.dt-search input{
flex:1;
width:100% !important;
height:48px !important;
}
/* Table lebih mobile friendly */
#tablepress-1 thead th,
#tablepress-1 tbody td{
padding:14px !important;
}
}Setelah semua code telah ditambahkan, berikut adalah hasil fitur filter berdasarkan kategori di TablePress
Selamat mencoba, cheers 😀