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

Rank	Name	Title	Country	Rating	Games	B-Year
1	Carlsen, Magnus	gm	NOR	2861	9	1990
2	Ding, Liren	gm	CHN	2808	0	1992
3	Nepomniachtchi, Ian	gm	RUS	2792	0	1990
4	Firouzja, Alireza	gm	FRA	2778	0	2003
5	So, Wesley	gm	USA	2771	10	1993
6	Nakamura, Hikaru	gm	USA	2768	0	1987
7	Giri, Anish	gm	NED	2764	9	1994
8	Aronian, Levon	gm	USA	2759	7	1982
9	Caruana, Fabiano	gm	USA	2758	10	1992
10	Mamedyarov, Shakhriyar	gm	AZE	2757	8	1985
11	Vachier-Lagrave, Maxime	gm	FRA	2757	0	1990
12	Anand, Viswanathan	gm	IND	2756	0	1969
13	Rapport, Richard	gm	HUN	2754	0	1996
14	Karjakin, Sergey	gm	RUS	2747	0	1990
15	Radjabov, Teimour	gm	AZE	2747	0	1987
16	Dominguez Perez, Leinier	gm	USA	2745	10	1983
17	Grischuk, Alexander	gm	RUS	2745	0	1983
18	Duda, Jan-Krzysztof	gm	POL	2731	5	1998
19	Andreikin, Dmitry	gm	FID	2729	0	1990
20	Le, Quang Liem	gm	VIE	2728	0	1991
21	Topalov, Veselin	gm	BUL	2728	0	1975
22	Wei, Yi	gm	CHN	2727	0	1999
23	Gukesh D	gm	IND	2726	21	2006
24	Erigaisi Arjun	gm	IND	2725	20	2003
25	Wang, Hao	gm	CHN	2722	9	1989
26	Vitiugov, Nikita	gm	FID	2722	0	1987
27	Maghsoodloo, Parham	gm	IRI	2721	23	2000
28	Yu, Yangyi	gm	CHN	2718	10	1994
29	Harikrishna, Pentala	gm	IND	2716	10	1986
30	Abdusattorov, Nodirbek	gm	UZB	2713	22	2004
31	Shankland, Sam	gm	USA	2712	7	1991
32	Sargissian, Gabriel	gm	ARM	2711	10	1983
33	Vallejo Pons, Francisco	gm	ESP	2711	8	1982
34	Deac, Bogdan-Daniel	gm	ROU	2710	16	2001
35	Vidit, Santosh Gujrathi	gm	IND	2710	10	1994
36	Bu, Xiangzhi	gm	CHN	2709	0	1985
37	Alekseenko, Kirill	gm	FID	2707	0	1997
38	Artemiev, Vladislav	gm	RUS	2706	0	1998
39	Sjugirov, Sanan	gm	RUS	2703	0	1993
40	Dubov, Daniil	gm	RUS	2702	0	1996
41	Tomashevsky, Evgeny	gm	RUS	2700	9	1987
42	Wojtaszek, Radoslaw	gm	POL	2696	10	1987
43	Eljanov, Pavel	gm	UKR	2695	0	1983
44	Keymer, Vincent	gm	GER	2693	17	2004
45	Van Foreest, Jorden	gm	NED	2691	20	1999
46	Robson, Ray	gm	USA	2690	9	1994
47	Xiong, Jeffery	gm	USA	2690	0	2000
48	Adams, Michael	gm	ENG	2689	10	1971
49	Niemann, Hans Moke	gm	USA	2688	5	2003
50	Nyzhnyk, Illya	gm	UKR	2687	0	1996
51	Moussard, Jules	gm	FRA	2686	19	1995
52	Cheparinov, Ivan	gm	BUL	2686	10	1986
53	Fedoseev, Vladimir	gm	FID	2685	0	1995
54	Sevian, Samuel	gm	USA	2684	0	2000
55	Oparin, Grigoriy	gm	USA	2683	0	1997
56	Svidler, Peter	gm	RUS	2683	0	1976
57	Jakovenko, Dmitry	gm	RUS	2682	0	1983
58	Navara, David	gm	CZE	2681	10	1985
59	Santos Latasa, Jaime	gm	ESP	2680	19	1996
60	Predke, Alexandr	gm	FID	2680	9	1994
61	Li, Chao b	gm	CHN	2679	0	1989
62	Esipenko, Andrey	gm	FID	2678	10	2002
63	Nihal Sarin	gm	IND	2677	19	2004
64	Salem, A.R. Saleh	gm	UAE	2677	9	1993
65	Almasi, Zoltan	gm	HUN	2677	0	1976
66	Praggnanandhaa R	gm	IND	2676	9	2005
67	Najer, Evgeniy	gm	RUS	2676	0	1977
68	Kovalenko, Igor	gm	UKR	2674	0	1988
69	Shirov, Alexei	gm	ESP	2673	19	1972
70	Korobov, Anton	gm	UKR	2671	8	1985
71	Matlakov, Maxim	gm	RUS	2671	0	1991
72	Kasimdzhanov, Rustam	gm	UZB	2670	0	1979
73	Kryvoruchko, Yuriy	gm	UKR	2669	0	1986
74	Saric, Ivan	gm	CRO	2668	11	1990
75	Gelfand, Boris	gm	ISR	2668	0	1968
76	Ni, Hua	gm	CHN	2668	0	1983
77	Howell, David W L	gm	ENG	2667	8	1990
78	Kamsky, Gata	gm	USA	2666	0	1974
79	Ma, Qun	gm	CHN	2666	0	1991
80	Martirosyan, Haik M.	gm	ARM	2666	0	2000
81	Naiditsch, Arkadij	gm	AZE	2666	0	1985
82	Amin, Bassem	gm	EGY	2663	19	1988
83	Anton Guijarro, David	gm	ESP	2662	18	1995
84	Sarana, Alexey	gm	FID	2662	0	2000
85	Guseinov, Gadir	gm	AZE	2661	9	1986
86	Inarkiev, Ernesto	gm	RUS	2661	0	1985
87	Sargsyan, Shant	gm	ARM	2661	0	2002
88	Narayanan.S.L	gm	IND	2657	8	1998
89	Yakubboev, Nodirbek	gm	UZB	2656	20	2002
90	Tari, Aryan	gm	NOR	2656	10	1999
91	Swiercz, Dariusz	gm	USA	2652	0	1994
92	Sondarov, Javokhir	gm	UZB	2651	19	2005
93	Tabatabaei, M. Amin	gm	IRI	2651	19	2001
94	Berkes, Ferenc	gm	HUN	2651	10	1985
95	Grandelius, Nils	gm	SWE	2651	8	1993
96	Malakhov, Vladimir	gm	FID	2651	0	1980
97	McShane, Luke J	gm	ENG	2650	10	1984
98	Hou, Yifan	gm	CHN	2650	0	1994
99	Areshchenko, Alexander	gm	UKR	2649	9	1986
100	Mareco, Sandro	gm	ARG	2649	9	1987

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.

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

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

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.

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.

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.

/*
* 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.