In this tutorial, you will learn how to create a table with search and pagination capabilities in WordPress like the one below.👇

RankNameTitleCountryRatingGamesB-Year
1Carlsen, MagnusgmNOR286191990
2Ding, LirengmCHN280801992
3Nepomniachtchi, IangmRUS279201990
4Firouzja, AlirezagmFRA277802003
5So, WesleygmUSA2771101993
6Nakamura, HikarugmUSA276801987
7Giri, AnishgmNED276491994
8Aronian, LevongmUSA275971982
9Caruana, FabianogmUSA2758101992
10Mamedyarov, ShakhriyargmAZE275781985
11Vachier-Lagrave, MaximegmFRA275701990
12Anand, ViswanathangmIND275601969
13Rapport, RichardgmHUN275401996
14Karjakin, SergeygmRUS274701990
15Radjabov, TeimourgmAZE274701987
16Dominguez Perez, LeiniergmUSA2745101983
17Grischuk, AlexandergmRUS274501983
18Duda, Jan-KrzysztofgmPOL273151998
19Andreikin, DmitrygmFID272901990
20Le, Quang LiemgmVIE272801991
21Topalov, VeselingmBUL272801975
22Wei, YigmCHN272701999
23Gukesh DgmIND2726212006
24Erigaisi ArjungmIND2725202003
25Wang, HaogmCHN272291989
26Vitiugov, NikitagmFID272201987
27Maghsoodloo, ParhamgmIRI2721232000
28Yu, YangyigmCHN2718101994
29Harikrishna, PentalagmIND2716101986
30Abdusattorov, NodirbekgmUZB2713222004
31Shankland, SamgmUSA271271991
32Sargissian, GabrielgmARM2711101983
33Vallejo Pons, FranciscogmESP271181982
34Deac, Bogdan-DanielgmROU2710162001
35Vidit, Santosh GujrathigmIND2710101994
36Bu, XiangzhigmCHN270901985
37Alekseenko, KirillgmFID270701997
38Artemiev, VladislavgmRUS270601998
39Sjugirov, SanangmRUS270301993
40Dubov, DaniilgmRUS270201996
41Tomashevsky, EvgenygmRUS270091987
42Wojtaszek, RadoslawgmPOL2696101987
43Eljanov, PavelgmUKR269501983
44Keymer, VincentgmGER2693172004
45Van Foreest, JordengmNED2691201999
46Robson, RaygmUSA269091994
47Xiong, JefferygmUSA269002000
48Adams, MichaelgmENG2689101971
49Niemann, Hans MokegmUSA268852003
50Nyzhnyk, IllyagmUKR268701996
51Moussard, JulesgmFRA2686191995
52Cheparinov, IvangmBUL2686101986
53Fedoseev, VladimirgmFID268501995
54Sevian, SamuelgmUSA268402000
55Oparin, GrigoriygmUSA268301997
56Svidler, PetergmRUS268301976
57Jakovenko, DmitrygmRUS268201983
58Navara, DavidgmCZE2681101985
59Santos Latasa, JaimegmESP2680191996
60Predke, AlexandrgmFID268091994
61Li, Chao bgmCHN267901989
62Esipenko, AndreygmFID2678102002
63Nihal SaringmIND2677192004
64Salem, A.R. SalehgmUAE267791993
65Almasi, ZoltangmHUN267701976
66Praggnanandhaa RgmIND267692005
67Najer, EvgeniygmRUS267601977
68Kovalenko, IgorgmUKR267401988
69Shirov, AlexeigmESP2673191972
70Korobov, AntongmUKR267181985
71Matlakov, MaximgmRUS267101991
72Kasimdzhanov, RustamgmUZB267001979
73Kryvoruchko, YuriygmUKR266901986
74Saric, IvangmCRO2668111990
75Gelfand, BorisgmISR266801968
76Ni, HuagmCHN266801983
77Howell, David W LgmENG266781990
78Kamsky, GatagmUSA266601974
79Ma, QungmCHN266601991
80Martirosyan, Haik M.gmARM266602000
81Naiditsch, ArkadijgmAZE266601985
82Amin, BassemgmEGY2663191988
83Anton Guijarro, DavidgmESP2662181995
84Sarana, AlexeygmFID266202000
85Guseinov, GadirgmAZE266191986
86Inarkiev, ErnestogmRUS266101985
87Sargsyan, ShantgmARM266102002
88Narayanan.S.LgmIND265781998
89Yakubboev, NodirbekgmUZB2656202002
90Tari, AryangmNOR2656101999
91Swiercz, DariuszgmUSA265201994
92Sondarov, JavokhirgmUZB2651192005
93Tabatabaei, M. AmingmIRI2651192001
94Berkes, FerencgmHUN2651101985
95Grandelius, NilsgmSWE265181993
96Malakhov, VladimirgmFID265101980
97McShane, Luke JgmENG2650101984
98Hou, YifangmCHN265001994
99Areshchenko, AlexandergmUKR264991986
100Mareco, SandrogmARG264991987
Advanced table in WordPress

