Building a datatable in ReactJS from scratch with pagination, search and sorting | Part 1 of 3

In this series of three videos, we will learn how to build a simple data table in reactjs with pagination, search, and sorting functionalities like a traditional data table.

Part 1 - Setting up a basic bootstrap table and add pagination to the table.

Part 2 - Implement search functionality on the selected fields in the table.
Part 3 - Implement sorting based on selected field and order.

Demo + Source :

Video Timeline:
02:03 - Getting comments data from JSON placeholder API
05:48 - Rendering comments in the table
08:53 - Rendering Pagination Logic
19:43 - Final demo of the implemented table with pagination

Adding a full-page loading component hook in ReactJS:

If you like this video, please support us by subscribing to the channel.

[vairamuthuvairam]

watching your tutorial.My lang time issue solved your tutorial .very very thanks. Your video very helpfull my life sir.

[darkaxce]

Thanks for all the help!!! Really, this video save my life jajajaj xd There are too many videos but with Vainilla JavaScript and not with React, it's a piece of cake with your video. The tip is on the logic for the generate the views(rows) on the table.
Thank you so much!

[bhaskarchowdary]

can you implement check box selection for this?

[sankarbainapalli]

when clink th second time sorting not working
? can you please help where is issue

[lechanhnhut]

Hello man! Why my paging box not be styled ?

[naveenvenkateshk]

Nice video, simple and nice explanation

[ManeshBPandu]

Pagination.Prev is undefined what should i do

[prasheelchadotra]

Bro can we implement the search in 2nd page also?

[miracleanaje]

I am having issues with the slice, I am using React Redux, and I get the error "Cannot read properties of undefined (reading 'length')". Please can someone help me out?

[abdifaishal]

barely hear your sound sir even at full volume, great video btw

[neerajmokashi]

Hi.. Nice Video... :)
I am beginner for react and might be a silly doubt. I am getting an error like "TableHeader is undefined". I have a doubt that where are you importing TableHeader from? from the same DataTable file?? Need your help here...

[shikhugupta]

Sir, is it better to use simple tables with pagination or datatables??
Do datatables slower the page if we have data in 1000’s or more??

[wildosk]

I've followed your whole example, great vid... but Data is not loaded in my table til i click on the pagination. Any ideas?

[neerajmokashi]

Hello again... I have one more doubt. While implementing pagination, I implemented the exact same code as yours, but my "currentPage" value is undefined initially and 1st page is not rendered. When I click on any button of pagination, datatable displays the data. Please let me know how to initialize the value of currentPage to 1. Thanks in advance... :)

[lillycottonear]

Any pointers towards how to download the table in csv/excel on button click?

[vincefeng]

Thanks for the video instruction. It was very helpful. Do you know why the pagination style not working for me?

[vidyasagar]

code is good but you need to start from basic setup. you start modifying the existing code. how one beginner understand?

[shantanu]

how u add searching in this code pls give github link for this project

[MrFyce]

how to implement sorting in crud table from mysql api call?

[MrManaspati]

Can you please share the github repo for this project . It will be helpful