React table with pagination

what is up guys my name is warren so and today's tutorial i'm gonna show you how to get data from an api using axios in a react application then we are gonna show the data in a table with pagination for the design i'll be using bootstrap okay now let's install two useful extensions in vs code so click this icon search simple react snippet and install it and second extension is auto import and install it okay now let's create a project open up the terminal npx create react app give a name my to do okay now we have created our react app so go into our project folder cd the project name is my to-do's then we are gonna run the project so npm start okay this is our react project now go back to vs code now we are going to create a component so go here click this one right and open a new terminal uh just click this plus button here right go into the project folder that is cd the project name is my to-do's now let's create our component so go to source folder and create new folder called components now i'm going to create a component so right click a new file let's say posts dot jsx right open up this file we are going to create the functional component first we need to import react so imr it's coming from symbol react snippet press enter then sfc that's mean stateless functional component press enter and give a name okay now i'm gonna return a div now go to the app component here app.js and open it and we're gonna remove all the things here let's give a div now and i'm gonna return the post command here so let's say posts on the top you can see the post component is automatically imported because we installed auto import extension at the beginning now go to your project and you will find the component here now go back to posts and here we are going to get data from an api so search jsonplaceholder in the browser and click this first link we are going to use this api to use api so click this one you can see the data let's show the data in a table come back to our component and we're gonna get the data from that api using axios so first we need to install axios so npm i axios we have installed axios now we need to import it so import axios from [Music] the package name is axios [Music] so now we're gonna get the data now we are going to use use effect so import it first use effect and come here and say then pass an arrow function as an argument and second argument is an array now we are going to use axios so axios dot get then our api url so go here copy this and paste here this will return the promise so dot then [Music] we are going to get the data so let's say response and now we're going to lock the data right so console.log press the data now open up your project and ctrl shift i so it will open the console and you can find here their array with 200 items right here you can find all the data like user id id title and the status so we are going to store this data in a state then i'm going to show the data in a table so we are going to use new state so we need to import it first use it okay use it let's say posts and delete this initial state that's it set post and pass the data press dot data so this data will be stored in posts we are going to create a table for the table we are going to get the data from this post so let's create a table first delete this if you don't have the data in post we shouldn't show the table so let's say if there is no posts then say no data found or else we are going to show the table right so here table table has t head and t body inside the t hit there should be a table row within that we have id user id title and status so th id user id title and status so we are going to show the data so in the curly braces we gonna say posts dot map and first parameter is post and second parameter will be index so index then we're gonna return table row and it has an id he is index inside a tier let's say 3d post dot id then td post user id then post the title save it yes you can find 200 data right so now i'm going to design the table for that i'm going to use bootstrap so go to your vs code install bootstrap npm install bootstrap then import our booster file so go to index.js and here we are we are not going to use this index.css so delete this and import bootstrap so import [Music] in the bootstrap folder go into disk and css and bootstrap css go back to our component let's give some styles so class name table let's check our app all right we have a bootstrap table and we have id and user id and a title and we didn't show the status yet right so go back table data paragraph if it is completed it should be green otherwise it should be red so class name so if it is completed the class name should be btn btn success so that will be green otherwise it should be red btn btn [Music] danger then our text should be if the post is completed pause dot completed if it is true the text should be completed otherwise it should be pending now let's check our app everything is perfect but we have a tiny issue i don't want to show all the 200 data in this table so i'm going to paginate so now we are going to build pagination under this table so go to escort under this table i am going to create a pagination so now inside this ul the class name is pagination then the list class name page link copy this paste it here twice so change the number one two and three save it now let's check let's move the pagination in the center so in the name class name the flex justify content center yeah fine we are going to show 10 data in a page so let's create a variable here and let's say const page size it's 10. now let's create another variable called page count come here const page count if there is post this this post we are going to divide the number of post by the page size so post dot length or else the page count should be zero and it should be posts yes here it may return a float value so we are going to change it to integer so math dot sale and wrap this so in our case the page count should be 20 because we have 200 post when we divide it by page size we'll get 20 and we don't need to return pagination if the page count is equal to 1 so if page count is equal to 1 return null now we are going to create a new variable called pages so const pages so here we will store all the page number in the array so here we are going to use low dash so go to your terminal and install load as npm i low dash so we have successfully installed then we need to import low dash so import let's say dash from low dash then here dash dot range one then the ph count plus one so we will get an array from one to twenty so now we are going to replace this list under the jewel in the curly braces pages dot map let's say page we are gonna return all the list so let's move this list and we don't need these two lists so delete this here we are going to pass the page [Music] so now let's check yes we have 1 to 20 now let's show the first 10 data so we are going to create a state let's name it paginated post page generated and delete this initial value so under this sets post i am going to set the paginated post so straight paginated post the load as then we are going to pass the data res dot data then slice this from low dash from zero and take page size dot value so here low dash and passing the array this is the first record 0 is the index of first record actually in our case page size is 10 so we are taking 10 records then we are setting it to paginator post so come down i'm gonna change it to paginated post so paginated post also i'm gonna change it so imaginated post save it let's check it now yes you can see the first 10 records so now we are showing the first page so in the pagination number one should be selected so come back the current page so you state let's say current page so the initial state is one so come all the way down the class name click this the curly braces if the page is equal to current page the class name should be page item active bills page item [Music] then wrap this page inside the paragraph so p and movies so that class name is page link save it now let's check the first page is selected when we click 2 the next 10 data should be visible also this should be selected am i set so now i'm going to create an event so on click the arrow function let's say the function name is pagination and passing the current page number so so now let's create a pagination function so go up cursed pagination the parameter is page number so now i'm going to set the current page number so set current page so i'm going to pass page number so now create a variable const start index is equal to page number -1 then multiply it by page size now create another variable const pythonated post load as pass all the data it's in posts so post then slice then pass this start index start index [Music] and take the next 10 so page size is 10 so page size the value that's it then we are going to set this to paginated post so set by genetic post pass this value so imaginate it first that's it so now let's check our application first page second bit straight pitch yeah it's working fine that's it guys thank you for watching and please subscribe my youtube channel and like the video if you have any doubt please comment below thank you guys see you in the next tutorial

Channel: Code with Voran

Views: 12,274

Keywords: React, axios, table, api, get, request, bootstrap, lodash, pagination, reactJS, react-table, fetch, fetchApi, codewithvoran, tutorial, react tutorial, 2021, hooks, useEffect, useState

Id: kEd81ZirrCY

Length: 21min 57sec (1317 seconds)

Published: Thu Jan 28 2021