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.
Latest tech news and coding tips.
The Cross-Platform ImperativeLet's face it: building separate iOS and Android apps wastes resources. React Native…
We live in an age of infinite distraction and overwhelming ambition. Grand goals shimmer on…
Reusable components are modular UI building blocks designed for versatility. Instead of writing duplicate code…
What is a Palindrome? A palindrome is any word, phrase, number, or sequence that reads…
Facial recognition technology is rapidly changing how we interact with devices, access services, and enhance…
Move over ChatGPT, there's a new, significantly upgraded player causing a stir. xAI, Elon Musk's…
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.