Table in WordPress with filter and pagination [without plugins]

Step 1.Add your data table to WordPress

If the number of data in your table is small, you can use Gutenberg Table block. If the number of data in your table is large, do the following.

Step 1.1.Select all data in Excel or Google Sheets

Go to Excel and select and copy the data columns you want.

Transfer table from Excel to WordPress
Transfer table from Excel to WordPress

Step 1.2.Use a Custom HTML block to paste the table

Add a Custom HTML block and then click on the Preview.

using Custom HTML Block in WordPress

Make sure that Custom HTML block is selected, paste the table from Excel into WordPress by pressing the control + V. By doing this, the Custom HTML block will be converted into a Table block and you will see your table data in WordPress.

Converting Custom HTML Block to Table Block in WordPress
Converting Custom HTML Block to Table Block in WordPress

Step 2.Assign a class to the Table block

Go to the Advanced section and assign a class to your table in the Additional CSS class(es) section. Here I have assigned "table1" class to my table.

Assign a class to your table

Step 3.Add The Following Code to the functions.php File

In the WordPress dashboard, go to Appearance ➡ Theme File Editor and copy the following code into the theme's functions.php file and save it.

You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update.
Create child theme in WordPress step by step [without plugin]

As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.

/*
* advanced table by redpishi.com 
* [redtable class='table1' pagination='5' filter='on']
*/
add_shortcode( 'redtable', 'redtable_func' );
function redtable_func( $atts ) {
    $atts = shortcode_atts( array(
        'pagination' => 'off', 
		'class' => 'table',	
        'filter' => 'on',		
    ), $atts, 'redtable' );
static $redtable_first_call = 1;
$class = $atts["class"];
$pagination = $atts["pagination"];
$filter = $atts["filter"];
$const_style = '
<style>
table.redpishi-com-table { color: #333; font-size: 1em; line-height: 1.5em; border-collapse: separate; border-spacing: 0; width: 90%; max-width: 1000px; margin: 30px auto 30px auto;box-shadow: 0 4px 8px 0 rgba(0,0,0,.16);border-radius: 2px; } 
table.redpishi-com-table td {height: 3rem; padding:  15px 15px; border: none;}
table.redpishi-com-table tr:nth-child(even){background-color: #f2f2f2;}
table.redpishi-com-table tr:hover:not(th) {background-color: rgba(237,28,64,.1);}
table.redpishi-com-table th,table.redpishi-com-table tr.table-head td, table.redpishi-com-table th:hover, table.redpishi-com-table tr.table-head td:hover {
background: #ed1c40; color: #fff; height: 3rem; padding:  15px 15px;text-align: left; } 
a.btn_prev, a.btn_next { transition: all .3s; background-color: #ed1c40; text-decoration: none; border-radius: 50%; font-size: 16px; margin-right: 10px; color: #ffffff; cursor: pointer; user-select: none; height: 32px; width: 32px; display: flex; align-content: center; justify-content: center; align-items: center;}
a.btn_prev:hover, a.btn_next:hover {box-shadow: 0px 2px 5px #ed1c40cc;}
div.redpishi-com-table-pag { width: 90%; max-width: 1000px; margin: 50px auto }
div.redpishi-com-table-pag {display: flex; flex-direction: row; align-items: center; justify-content: flex-end; margin-top: -8px;}
div#search-div {width: 90%; max-width: 1000px; margin: 25px auto -13px auto;}
input#tableSearch { width: 100%; height: 45px; padding: 10px; border: 1px solid #ccc; padding: 10px;}
input#tableSearch::placeholder {  color: #464646;}
@media only screen and (max-width: 700px) {
    table.redpishi-com-table td {display: block; height: unset!important; }
    tr.table-head td { height: unset!important;  }
    tr.table-head { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; background-color: #ed1c40;}
    tr.table-head td:hover{
        background-color: #ed1c40!important;
    }    tr.table-head:hover{
        background-color: #ed1c40!important;
    }
}
</style>    
';
$const_js = <<< JS
<script>
class redPishiTable {
    constructor(id, pagnum, search) {
        this.search = search;
        this.tableResult = "";
        if ( document.querySelector("figure."+id) != null ) {
            this.table = document.querySelector("figure."+id+" table");
        } else { this.table = document.querySelector("."+id);}      
        this.table.classList.add('redpishi-com-table');
        this.table.setAttribute("cellspacing", "0");
        this.pagEl = '<div class="'+id+' redpishi-com-table-pag"><a   class="btn_prev">&lt;</a><a   class="btn_next">&gt;</a>page: <span id="page"></span></div>';
        this.table.insertAdjacentHTML("afterend", this.pagEl)
        this.tableSearch = document.createElement("input");
        this.tableSearch.type = "search";
        this.tableSearch.id = "tableSearch";
        this.tableSearch.placeholder = "Item to filter ...";
        this.searchDiv = document.createElement("div");
        this.searchDiv.id = "search-div";
        this.searchDiv.appendChild(this.tableSearch);
        this.table.before(this.searchDiv);
        if (this.search == "off") {
            this.searchDiv.style.display = "none";
        }
        this.tableHead = this.table.rows[0];
        this.tableHead.classList.add("table-head");
        this.tableBody = [...this.table.rows].slice(1,);
        this.defultTable = this.tableHead.outerHTML + this.tableBody.map(e => e.outerHTML).join("");
        this.tableSearch.addEventListener("keyup", this.searchTable.bind(this) );
        this.tableSearch.addEventListener("click", this.searchTable.bind(this) );
        this.btn_next = document.querySelector("."+id+" .btn_next");
        this.btn_prev = document.querySelector("."+id+" .btn_prev");
        this.btn_next.addEventListener("click", e => { if (this.current_page < this.numPages()) {
            this.current_page++;
            this.changePage(this.current_page);
        } });
        this.btn_prev.addEventListener("click", e => { if (this.current_page > 1) {
        this.current_page--;
        this.changePage(this.current_page);
        } });
        if (pagnum == "off") {
            this.records_per_page = 10000;
            document.querySelector("div." + id + ".redpishi-com-table-pag").style.display = "none";
            
        } else { this.records_per_page = pagnum; }      
        this.l = this.table.rows.length
        this.current_page = 1 
        this.id = id;
    }
    searchTable (e) {     
    if ( e.target.value.length > -1  ) {
        this.tableResult = this.tableHead.outerHTML;   
        this.table.innerHTML = ''
        this.tableBody.forEach( tr => {            
            if ( tr.innerText.toLowerCase().indexOf(e.target.value.toLowerCase()) >-1 ){               
                this.tableResult += tr.outerHTML  }
        })
        this.table.innerHTML = this.tableResult  	
        this.changePage(1)
		this.current_page = 1	
    } else { 
        this.table.innerHTML = this.defultTable 
        this.changePage(1)
        this.current_page = 1
         }} 
numPages(){
    if ( document.querySelector("figure."+this.id) != null ) {
        this.l = document.querySelector("figure."+this.id+" table").rows.length;
        } else {  this.l = document.querySelector("." + this.id).rows.length  }
    return Math.ceil((this.l - 1) / this.records_per_page); }

changePage(page){
    if ( document.querySelector("figure."+this.id) != null ) {
        this.listing_table = document.querySelector("figure."+this.id+" table");
        } else {  this.listing_table = document.querySelector("."+this.id);  }  
    this.page_span = document.querySelector("."+this.id+".redpishi-com-table-pag span#page");
    if (page < 1) page = 1;
    if (page > this.numPages()) page = this.numPages();
    [...this.listing_table.getElementsByTagName('tr')].forEach((tr)=>{
        tr.style.display='none'; 
    });
    this.listing_table.rows[0].style.display = ""; 
    for (var i = (page-1) * this.records_per_page + 1; i < (page * this.records_per_page) + 1; i++) {
        if (this.listing_table.rows[i]) {
            this.listing_table.rows[i].style.display = ""
        } else {continue;}
    }    
    this.page_span.innerHTML = page + "/" + this.numPages();
    if (page == 1) {
        this.btn_prev.style.visibility = "hidden";
    } else {
        this.btn_prev.style.visibility = "visible";
    }
    if (page == this.numPages()) {
        this.btn_next.style.visibility = "hidden";
    } else {
        this.btn_next.style.visibility = "visible"; }    
}
}
</script>
JS;
$red_table = '
<script>
document.addEventListener("DOMContentLoaded", (event) => {
  new redPishiTable("'.$class.'", "'.$pagination.'", "'.$filter.'").changePage(1);

})
</script> ';
if ( $redtable_first_call == 1 ){	
	 $redtable_first_call++;
	 return "{$const_style}{$const_js}{$red_table}"; } elseif  ( $redtable_first_call > 1 ) {	$redtable_first_call++;
		return "{$red_table}"; }}

After updating the “functions.php” file, the [redtable] shortcode will be registered.

Step 4.Add redtable Shortcode

Below the table add a shortcode block like the following:

[redtable class='table1' pagination='5' filter='on']

This shortcode has three arguments:

class: Write the class you assigned to your table here.
pagination: Number of records displayed per page, If you don't need pagination, set it to OFF.
filter: If you don't need the search bar, set it to OFF.

// simple table without pagination and search bar.
[redtable class='table1' pagination='off' filter='off']

That’s it, If you have a question, be sure to comment for us to answer.

If this article is difficult for you to read in text, you can watch the video version below.

Share this post
Maya
Maya

Hi, my name is Maya and I’m a WordPress plugin developer. I created this website to share some of the helpful codes that I’ve used in my own projects.
If you’re looking for a custom plugin for your website, you can contact me by clicking on Hire a developer in the menu. I’d love to hear from you.

Articles: 53

Leave a Reply

Your email address will not be published. Required fields are marked *