A React paginated table is useful when presenting data in an organised and readable format. It’s a way to present information in a manageable and organized manner, especially when dealing with a large amount of data that wouldn’t fit comfortably on a single page.
This tutorial shows you how to create your own paginated table fast and easy in React JS without using DataTables or any other framework for that matter.
Want to use React with DataTables? See this tutorial instead
Key features of a paginated table include:
Let’s see how to create a paginated table from an API data.
constructor(props){
super(props);
this.state = {
data: [],
postsPerPage: 10,
currentPage: 1
}
}
getPosts = async () => {
const url = "https://jsonplaceholder.typicode.com/todos/";
const obj = {
method: "GET",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
}
await fetch(`${url}`, obj)
.then((response) => response.json())
.then((responseJson) => {
console.warn(responseJson);
this.setState({ data: responseJson })
})
.catch((error) => {
console.warn(error);
})
}
showData = () => {
const { postsPerPage, currentPage, data } = this.state;
const indexOfLastPage = currentPage * postsPerPage;
const indexOfFirstPage = indexOfLastPage - postsPerPage;
const currentPosts = data.slice(indexOfFirstPage, indexOfLastPage)
try{
return currentPosts.map((item, index) => {
return(
<tbody>
<tr>
<td>{postsPerPage * (currentPage-1)+index+1}</td>
<td>{item.userId}</td>
<td>{item.title}</td>
<td>{item.completed.toString()}</td>
</tr>
</tbody>
)
})
}catch(e){
alert(e.message)
}
}
render() {
return (
<div className="container">
<table className="table align-items-center justify-content-center mb-0">
<thead>
<tr>
<th>S/N</th>
<th>UserId</th>
<th>Title</th>
<th>Completed</th>
</tr>
</thead>
{this.showData()}
</table>
</div>
)
}
showPagination = () => {
const { postsPerPage, data } = this.state;
const pageNumbers = [];
const totalPosts = data.length;
for(let i = 1; i<=Math.ceil(totalPosts/postsPerPage); i++){
pageNumbers.push(i)
}
const pagination = (pageNumbers) => {
this.setState({currentPage: pageNumbers})
}
return(
<nav>
<ul className="pagination">
{pageNumbers.map(number => (
<li key={number} className={this.state.currentPage === number ? 'page-item active' : 'page-item' }>
<button onClick={()=> pagination(number)} className="page-link"> {number} </button>
</li>
))}
</ul>
</nav>
)
}
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props){
super(props);
this.state = {
data: [],
postsPerPage: 10,
currentPage: 1
}
}
getPosts = async () => {
const url = "https://jsonplaceholder.typicode.com/todos/";
const obj = {
method: "GET",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
}
await fetch(`${url}`, obj)
.then((response) => response.json())
.then((responseJson) => {
console.warn(responseJson);
this.setState({ data: responseJson })
})
.catch((error) => {
console.warn(error);
})
}
showData = () => {
const { postsPerPage, currentPage, data } = this.state;
const indexOfLastPage = currentPage * postsPerPage;
const indexOfFirstPage = indexOfLastPage - postsPerPage;
const currentPosts = data.slice(indexOfFirstPage, indexOfLastPage)
try{
return currentPosts.map((item, index) => {
return(
<tbody>
<tr>
<td>{postsPerPage * (currentPage-1)+index+1}</td>
<td>{item.userId}</td>
<td>{item.title}</td>
<td>{item.completed.toString()}</td>
</tr>
</tbody>
)
})
}catch(e){
alert(e.message)
}
}
showPagination = () => {
const { postsPerPage, data } = this.state;
const pageNumbers = [];
const totalPosts = data.length;
for(let i = 1; i<=Math.ceil(totalPosts/postsPerPage); i++){
pageNumbers.push(i)
}
const pagination = (pageNumbers) => {
this.setState({currentPage: pageNumbers})
}
return(
<nav>
<ul className="pagination">
{pageNumbers.map(number => (
<li key={number} className={this.state.currentPage === number ? 'page-item active' : 'page-item' }>
<button onClick={()=> pagination(number)} className="page-link"> {number} </button>
</li>
))}
</ul>
</nav>
)
}
componentDidMount(){
this.getPosts()
}
render() {
return (
<div className="container">
<table className="table align-items-center justify-content-center mb-0">
<thead>
<tr>
<th>S/N</th>
<th>UserId</th>
<th>Title</th>
<th>Completed</th>
</tr>
</thead>
{this.showData()}
</table>
<div style={{ float: 'right' }}>
{this.showPagination()}
</div>
</div>
);
}
}
export default App;
Have anything to add? Let me know in the comments.
If you've ever encountered the puzzling behavior of parseInt('09') returning 0 in JavaScript, you're not…
If you’ve ever built an interactive web application, you may have encountered a puzzling issue:…
Arrays are the backbone of programming, used in nearly every application. Whether you're manipulating data,…
If you've ever tried to learn JavaScript, you’ve probably heard about the "Event Loop"—that mysterious,…
JavaScript can sometimes behave in unexpected ways, especially when comparing arrays and objects. If you've…
Recursion is a programming technique where a function calls itself to solve smaller instances of…
View Comments
Nice tutorial,can you please explain how I can add a search bar to this kind of pagination table that only searches data through ID alone.